/* ================================
   STYLES — SINGLE BUNDLED STYLESHEET
   Loaded once from index.tsx.

   This file is the concatenation, in cascade order, of:
     1. core      — reset, design tokens, base typography, root font-size scale
     2. components — shared UI primitives (Layout/Sidebar/Modal/Table/Buttons/
                     Forms/Navigation/Auth + shared .print-* and .do-setting-*)
     3. pages     — every per-page stylesheet

   To re-split into multiple files later, search for the
   "[ CORE ]", "[ COMPONENTS ]", and "[ PAGES ]" section markers below.
   (Comment delimiters are omitted here so they don't prematurely close
   this header block.)

   See ./README.md for tuning the global scale (html { font-size: 14px }).
   ================================ */

/* ===== CORE SECTION ===== */
/* ================================
   CORE STYLES
   Reset, design tokens, base typography, root font-size scale, App-level rules.
   Loaded first in index.tsx (will be wired in Task 7).
   ================================ */


/* ===== from styles/abstracts/_variables.css ===== */
/* ================================
   DESIGN SYSTEM VARIABLES
   ================================ */

:root {
  /* Colors */
  --color-primary: #C2DE54;
  --color-primary-dark: #b5d147;
  --color-secondary: #3D5C22;
  --color-secondary-dark: #2a4118;
  --color-sales-green: #138B4C; /* Sales sidebar green */
  --color-sales-yellow: #FFFF54; /* Sales active yellow - matches icon filter */
  
  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #F0F1F3;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #8e8e8e;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  
  /* Semantic colors */
  --color-error: #e74c3c;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-info: #3498db;
  
  /* Typography */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-base: 0.875rem; /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2rem;     /* 32px */
  --font-size-5xl: 2.25rem;  /* 36px */
  --font-size-6xl: 2.5rem;   /* 40px */
  
  /* Spacing */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  
  /* Border radius */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px - Standard */
  --radius-lg: 0.5rem;   /* 8px */
  --radius-xl: 0.75rem;  /* 12px */
  --radius-2xl: 1rem;    /* 16px */
  --radius-full: 50%;
  --radius-standard: 0.375rem; /* 6px - Standard for all components */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 0.25rem 0.375rem -1px rgb(0 0 0 / 0.1), 0 2px 0.25rem -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgb(0 0 0 / 0.1), 0 0.5rem 0.625rem -0.375rem rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 1.5625rem 3.125rem -0.75rem rgb(0 0 0 / 0.25);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}
/* ===== from styles/abstracts/_mixins.css ===== */
/* ================================
   UTILITY MIXINS
   ================================ */

/* Button reset mixin */
.btn-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-decoration: none;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flexbox utilities */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Truncate text */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive typography */
@media (max-width: 768px) {
  .responsive-text-lg {
    font-size: 0.875rem;
    font-size: var(--font-size-base);
  }
  
  .responsive-text-xl {
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
  }
  
  .responsive-text-2xl {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
  }
}
/* ===== from styles/base/_reset.css ===== */
/* ================================
   CSS RESET & NORMALIZE
   ================================ */

/* Global UI scale — reduces effective rem from 16px to 14px (~87.5%) */
html {
  font-size: 14px;
}

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

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
}

/* Set core body defaults */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

#root {
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus styles */
:focus {
  outline: 2px solid #C2DE54;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users but keep for keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}
/* ===== from styles/base/_typography.css ===== */
/* ================================
   TYPOGRAPHY STYLES
   ================================ */

/* Base typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-primary);
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #343a40;
  color: var(--color-gray-800);
}

/* Headings */
h1, .h1 {
  font-size: 2rem;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-size: 1.875rem;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

h3, .h3 {
  font-size: 1.5rem;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

h4, .h4 {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

h5, .h5 {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

h6, .h6 {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

/* Text utilities */
.text-xs { font-size: 0.75rem; font-size: var(--font-size-xs); }
.text-sm { font-size: 0.8125rem; font-size: var(--font-size-sm); }
.text-base { font-size: 0.875rem; font-size: var(--font-size-base); }
.text-md { font-size: 1rem; font-size: var(--font-size-md); }
.text-lg { font-size: 1.125rem; font-size: var(--font-size-lg); }
.text-xl { font-size: 1.25rem; font-size: var(--font-size-xl); }
.text-2xl { font-size: 1.5rem; font-size: var(--font-size-2xl); }
.text-3xl { font-size: 1.875rem; font-size: var(--font-size-3xl); }
.text-4xl { font-size: 2rem; font-size: var(--font-size-4xl); }

.font-light { font-weight: 300; font-weight: var(--font-weight-light); }
.font-normal { font-weight: 400; font-weight: var(--font-weight-regular); }
.font-medium { font-weight: 500; font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: 600; font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: 700; font-weight: var(--font-weight-bold); }

/* Responsive typography */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 1.875rem;
    font-size: var(--font-size-3xl);
  }
  
  h2, .h2 {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
  }
  
  h3, .h3 {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
  }
}
/* ===== from App.css ===== */
.App {
  text-align: center;
  height: 100vh;
  overflow: hidden;
}

.App-header {
  background-color: #282c34;
  padding: 1.25rem;
  color: white;
}
/* ===== COMPONENTS SECTION ===== */
/* ================================
   SHARED COMPONENT STYLES
   Layout, Sidebar, Modal, Table, Buttons, Forms, Navigation, Auth.
   Loaded second (after core.css).
   Per-component co-located CSS for Layout/Sidebar/Modal/Table will be
   appended in Task 6.
   ================================ */


/* ===== from styles/layout/_auth.css ===== */
/* ================================
   AUTHENTICATION LAYOUT STYLES
   ================================ */

.auth-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  background-color: var(--color-white);
  overflow: hidden;
  z-index: 10;
}

.auth-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 17.5rem;
  background-image: url(/static/media/connectivas_skyline_4.edc6547ac26a37fec228.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .auth-container::before {
    height: 11.25rem;
  }
}

@media (max-width: 480px) {
  .auth-container::before {
    height: 7.5rem;
  }
}

.auth-card {
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  box-shadow: 0 1.5625rem 3.125rem -0.75rem rgb(0 0 0 / 0.25);
  box-shadow: var(--shadow-2xl);
  padding: 2.5rem;
  padding: var(--space-10);
  width: 90%;
  max-width: 30rem;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}

@media (max-width: 768px) {
  .auth-card {
    max-width: 26.25rem;
    padding: 2rem;
    padding: var(--space-8);
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 1.5rem 1.25rem;
    padding: var(--space-6) var(--space-5);
    width: 90%;
    max-width: 22.5rem;
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.auth-title {
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
  color: #000000;
  color: var(--color-black);
  font-size: 2rem;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
}

@media (max-width: 480px) {
  .auth-title {
    font-size: 1.875rem;
    font-size: var(--font-size-3xl);
  }
}

.auth-subtitle {
  color: #8e8e8e;
  color: var(--color-gray-600);
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
}

.auth-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.auth-footer {
  text-align: center;
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  color: #8e8e8e;
  color: var(--color-gray-600);
  padding-bottom: 1rem;
  padding-bottom: var(--space-4);
}
/* ===== from styles/components/_navigation.css ===== */
/* ================================
   NAVIGATION COMPONENT STYLES
   ================================ */

.back-link {
  position: absolute;
  top: 1.5rem;
  top: var(--space-6);
  left: 1.5rem;
  left: var(--space-6);
  color: #3D5C22;
  color: var(--color-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  transition: 200ms ease;
  transition: var(--transition-base);
  z-index: 1000;
  z-index: var(--z-dropdown);
}

.back-link:hover {
  color: #2a4118;
  color: var(--color-secondary-dark);
}

@media (max-width: 480px) {
  .back-link {
    top: 1rem;
    top: var(--space-4);
    left: 1rem;
    left: var(--space-4);
  }
}

.page-footer {
  position: absolute;
  bottom: 1.5rem;
  bottom: var(--space-6);
  left: 0;
  right: 0;
  text-align: center;
  color: #343a40;
  color: var(--color-gray-800);
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  z-index: 1000;
  z-index: var(--z-dropdown);
}

@media (max-width: 480px) {
  .page-footer {
    bottom: 1rem;
    bottom: var(--space-4);
  }
}

.signup-prompt {
  text-align: center;
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  color: #8e8e8e;
  color: var(--color-gray-600);
}

.signup-link {
  color: #3D5C22;
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  transition: 200ms ease;
  transition: var(--transition-base);
  margin-left: 0.25rem;
  margin-left: var(--space-1);
}

.signup-link:hover {
  color: #2a4118;
  color: var(--color-secondary-dark);
}
/* ===== from styles/components/_buttons.css ===== */
/* ================================
   BUTTON COMPONENT STYLES
   ================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
  text-decoration: none;
  border: 2px solid transparent;
  height: 2.5rem;
  box-sizing: border-box;
}

.btn:focus {
  outline: 2px solid #C2DE54;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Primary button */
.btn-primary {
  background-color: #C2DE54;
  background-color: var(--color-primary);
  color: #343a40;
  color: var(--color-gray-800);
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: #b5d147;
  background-color: var(--color-primary-dark);
  border-color: #b5d147;
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
  color: #adb5bd;
  color: var(--color-gray-500);
  border-color: #e9ecef;
  border-color: var(--color-gray-200);
  transform: none;
}

/* Secondary button */
.btn-secondary {
  background-color: #ffffff;
  background-color: var(--color-white);
  color: #343a40;
  color: var(--color-gray-800);
  border-color: #e9ecef;
  border-color: var(--color-gray-200);
}

.btn-secondary:hover:not(:disabled) {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  background-color: #F0F1F3;
  background-color: var(--color-gray-100);
}

/* Link button */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: #3D5C22;
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  transition: 200ms ease;
  transition: var(--transition-base);
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
}

.btn-link:hover {
  color: #2a4118;
  color: var(--color-secondary-dark);
}

/* Button sizes */
.btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  min-height: 2.25rem;
}

.btn-lg {
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  min-height: 3.25rem;
}

/* Full width button */
.btn-block {
  width: 100%;
}

/* Button with margin top */
.btn-spaced {
  margin-top: 2rem;
  margin-top: var(--space-8);
}

@media (max-width: 480px) {
  .btn {
    padding: 0.5rem 1rem;
    height: 2.5rem;
  }
  
  .btn-sm {
    padding: 0.375rem 0.75rem;
    height: 2rem;
  }
  
  .btn-lg {
    padding: 0.625rem 1.5rem;
    height: 3rem;
  }
}
/* ===== from styles/components/_forms.css ===== */
/* ================================
   FORM COMPONENT STYLES
   ================================ */

.form-group {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-top: var(--space-4);
}

.form-group:first-child {
  margin-top: 0;
}

.form-label {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  color: #343a40;
  color: var(--color-gray-800);
  text-align: left;
  display: block;
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: #e74c3c;
  color: var(--color-error);
  margin-left: 2px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  padding: 0.5rem 1rem;
  border: 1px solid #adb5bd;
  border: 1px solid var(--color-gray-500);
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  transition: 200ms ease;
  transition: var(--transition-base);
  background-color: #ffffff;
  background-color: var(--color-white);
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.form-input::placeholder {
  color: #adb5bd;
  color: var(--color-gray-500);
}

.form-input--error {
  border-color: #e74c3c;
  border-color: var(--color-error);
}

@media (max-width: 480px) {
  .form-input {
    padding: 0.5rem 0.875rem;
    height: 2.5rem;
  }
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  color: var(--color-gray-500);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.password-toggle:hover {
  color: #8e8e8e;
  color: var(--color-gray-600);
}

.password-toggle:focus {
  outline: none;
}

.error-message {
  color: #e74c3c;
  color: var(--color-error);
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  display: block;
  text-align: left;
  padding-top: 2px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  margin-top: var(--space-4);
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  color: #8e8e8e;
  color: var(--color-gray-600);
  -webkit-user-select: none;
          user-select: none;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #C2DE54;
  accent-color: var(--color-primary);
}

.auth-error-message {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #e74c3c;
  color: var(--color-error);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
  text-align: center;
  height: 2.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input--error {
  border-color: #e74c3c;
  border-color: var(--color-error);
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1.875rem #ffffff inset !important;
  -webkit-box-shadow: 0 0 0 1.875rem var(--color-white) inset !important;
  -webkit-text-fill-color: #212529 !important;
  -webkit-text-fill-color: var(--color-gray-900) !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
}
/* ===== from styles/components/_dashboard.css ===== */
/* ================================
   DASHBOARD LAYOUT STYLES
   ================================ */

.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8fafc;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.third-nav-bar {
  width: 100%;
  height: 4.75rem; /* Increased to accommodate top padding */
  background-color: #F9FAFC;
  position: relative;
  z-index: 10;
  overflow: visible; /* Ensure shadows are visible */
}

.third-nav-layout {
  display: flex;
  height: 100%;
  padding: 1rem 1rem 0 1rem; /* Match main content horizontal padding */
  gap: 1.125rem; /* Match the main content gap */
  align-items: stretch;
  overflow: visible; /* Ensure shadows are visible */
}

/* Third Nav - Column 1: Sidebar Menu */
.third-nav-sidebar {
  width: 14.375rem; /* Match sidebar width */
  flex-shrink: 0;
  transition: width 200ms ease;
  display: flex;
  align-items: flex-end; /* Align to bottom */
  overflow: visible; /* Ensure shadows are visible */
}

.third-nav-sidebar--collapsed {
  width: 3.5rem; /* Match collapsed sidebar width */
}

.third-nav-sidebar--collapsed .third-nav-sidebar-content {
  justify-content: center;
  padding: 0.75rem 0.5rem 0.5rem 0.5rem; /* Match vertical padding */
}

.third-nav-sidebar-content {
  width: 100%;
  padding: 0.75rem 1rem 0.5rem 1rem; /* Match column 2 padding */
  background-color: #ffffff;
  background-color: var(--color-white); /* White background */
  border-radius: 0.375rem 0.375rem 0 0; /* Only top corners rounded */
  min-height: 3.75rem;
  height: 3.75rem; /* Match column 2 height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #212529;
  color: var(--color-gray-900); /* Dark text for white background */
  position: relative;
  z-index: 2;
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 -2px 0.25rem rgba(0, 0, 0, 0.05); /* Top shadow only */
  -webkit-clip-path: inset(-0.625rem -0.625rem 0 -0.625rem);
          clip-path: inset(-0.625rem -0.625rem 0 -0.625rem); /* Clip bottom shadow */
  transition: background-color 200ms ease;
}

.third-nav-sidebar-content:hover {
  background-color: transparent;
}

.third-nav-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #408952; /* Green text */
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0;
  transition: opacity 200ms ease;
}

.third-nav-sidebar-title--collapsed {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

.third-nav-sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green icon */
  flex-shrink: 0;
}

/* Third Nav - Column 2: Main Menu */
.third-nav-main {
  flex: 1 1;
  display: flex;
  align-items: flex-end; /* Align to bottom */
  min-width: 0;
}

.third-nav-main-content {
  width: 100%;
  padding: 1.5rem 1rem 0.75rem 1rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0.375rem 0.375rem 0 0; /* Only top corners rounded */
  min-height: 3.75rem;
  height: 3.75rem; /* Increased height to accommodate more padding */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 -2px 0.25rem rgba(0, 0, 0, 0.05); /* Top shadow only */
  -webkit-clip-path: inset(-0.625rem -0.625rem 0 -0.625rem);
          clip-path: inset(-0.625rem -0.625rem 0 -0.625rem); /* Clip bottom shadow */
}

.third-nav-main-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0;
}

/* Dashboard header in third nav */
.third-nav-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 0.25rem 0; /* Add vertical padding to the header content */
}

.third-nav-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.third-nav-icon-box {
  width: 2.25rem;
  height: 2.25rem;
  background-color: #e8f5e8;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.third-nav-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.third-nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: #138B4C;
  color: var(--color-sales-green);
}

.third-nav-breadcrumb span {
  color: #138B4C;
  color: var(--color-sales-green);
  cursor: pointer;
  transition: font-weight 200ms ease;
}

.third-nav-breadcrumb span:hover {
  font-weight: 600;
}

.third-nav-breadcrumb-sep {
  opacity: 0.5;
  cursor: default !important;
}

.third-nav-breadcrumb-sep:hover {
  font-weight: normal !important;
}

.third-nav-page-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0;
  text-align: left;
}

/* Type Delivery dropdown for Delivery Order page */
.third-nav-delivery-type {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-left: 0;
}

.third-nav-delivery-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #138B4C; /* Green color */
}

.third-nav-delivery-dropdown {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  padding: 0;
  border-radius: 0.25rem;
  transition: background-color 200ms ease;
}

.third-nav-delivery-dropdown:hover {
  background-color: rgba(19, 139, 76, 0.05);
}

.third-nav-delivery-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #138B4C; /* Green color */
}

.third-nav-delivery-arrow {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(84%) saturate(596%) hue-rotate(114deg) brightness(92%) contrast(90%); /* Green color filter */
  transition: transform 200ms ease;
}

.third-nav-delivery-dropdown:hover .third-nav-delivery-arrow {
  transform: translateY(1px);
}

.third-nav-header-right {
  display: flex;
  align-items: center;
  gap: 0;
}

.third-nav-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem; /* Match original dashboard dropdown width */
}

.third-nav-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.third-nav-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.third-nav-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.third-nav-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Third Nav Type Button - Dropdown style */
.third-nav-type-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 11.5625rem; /* Fixed width to accommodate "Non-physical Item" */
}

.third-nav-type-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  border-right: none;
}

.third-nav-type-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-type-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.third-nav-type-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.third-nav-type-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Third Nav Refresh Button - Icon only */
.third-nav-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-left: 0.5rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-refresh-button:hover,
.third-nav-refresh-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.third-nav-refresh-button:focus {
  outline: none;
}

.third-nav-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Expand Button — middle of button group */
.third-nav-expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-left: -1px;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-expand-button:hover,
.third-nav-expand-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  z-index: 1;
}

.third-nav-expand-button:focus {
  outline: none;
}

.third-nav-expand-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Info Button — last in button group, rounded right side */
.third-nav-info-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-left: -1px;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0 0.375rem 0.375rem 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-info-button:hover,
.third-nav-info-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  z-index: 1;
}

.third-nav-info-button:focus {
  outline: none;
}

.third-nav-info-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Sort Button - Icon only */
.third-nav-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-sort-button:hover,
.third-nav-sort-button:active,
.third-nav-sort-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Group Button - Icon only */
.third-nav-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-group-button:hover,
.third-nav-group-button:active,
.third-nav-group-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Download Button - Icon only */
.third-nav-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0 0.375rem 0.375rem 0;
  margin-left: -1px;
  margin-right: 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-download-button:hover,
.third-nav-download-button:active,
.third-nav-download-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Edit Button - Icon only */
/* Hidden by request — markup preserved across all routes (Sales Order,
   Delivery Order, etc.). To restore the Edit / Print / Share toolbar
   icons, delete or comment out this single block. */
.third-nav-edit-button,
.third-nav-print-button,
.third-nav-share-button {
  display: none !important;
}

.third-nav-edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-edit-button:hover,
.third-nav-edit-button:active,
.third-nav-edit-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-edit-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Shared outstanding-items tab button — used by Sales Order, Delivery Order
   (Physical Item + Non-physical Item) and any future page that has a
   "Current Data / To Proceed" toggle. Single source of truth — update here
   and every page picks up the change. */
.outstanding-tab-button {
  width: 8rem;
  height: 2.25rem;
  box-sizing: border-box;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  background: #fff;
  color: #555;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.outstanding-tab-button--first {
  border-radius: 0.375rem 0 0 0.375rem;
}

.outstanding-tab-button--active {
  background: #138B4C;
  color: #fff;
  border-color: #138B4C;
}

/* When the active button sits next to an inactive one, the seam between
   them = the inactive button's left border. Color that green too so the
   active button reads as a clean green-bordered pill. */
.outstanding-tab-button--active + .outstanding-tab-button {
  border-left-color: #138B4C;
}

/* Third Nav Create Button - White background with green icon */
.third-nav-create-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0 0.375rem 0.375rem 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-create-button:hover,
.third-nav-create-button:active,
.third-nav-create-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-create-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Outstanding Button - White background with green icon and red badge */
.third-nav-outstanding-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-outstanding-button.third-nav-outstanding-button--no-radius {
  border-radius: 0;
}

.third-nav-outstanding-button:hover,
.third-nav-outstanding-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  border-right: none;
}

.third-nav-outstanding-button:focus {
  outline: none;
}

.third-nav-outstanding-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-outstanding-badge {
  position: absolute;
  top: -0.5625rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ef4444;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 0.375rem;
  border-radius: 0.625rem;
  min-width: 1.5rem;
  height: 0.875rem;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Third Nav Lock Button - Icon only */
.third-nav-lock-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-lock-button:hover,
.third-nav-lock-button:active,
.third-nav-lock-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-lock-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Delete Button - Icon only */
.third-nav-delete-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-delete-button:hover,
.third-nav-delete-button:active,
.third-nav-delete-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-delete-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Disabled state for toolbar buttons (Outstanding Delivery view) */
.third-nav-edit-button.disabled,
.third-nav-print-button.disabled,
.third-nav-share-button.disabled,
.third-nav-lock-button.disabled,
.third-nav-delete-button.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.third-nav-edit-button.disabled:hover,
.third-nav-print-button.disabled:hover,
.third-nav-share-button.disabled:hover,
.third-nav-lock-button.disabled:hover,
.third-nav-delete-button.disabled:hover {
  background-color: #ffffff;
  background-color: var(--color-white);
  border-color: #dee2e6;
  border-color: var(--color-gray-300);
}

.third-nav-edit-button.disabled img,
.third-nav-print-button.disabled img,
.third-nav-share-button.disabled img,
.third-nav-lock-button.disabled img,
.third-nav-delete-button.disabled img {
  opacity: 0.3;
  filter: grayscale(100%);
}

/* Third Nav Layout Button - Icon only */
.third-nav-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-layout-button:hover,
.third-nav-layout-button:active,
.third-nav-layout-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Filter Button - Icon only */
.third-nav-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-filter-button:hover,
.third-nav-filter-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.third-nav-filter-button:focus {
  outline: none;
}

/* Active state when dropdown is open */
.third-nav-filter-button.active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.third-nav-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Advance Search Button - Icon only */
.third-nav-advance-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-advance-search-button:hover,
.third-nav-advance-search-button:active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.third-nav-advance-search-button:focus {
  outline: none;
}

/* Active state when dropdown is open */
.third-nav-advance-search-button.active {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.third-nav-advance-search-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Print Button - Icon only */
.third-nav-print-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-print-button:hover,
.third-nav-print-button:active,
.third-nav-print-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-print-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Third Nav Share Button - Icon only */
.third-nav-share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  transition: all 200ms ease;
}

.third-nav-share-button:hover,
.third-nav-share-button:active,
.third-nav-share-button:focus {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  outline: none;
}

.third-nav-share-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Share Dropdown Menu */
.share-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 12.5rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.share-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

/* Print Dropdown Menu - Same style as share dropdown */
.print-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 12.5rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.print-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.print-dropdown-item:last-child {
  border-bottom: none;
}

.print-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

/* Advance Search Input Placeholder */
.dashboard-advance-search-input::placeholder {
  color: #adb5bd;
  opacity: 1;
}

.third-nav-main-placeholder {
  display: flex;
  align-items: center;
  color: #8e8e8e;
  color: var(--color-gray-600);
  font-size: 0.875rem;
}

/* Third Nav - Column 3: Insight Bar */
.third-nav-insight {
  width: 18.75rem; /* Match insight bar width */
  flex-shrink: 0;
  transition: width 200ms ease;
  display: flex;
  align-items: flex-end; /* Align to bottom */
  overflow: visible; /* Ensure shadows are visible */
}

.third-nav-insight--collapsed {
  width: 3.5rem; /* Match collapsed width */
}

.third-nav-insight-content {
  width: 100%;
  padding: 0.75rem 1rem 0.5rem 1rem; /* Match column 2 padding */
  background-color: #ffffff;
  background-color: var(--color-white); /* White background */
  border-radius: 0.375rem 0.375rem 0 0; /* Only top corners rounded */
  min-height: 3.75rem;
  height: 3.75rem; /* Match column 2 height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse; /* Icons on left when collapsed */
  color: #212529;
  color: var(--color-gray-900); /* Dark text for white background */
  position: relative;
  z-index: 2;
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 -2px 0.25rem rgba(0, 0, 0, 0.05); /* Top shadow only */
  -webkit-clip-path: inset(-0.625rem -0.625rem 0 -0.625rem);
          clip-path: inset(-0.625rem -0.625rem 0 -0.625rem); /* Clip bottom shadow */
  transition: background-color 200ms ease;
}

.third-nav-insight-content:hover {
  background-color: transparent;
}

.third-nav-insight--collapsed .third-nav-insight-content {
  justify-content: center;
  padding: 0.75rem 0.5rem 0.5rem 0.5rem; /* Match vertical padding */
}

.third-nav-insight-title {
  font-size: 1rem;
  font-weight: 700;
  color: #408952; /* Green text */
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0;
  transition: opacity 200ms ease;
}

.third-nav-insight-title--collapsed {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

.third-nav-insight-icon {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green icon */
  flex-shrink: 0;
}

/* ================================
   MAIN CONTENT - 3 COLUMN LAYOUT
   ================================ */

.main-content-container {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 11.25rem); /* 56px (top nav) + 48px (second nav) + 76px (third nav) = 180px */
  background-color: #F9FAFC;
  overflow: hidden;
  padding: 0 1rem;
  gap: 1.125rem;
}

/* Detail page mode — single column, no sidebar/insights */
/* 56px top nav + 48px second nav = 104px. Padding: 18px top + 18px bottom = 36px. */
.main-content-container--detail {
  padding: 1rem !important;
  gap: 0 !important;
  height: calc(100vh - 6.5rem) !important;
  overflow: visible !important;
}

.main-content-column-2.main-content-column-2--full {
  width: 100%;
  height: 100%;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding: 0;
  margin: 0;
}

.main-content-column-2--full .main-content-main {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.main-content-column-2--full .main-content-main-inner {
  border-radius: 0.375rem;
  height: 100%;
  min-height: auto;
  -webkit-clip-path: none;
          clip-path: none;
  overflow: hidden;
  position: relative;
  box-shadow:
    -2px 0 0.25rem rgba(0, 0, 0, 0.05),
    2px 0 0.25rem rgba(0, 0, 0, 0.05),
    0 -2px 0.25rem rgba(0, 0, 0, 0.05),
    0 2px 0.25rem rgba(0, 0, 0, 0.05);
}

/* Chat/Message page — full height like detail pages (but NOT when in detail mode) */
.main-content-column-2:not(.main-content-column-2--full):has(.home-dashboard),
.main-content-column-2:not(.main-content-column-2--full):has(.message-app-page),
.main-content-column-2:not(.main-content-column-2--full):has(.task-calendar-page),
.main-content-column-2:not(.main-content-column-2--full):has(.task-manager-page),
.main-content-column-2:not(.main-content-column-2--full):has(.business-alliance-page),
.main-content-column-2:not(.main-content-column-2--full):has(.connect-store-page) {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  padding: 0 0.625rem 1rem 0.625rem;
}

.main-content-column-2:not(.main-content-column-2--full):has(.home-dashboard) .main-content-main,
.main-content-column-2:not(.main-content-column-2--full):has(.message-app-page) .main-content-main,
.main-content-column-2:not(.main-content-column-2--full):has(.task-calendar-page) .main-content-main,
.main-content-column-2:not(.main-content-column-2--full):has(.task-manager-page) .main-content-main,
.main-content-column-2:not(.main-content-column-2--full):has(.business-alliance-page) .main-content-main,
.main-content-column-2:not(.main-content-column-2--full):has(.connect-store-page) .main-content-main {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.main-content-column-2:not(.main-content-column-2--full):has(.home-dashboard) .main-content-main-inner,
.main-content-column-2:not(.main-content-column-2--full):has(.message-app-page) .main-content-main-inner,
.main-content-column-2:not(.main-content-column-2--full):has(.task-calendar-page) .main-content-main-inner,
.main-content-column-2:not(.main-content-column-2--full):has(.task-manager-page) .main-content-main-inner,
.main-content-column-2:not(.main-content-column-2--full):has(.business-alliance-page) .main-content-main-inner,
.main-content-column-2:not(.main-content-column-2--full):has(.connect-store-page) .main-content-main-inner {
  border-radius: 0 0 0.375rem 0.375rem;
  height: 100%;
  min-height: auto;
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
  overflow: hidden;
  position: relative;
  box-shadow:
    -2px 0 0.25rem rgba(0, 0, 0, 0.05),
    2px 0 0.25rem rgba(0, 0, 0, 0.05),
    0 2px 0.25rem rgba(0, 0, 0, 0.05);
}

/* Message pages only — 4px gap above the page border-top line */
.main-content-column-2:not(.main-content-column-2--full):has(.message-app-page) .main-content-main-inner {
  padding-top: 0.25rem;
}

/* Column 1 Container */
.main-content-column-1 {
  display: flex;
  padding: 0 0 1rem 0;
}

/* Column 2 Container */
.main-content-column-2 {
  flex: 1 1;
  display: flex;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0.625rem 1rem 0.625rem;
  margin: 0 -0.625rem;
}

/* Delivery Order specific - no page scroll */
.main-content-column-2:has(.delivery-order-wrapper) {
  overflow: hidden;
}

.main-content-column-2::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Column 3 Container */
.main-content-column-3 {
  display: flex;
  padding: 0 0 1rem 0;
}

/* Main Content - Column 1: Sidebar area */
.main-content-sidebar {
  width: 14.375rem; /* Match sidebar width */
  flex-shrink: 0;
  transition: width 200ms ease;
  display: flex;
  flex-direction: column;
  height: 100%; /* Use full height of container */
}

.main-content-sidebar--collapsed {
  width: 3.5rem; /* Match collapsed sidebar width */
}

.main-content-sidebar-inner {
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0 0 0.375rem 0.375rem; /* Only bottom corners rounded */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  max-height: calc(100vh - 6.875rem); /* Never spill past the viewport (top nav + 20px breathing room) */
  /* Hide scrollbar — still scrollable via wheel/trackpad */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
  position: relative;
  z-index: 1;
  box-shadow:
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 2px 0.25rem rgba(0, 0, 0, 0.05); /* Bottom shadow */
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem); /* Clip top shadow */
}

.main-content-sidebar-inner::-webkit-scrollbar {
  display: none; /* Chrome / Safari / new Edge */
}

/* Main Content - Column 2: Main area */
.main-content-main {
  width: 100%; /* Full width */
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible; /* Allow shadows to show */
}

.main-content-main-inner {
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0; /* Remove bottom border radius by default */
  overflow: visible; /* Allow content and shadows to be visible */
  min-height: calc(100vh - 11.25rem + 1.25rem); /* Extend beyond viewport */
  position: relative;
  z-index: 1;
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 2px 0.25rem rgba(0, 0, 0, 0.05); /* Bottom shadow - match columns 1 & 3 */
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem); /* Clip top shadow only */
  padding-bottom: 0; /* Remove padding at bottom */
}

/* Add bottom border radius when scrolled up */
.main-content-main-inner--scrolled {
  border-radius: 0 0 0.375rem 0.375rem; /* Show bottom corners when scrolled */
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 2px 0.25rem rgba(0, 0, 0, 0.05); /* Bottom shadow - match columns 1 & 3 */
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem); /* Clip top shadow only */
}

/* Main Content - Column 3: Insights area */
.main-content-insights {
  width: 18.75rem; /* Match insights width */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width 200ms ease;
}

.main-content-insights--collapsed {
  width: 3.5rem; /* Match collapsed width */
}

.main-content-insights-inner {
  flex: 1 1;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0 0 0.375rem 0.375rem; /* Only bottom corners rounded */
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  position: relative;
  z-index: 1;
  box-shadow: 
    -2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    2px 0 0.25rem rgba(0, 0, 0, 0.05), 
    0 2px 0.25rem rgba(0, 0, 0, 0.05); /* Bottom shadow */
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem); /* Clip top shadow */
}

.main-content-insights-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.dashboard-body {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

/* ================================
   SIDEBAR STYLES
   ================================ */

.sidebar {
  width: 14.375rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-right: 1px solid #e9ecef;
  border-right: 1px solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  position: relative;
  z-index: 1000; /* Above overlay (998) but below dropdowns (2000-2001) */
  overflow: visible;
  height: 100%;
}

.sidebar--collapsed {
  width: 3.5rem;
}

.sidebar-header {
  padding: 0.5rem 1rem;
  padding: 0.5rem var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 3.5rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--color-gray-200);
}

.sidebar--collapsed .sidebar-header {
  justify-content: center;
  padding: 0.8125rem 0.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.logo:hover {
  opacity: 0.8;
}

.logo-image {
  width: 2.375rem;
  height: 2.375rem;
  object-fit: contain;
}

.sidebar--collapsed .logo-image {
  width: 1.875rem;
  height: 1.875rem;
}

.logo-text {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #000000;
  color: var(--color-black);
}


.sidebar-nav {
  flex: 1 1;
  padding: 1.25rem 0 1rem 0;
  padding: var(--space-5) 0 var(--space-4) 0; /* Increased top padding */
  overflow-y: auto;
  position: relative;
}

.sidebar--collapsed .sidebar-nav {
  padding: 1.25rem 0 1rem 0;
  padding: var(--space-5) 0 var(--space-4) 0; /* Match top padding */
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-item {
  position: relative;
}

.nav-item.with-separator {
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
  padding-bottom: 0.75rem;
  padding-bottom: var(--space-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
  position: relative;
  justify-content: flex-start;
  padding-left: 1.5rem;
}

.sidebar--collapsed .nav-link {
  justify-content: center;
  padding: 0.75rem 0;
  padding: var(--space-3) 0;
  margin: 0;
}

.nav-link:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.nav-link-active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: bold;
}

.nav-link-active .nav-icon {
  /* Apply green color #335D16 to solid icons */
  filter: brightness(0) saturate(100%) invert(21%) sepia(71%) saturate(1094%) hue-rotate(75deg) brightness(92%) contrast(92%) !important;
}

.nav-link-active .nav-title {
  color: #000000;
  font-weight: bold;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  filter: opacity(0.7);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.nav-link:hover .nav-icon {
  filter: opacity(0.9);
}

/* Keep green color on hover when active */
.nav-link-active:hover .nav-icon {
  filter: brightness(0) saturate(100%) invert(21%) sepia(71%) saturate(1094%) hue-rotate(75deg) brightness(92%) contrast(92%);
}

.nav-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

.nav-link-with-arrow {
  cursor: pointer;
  position: relative;
}

.nav-arrow-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  filter: opacity(0.6);
  transition: all 0.3s ease;
  transform: rotate(0deg);
}

.nav-arrow-rotated {
  transform: rotate(180deg);
}

.nav-link:hover .nav-arrow-icon {
  filter: opacity(0.9);
}

.nav-chevron {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  filter: opacity(0.7);
  transition: 200ms ease;
  transition: var(--transition-base);
  transform: rotate(0deg);
}

.nav-chevron-expanded {
  transform: rotate(180deg);
}

.nav-submenu-dropdown {
  position: fixed;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  width: 14.375rem; /* Match sidebar width exactly */
  z-index: 2000;
  padding: 0.5rem 0 1.25rem;
  /* Fallback cap so the menu never spills past the viewport even before JS sets maxHeight */
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  /* Thin, light scrollbar — Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Thin, light scrollbar — WebKit (Chrome / Safari / Edge) */
.nav-submenu-dropdown::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}
.nav-submenu-dropdown::-webkit-scrollbar-track {
  background: #E5E5E5;
}
.nav-submenu-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}
.nav-submenu-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.nav-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.nav-submenu-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  filter: opacity(0.7);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.nav-submenu-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.nav-submenu-item:hover .nav-submenu-icon {
  filter: opacity(0.9);
}

.nav-submenu-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

.nav-submenu-item--with-arrow {
  justify-content: space-between;
}

.nav-submenu-arrow {
  width: 1rem;
  height: 1rem;
  filter: opacity(0.5);
  transition: all 0.3s ease;
  transform: rotate(0deg);
}

.nav-submenu-item--with-arrow:hover .nav-submenu-arrow {
  filter: opacity(0.8);
}

/* Rotating arrow for Org. Structure when submenu is open */
.nav-submenu-item--with-arrow.active .nav-submenu-arrow {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Active state for Org. Structure when submenu is open */
.nav-submenu-item--with-arrow.active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: bold;
}

.nav-submenu-item--with-arrow.active .nav-submenu-icon {
  /* Apply green color #335D16 to solid icons */
  filter: brightness(0) saturate(100%) invert(21%) sepia(71%) saturate(1094%) hue-rotate(75deg) brightness(92%) contrast(92%);
}

.nav-submenu-item--with-arrow.active .nav-submenu-title {
  color: #000000;
  font-weight: bold;
}

/* Sales Org Structure Level 2 Dropdown - Complete independent styling - Updated */
.sales-org-structure-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items - exact copy of level 1 */
.sales-org-structure-dropdown .org-structure-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-org-structure-dropdown .org-structure-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-org-structure-dropdown .org-structure-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Master Data Level 2 Dropdown - Same styling as Org Structure */
.sales-master-data-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Master Data */
.sales-master-data-dropdown .master-data-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-master-data-dropdown .master-data-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-master-data-dropdown .master-data-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Plan & Budget Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-plan-budget-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Plan & Budget */
.sales-plan-budget-dropdown .plan-budget-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-plan-budget-dropdown .plan-budget-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-plan-budget-dropdown .plan-budget-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Voucher Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-voucher-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Voucher */
.sales-voucher-dropdown .voucher-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-voucher-dropdown .voucher-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-voucher-dropdown .voucher-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Business Partner Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-business-partner-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Business Partner */
.sales-business-partner-dropdown .business-partner-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-business-partner-dropdown .business-partner-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-business-partner-dropdown .business-partner-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Campaign Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-campaign-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Campaign */
.sales-campaign-dropdown .campaign-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-campaign-dropdown .campaign-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-campaign-dropdown .campaign-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Activity Tracker Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-activity-tracker-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Activity Tracker */
.sales-activity-tracker-dropdown .activity-tracker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-activity-tracker-dropdown .activity-tracker-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-activity-tracker-dropdown .activity-tracker-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Pre-Sales Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-pre-sales-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Pre-Sales */
.sales-pre-sales-dropdown .pre-sales-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-pre-sales-dropdown .pre-sales-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-pre-sales-dropdown .pre-sales-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Sales Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-sales-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Sales */
.sales-sales-dropdown .sales-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-sales-dropdown .sales-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-sales-dropdown .sales-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Delivery Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-delivery-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Delivery */
.sales-delivery-dropdown .delivery-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-delivery-dropdown .delivery-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-delivery-dropdown .delivery-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales Billing Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-billing-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for Billing */
.sales-billing-dropdown .billing-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-billing-dropdown .billing-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-billing-dropdown .billing-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales After Sales Level 2 Dropdown - Same styling as other level 2 dropdowns */
.sales-after-sales-dropdown {
  position: fixed !important;
  background-color: #ffffff !important;
  background-color: var(--color-white) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 14.375rem !important;
  z-index: 2001 !important;
  padding: 0.5rem 0 !important;
}

/* Level 2 submenu items for After Sales */
.sales-after-sales-dropdown .after-sales-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-after-sales-dropdown .after-sales-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-after-sales-dropdown .after-sales-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

.nav-dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  padding: 0.5rem 0.75rem;
  padding: var(--space-2) var(--space-3);
  margin-left: 0.5rem;
  margin-left: var(--space-2);
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  z-index: 1000;
}

.nav-dropdown-title {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  color: #343a40;
  color: var(--color-gray-800);
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.nav-dropdown-submenu {
  border-top: 1px solid #e9ecef;
  border-top: 1px solid var(--color-gray-200);
  padding-top: 0.5rem;
  padding-top: var(--space-2);
  margin-top: 0.5rem;
  margin-top: var(--space-2);
}

.nav-dropdown-subitem {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  color: #8e8e8e;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.nav-dropdown-subitem:hover {
  color: #343a40;
  color: var(--color-gray-800);
}

/* ================================
   MAIN CONTENT STYLES
   ================================ */

.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main content without sidebar - full width */
.main-content--no-sidebar {
  margin-left: 0;
  width: 100%;
}

/* ================================
   TOP BAR STYLES
   ================================ */

.top-bar {
  background-color: #F8F9FA;
  padding: 0 1.25rem;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  min-height: 3.5rem;
  width: 100%;
}

/* ================================
   SECOND NAV BAR STYLES
   ================================ */

.second-nav-bar {
  background-color: #F8F9FA;
  height: 3rem;
  min-height: 3rem;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 1.25rem;
  padding: 0 var(--space-5);
  border-bottom: 6px solid #FFFFFF;
  position: relative;
  z-index: 20;
  overflow: visible;
}

.second-nav-bar::after {
  content: '';
  position: absolute;
  bottom: -0.875rem;
  left: 0;
  right: 0;
  height: 0.5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
  z-index: 21;
}

.second-nav-menu {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  position: relative;
  width: 100%;
}

/* Frozen left section — Home + Apps, never scrolls */
.second-nav-frozen {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  gap: 0.25rem;
}

/* Scrollable document tabs area */
.second-nav-tabs-scroll {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  height: calc(100% + 0.625rem);
  margin-top: -0.625rem;
  padding-top: 0.625rem;
  margin-left: 0.25rem;
  padding-left: 0.375rem;
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1;
  min-width: 0;
  scrollbar-width: none;
}

.second-nav-tabs-scroll::-webkit-scrollbar {
  height: 0;
  width: 0;
  display: none;
}

.second-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0 0.75rem;
  padding: 0 var(--space-3);
  background-color: #F8F9FA;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  height: 100%;
  position: relative;
}

.second-nav-item:hover:not(.second-nav-item--active) {
  background-color: #D0D5DD;
  border-radius: 0.625rem 0.625rem 0 0;
}

/* Hover effect for inactive tabs - grey bottom line */
.second-nav-item:hover:not(.second-nav-item--active)::after {
  content: none;
}

.second-nav-item--active {
  background-color: #FFFFFF;
  border-radius: 0.625rem 0.625rem 0 0;
  box-shadow: 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.06), -0.1875rem 0 0.375rem rgba(0, 0, 0, 0.06), 0.1875rem 0 0.375rem rgba(0, 0, 0, 0.06);
  z-index: 1;
  position: relative;
  -webkit-clip-path: inset(-0.625rem -0.625rem 0 -0.625rem);
          clip-path: inset(-0.625rem -0.625rem 0 -0.625rem);
}

.second-nav-item--active::after {
  content: none;
}

.second-nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: opacity(0.7);
}


.second-nav-item--active .second-nav-icon {
  /* Green color #408952 filter */
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

/* Keep green color on hover when active */
.second-nav-item--active:hover .second-nav-icon {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

/* All tabs use same green color #408952 when active - removed individual color overrides */

/* Hover color for all inactive tabs - same green #408952 */
.second-nav-item:hover:not(.second-nav-item--active) .second-nav-icon {
  /* Green color #408952 */
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.second-nav-item:hover .second-nav-label {
  color: #212529;
  color: var(--color-gray-900);
}

.second-nav-item--active .second-nav-label {
  color: #000000;
  font-weight: bold;
}

/* Apps tab fixed width — fits longest label "Apps : Inventory" + caret */
.second-nav-item-apps {
  width: 11.875rem;
  min-width: 11.875rem;
  justify-content: flex-start;
}

.second-nav-item-apps .second-nav-caret-wrapper {
  margin-left: auto;
}

/* Apps caret wrapper — hover shape like close button */
.second-nav-caret-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.1875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background-color: rgba(0, 0, 0, 0.06);
}

.second-nav-caret-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

.second-nav-item--active .second-nav-caret-wrapper {
  background-color: rgba(19, 139, 76, 0.1);
}

.second-nav-item--active .second-nav-caret-wrapper:hover {
  background-color: rgba(19, 139, 76, 0.18);
}

/* Apps caret icon */
.second-nav-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: none;
}

.second-nav-item--active .second-nav-caret {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-item:hover .second-nav-caret {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-caret-wrapper:hover .second-nav-caret {
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1500%) hue-rotate(84deg) brightness(80%) contrast(90%);
}

/* Apps dropdown */
.second-nav-apps-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 11.875rem;
  min-width: 11.875rem;
  background-color: #FFFFFF;
  border: none;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: -0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.06), 0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.06), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.06);
  -webkit-clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
          clip-path: inset(0 -0.625rem -0.625rem -0.625rem);
  z-index: 99999;
  padding: 0.375rem 0;
  /* Never spill past the viewport. Dropdown sits ~100px from page top
     (first nav + second nav 48px). 100 + 20 = 120 → leaves 20px gap above screen bottom. */
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  /* Hide scrollbar — still scrollable via wheel/trackpad */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}

.second-nav-apps-dropdown::-webkit-scrollbar {
  display: none; /* Chrome / Safari / new Edge */
}

.second-nav-apps-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.second-nav-apps-dropdown-item:hover {
  background-color: #F2F8EA;
}

.second-nav-apps-dropdown-item--active {
  background-color: #EDF5EC;
}

.second-nav-apps-dropdown-item--active:hover {
  background-color: #E4F0E0;
}

.second-nav-apps-dropdown-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: opacity(0.7);
}

.second-nav-apps-dropdown-item--active .second-nav-apps-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-apps-dropdown-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #495057;
  color: var(--color-gray-700);
}

.second-nav-apps-dropdown-item--active .second-nav-apps-dropdown-label {
  color: #333;
  font-weight: 600;
}

.second-nav-apps-dropdown-item:hover .second-nav-apps-dropdown-label {
  color: #212529;
  color: var(--color-gray-900);
}

/* Dynamic document tabs (SO detail, etc.) */
.second-nav-item-doc {
  gap: 0.375rem;
  padding: 0 0.5rem 0 0.75rem;
  padding: 0 0.5rem 0 var(--space-3);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  height: 100%;
  width: 11.875rem;
  min-width: 11.875rem;
  max-width: 11.875rem;
}

.second-nav-item-doc .second-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  text-align: left;
}

.second-nav-item-doc .second-nav-tab-close-wrapper {
  margin-left: auto;
}

/* Vertical divider between all nav tabs */
.second-nav-item-home::after,
.second-nav-item-doc::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 50%;
  top: 25%;
  background-color: #D0D5DD;
}

.second-nav-item-home::after {
  right: -1px;
}

.second-nav-item-doc::before {
  left: 0;
}

.second-nav-apps-wrapper {
  display: flex;
  align-items: center;
}


/* Hide Home-Apps divider when Home or Apps is active or Apps is hovered */
.second-nav-frozen--home-active .second-nav-item-home::after,
.second-nav-frozen--apps-active .second-nav-item-home::after,
.second-nav-frozen:has(.second-nav-item-apps:hover) .second-nav-item-home::after {
  content: none;
}

/* Hide first doc tab divider when Apps is active or hovered */
.second-nav-tabs-scroll--apps-active .second-nav-item-doc:first-child::before,
.second-nav-menu:has(.second-nav-item-apps:hover) .second-nav-tabs-scroll .second-nav-item-doc:first-child::before {
  content: none;
}

/* Hide divider on active tab and tab immediately after active */
.second-nav-item-doc.second-nav-item--active::before,
.second-nav-item-doc.second-nav-item--active + .second-nav-item-doc::before,
.second-nav-item-doc:hover::before,
.second-nav-item-doc:hover + .second-nav-item-doc::before {
  content: none;
}

.second-nav-tabs-scroll .second-nav-item--active::after {
  content: none;
}

.second-nav-tabs-scroll .second-nav-item:hover:not(.second-nav-item--active)::after {
  content: none;
}


.second-nav-tab-close-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.1875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.second-nav-tab-close-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.second-nav-item--active .second-nav-tab-close-wrapper:hover {
  background-color: rgba(19, 139, 76, 0.1);
}

.second-nav-tab-close {
  width: 0.625rem;
  height: 0.625rem;
  filter: opacity(0.6);
  transition: all 0.15s ease;
}

.second-nav-item--active .second-nav-tab-close {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-item:hover .second-nav-tab-close {
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1177%) hue-rotate(84deg) brightness(94%) contrast(87%);
}

.second-nav-tab-close-wrapper:hover .second-nav-tab-close {
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1500%) hue-rotate(84deg) brightness(80%) contrast(90%);
}

.top-bar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  height: 100%;
}

.top-bar-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  padding: 0 var(--space-4);
}

/* Logo in navbar */
.logo-container-btn {
  background: none;
  border: none;
  padding: 0 0.75rem;
  padding: 0 var(--space-3);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-container-btn:hover {
  background-color: #ffffff;
  background-color: var(--color-white);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
}

.navbar-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.navbar-logo-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  letter-spacing: -0.5px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 31.25rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  filter: opacity(0.6);
}

.search-input {
  width: 100%;
  padding: 0.5rem 1.25rem 0.5rem 2.75rem;
  border: 1px solid #ced4da;
  border: 1px solid var(--color-gray-400);
  border-radius: 62.4375rem;
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  background-color: #ffffff;
  background-color: var(--color-white);
  height: 2.375rem;
  box-sizing: border-box;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

/* Search Grey Component */
.search-grey-container {
  position: relative;
  width: 100%;
  max-width: 31.25rem;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 62.4375rem;
  height: 2.125rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.search-grey-container:focus-within {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.search-grey-icon {
  position: absolute;
  right: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9375rem;
  height: 0.9375rem;
  filter: opacity(0.5);
  pointer-events: none;
}

.search-grey-input {
  flex: 1 1;
  padding: 0.4375rem 2.625rem 0.4375rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  height: 100%;
  box-sizing: border-box;
  color: #212529;
  color: var(--color-gray-900);
  outline: none;
}

.search-grey-input::placeholder {
  color: #adb5bd;
  color: var(--color-gray-500);
  opacity: 0.8;
}

/* Search Category Dropdown */
.search-category-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 1rem;
  width: 6.5rem; /* Adjusted width to show full "Document" with arrow */
}

.search-category-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0 0.625rem 0 0;
  cursor: pointer;
  height: 100%;
  font-size: 0.75rem;
  color: #495057;
  color: var(--color-gray-700);
  transition: color 0.2s;
  width: 100%;
}

.search-category-button:hover {
  color: #212529;
  color: var(--color-gray-900);
}

.search-category-text {
  font-weight: 700;
  white-space: nowrap;
  text-align: left;
  width: 4.125rem; /* Increased to show full "Document" */
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-category-arrow {
  width: 0.625rem;
  height: 0.625rem;
  filter: opacity(0.6);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.search-category-button:hover .search-category-arrow {
  filter: opacity(0.8);
}

.search-category-menu {
  position: absolute;
  top: 2.125rem;
  left: 0;
  background: white;
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  padding: 0.25rem 0;
  min-width: 8.75rem;
  z-index: 3000;
}

.search-category-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.search-category-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.search-category-item--active {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 700;
}

.search-category-item--active:hover {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 700;
}

.search-input::placeholder {
  color: #adb5bd;
  color: var(--color-gray-500);
}

.top-bar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding: 0 var(--space-3);
  border-radius: 0;
  color: #8e8e8e;
  color: var(--color-gray-600);
  position: relative;
  transition: 200ms ease;
  transition: var(--transition-base);
  min-width: 3.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background-color: #ffffff;
  background-color: var(--color-white);
  color: #343a40;
  color: var(--color-gray-800);
}

.icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  filter: opacity(0.6);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.icon-button:hover .icon-svg {
  filter: opacity(0.8);
}

.company-container {
  position: relative;
  height: 100%;
}

.company-btn {
  position: relative;
}

.notification-container {
  position: relative;
  height: 100%;
}

.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 0.5rem;
  right: 2px;
  left: auto;
  transform: none;
  background-color: #ef4444;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 0.375rem;
  border-radius: 0.625rem;
  min-width: 1.5rem;
  height: 0.875rem;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   COMPANY/ORGANIZATION DROPDOWN STYLES
   ================================ */

.company-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  min-width: 18.75rem;
  z-index: 1000;
  overflow: hidden;
}

.company-dropdown-header {
  padding: 0.75rem 0.875rem;
  background-color: var(--color-gray-50);
  text-align: left;
}

.company-dropdown-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.company-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.company-dropdown-list {
  max-height: 18.75rem;
  overflow-y: auto;
}

.company-item {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #F0F1F3;
  border-bottom: 1px solid var(--color-gray-100);
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  gap: 0.625rem;
}

.company-item:hover {
  background-color: #f0f8e8;
}

.company-item:last-child {
  border-bottom: none;
}

.company-checkbox {
  display: none;
}

.company-item-check {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  border: 2px solid #D0D0D0;
  border-radius: 0.1875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}

.company-item-check--checked {
  background-color: #138B4C;
  border: none;
}

.company-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  flex: 1 1;
  min-width: 0;
}

.company-item-id {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #138B4C;
  line-height: 1.3;
}

.company-item-code {
  font-size: 0.75rem;
  font-weight: 600;
  color: #444;
  line-height: 1.3;
}

.company-item-name {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #666;
  line-height: 1.4;
}

/* ================================
   NOTIFICATION DROPDOWN STYLES
   ================================ */

.notification-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  width: 18.75rem;
  z-index: 1000;
  overflow: hidden;
}

.notification-dropdown-header {
  padding: 0.75rem 0.875rem;
  background-color: var(--color-gray-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-dropdown-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.notification-dropdown-count {
  font-size: 0.625rem;
  color: #999;
  font-weight: 500;
}

.notification-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.notification-dropdown-list {
  max-height: 21.25rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.notification-item {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #F0F1F3;
  border-bottom: 1px solid var(--color-gray-100);
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.notification-item:hover {
  background-color: #f0f8e8;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.notification-item-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1;
  min-width: 0;
}

.notification-item-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-subtitle {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-message {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-time {
  font-size: 0.625rem;
  color: #aaa;
  margin-top: 2px;
}

.notification-dropdown-footer {
  padding: 0;
}

.notification-dropdown-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: none;
  border: none;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #138B4C;
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.notification-dropdown-action:hover {
  background-color: #f0f8e8;
}

/* Support Dropdown Styles */
.support-container {
  position: relative;
  height: 100%;
}

.support-btn {
  position: relative;
}

.support-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  min-width: 18.75rem;
  z-index: 1000;
  overflow: hidden;
}

.support-dropdown-header {
  padding: 0.75rem 0.875rem;
  background-color: var(--color-gray-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.support-dropdown-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.support-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.support-dropdown-list {
  max-height: 18.75rem;
  overflow-y: auto;
}

.support-item {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #F0F1F3;
  border-bottom: 1px solid var(--color-gray-100);
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.support-item:hover {
  background-color: #f0f8e8;
}

.support-item:last-child {
  border-bottom: none;
}

.support-item-icon {
  width: 2rem;
  height: 2rem;
  background-color: #C2DE54;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) invert(1);
}

.support-item-content {
  flex: 1 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-item-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}

.support-item-description {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.3;
}

/* Info Dropdown Styles */
.info-container {
  position: relative;
  height: 100%;
}

.info-btn {
  position: relative;
}

/* Expand Button Styles */
.expand-container {
  position: relative;
  height: 100%;
}

.expand-btn {
  position: relative;
}

.info-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  min-width: 18.75rem;
  z-index: 1000;
  overflow: hidden;
}

.info-dropdown-header {
  padding: 0.75rem 0.875rem;
  background-color: var(--color-gray-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-dropdown-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.info-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.info-dropdown-list {
  max-height: 18.75rem;
  overflow-y: auto;
}

.info-item {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #F0F1F3;
  border-bottom: 1px solid var(--color-gray-100);
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.info-item:hover {
  background-color: #f0f8e8;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item-icon {
  width: 2rem;
  height: 2rem;
  background-color: #C2DE54;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) invert(1);
}

.info-item-content {
  flex: 1 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-item-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}

.info-item-description {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.4;
}

.user-profile {
  position: relative;
  height: 100%;
}

.profile-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  padding: 0 var(--space-3);
  border-radius: 0;
  transition: 200ms ease;
  transition: var(--transition-base);
  height: 100%;
}

.profile-btn:hover {
  background-color: #ffffff;
  background-color: var(--color-white);
}

.profile-avatar {
  width: 2.25rem;
  height: 2.25rem;
  background-color: #C2DE54;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  color: var(--color-white);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
}

.profile-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.profile-name {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  color: #212529;
  color: var(--color-gray-900);
}

.profile-email {
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  color: #8e8e8e;
  color: var(--color-gray-600);
}

.profile-arrow {
  color: #adb5bd;
  color: var(--color-gray-500);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  min-width: 18.75rem;
  z-index: 1000;
  overflow: hidden;
}

.profile-dropdown-header {
  padding: 1rem;
  padding: var(--space-4);
  background-color: var(--color-gray-50);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.profile-dropdown-user-photo {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #C2DE54;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  color: var(--color-white);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.profile-dropdown-info {
  flex: 1 1;
  text-align: left;
}

.profile-dropdown-name {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #212529;
  color: var(--color-gray-900);
  margin-bottom: 1px;
}

.profile-dropdown-email {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  color: #8e8e8e;
  color: var(--color-gray-600);
  margin-bottom: 1px;
}

.profile-dropdown-position {
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  color: #adb5bd;
  color: var(--color-gray-500);
  margin-bottom: 0;
}

.profile-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.profile-dropdown-section {
  padding: 0;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  width: 100%;
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  transition: 200ms ease;
  transition: var(--transition-base);
  margin-bottom: 2px;
}

.profile-dropdown-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  filter: opacity(0.7);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.profile-dropdown-item:hover .profile-dropdown-icon {
  filter: opacity(0.9);
}

.profile-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.profile-dropdown-item:last-child {
  margin-bottom: 0;
}

/* ================================
   LOGOUT MODAL STYLES
   ================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6.875rem;
  z-index: 10000;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-container {
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  box-shadow: 0 1.5625rem 3.125rem -0.75rem rgb(0 0 0 / 0.25);
  box-shadow: var(--shadow-2xl);
  min-width: 30rem;
  max-width: 37.5rem;
  min-height: 15.625rem;
  overflow: hidden;
  animation: slideIn 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideIn {
  from {
    transform: scale(0.9) translateY(-1.25rem);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 1rem 1.25rem;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #212529;
  color: var(--color-gray-900);
  margin: 0;
  text-align: left;
}

.modal-content {
  padding: 1rem 1.25rem;
  padding: var(--space-4) var(--space-5);
  flex: 1 1;
}

.modal-message {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  color: #495057;
  color: var(--color-gray-700);
  text-align: left;
  margin: 0;
  line-height: 1.5;
}

.modal-actions {
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  gap: 0.75rem;
  gap: var(--space-3);
  justify-content: center;
}

.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
  text-decoration: none;
  height: 2.5rem;
  box-sizing: border-box;
  min-width: 7.5rem;
}

.modal-btn-cancel {
  background-color: #ffffff;
  background-color: var(--color-white);
  color: #343a40;
  color: var(--color-gray-800);
  border-color: #e9ecef;
  border-color: var(--color-gray-200);
}

.modal-btn-cancel:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  background-color: #F0F1F3;
  background-color: var(--color-gray-100);
  transform: translateY(-1px);
}

.modal-btn-confirm {
  background-color: #C2DE54;
  background-color: var(--color-primary);
  color: #343a40;
  color: var(--color-gray-800);
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.modal-btn-confirm:hover {
  background-color: #b5d147;
  background-color: var(--color-primary-dark);
  border-color: #b5d147;
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  padding: var(--space-2);
  border-radius: 0.375rem;
  color: #adb5bd;
  color: var(--color-gray-500);
  transition: 200ms ease;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.modal-close-btn:hover {
  background-color: #F0F1F3;
  background-color: var(--color-gray-100);
  color: #495057;
  color: var(--color-gray-700);
}


/* ================================
   DASHBOARD CONTENT STYLES
   ================================ */

.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.main-content--no-sidebar {
  margin-left: 0;
}

.page-content {
  flex: 1 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.dashboard-content {
  flex: 1 1;
  padding: 1.5rem;
  padding: var(--space-6);
  overflow-y: auto;
}

.content-header {
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: 1.875rem;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--space-2) 0;
}

.page-subtitle {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  color: #8e8e8e;
  color: var(--color-gray-600);
  margin: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.5rem;
  grid-gap: 1.5rem;
  grid-gap: var(--space-6);
  gap: var(--space-6);
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.dashboard-card {
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  padding: var(--space-6);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.dashboard-card:hover {
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.1);
  box-shadow: var(--shadow-lg);
  border-color: #dee2e6;
  border-color: var(--color-gray-300);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  color: #495057;
  color: var(--color-gray-700);
  margin: 0;
}

.card-icon {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
}

.metric-value {
  font-size: 1.875rem;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #212529;
  color: var(--color-gray-900);
}

.metric-change {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

.metric-change.positive {
  color: #10b981;
}

.metric-change.negative {
  color: #ef4444;
}

.dashboard-section {
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  padding: var(--space-6);
}

.section-title {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 1rem 0;
  margin: 0 0 var(--space-4) 0;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem;
  padding: var(--space-3);
  border-radius: 0.375rem;
  border-radius: var(--radius-standard);
  transition: 200ms ease;
  transition: var(--transition-base);
}

.activity-item:hover {
  background-color: var(--color-gray-50);
}

.activity-icon {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  min-width: 1.5rem;
  text-align: center;
}

.activity-content {
  flex: 1 1;
}

.activity-title {
  font-size: 0.8125rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  color: #212529;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  color: #8e8e8e;
  color: var(--color-gray-600);
}

/* ================================
   RESPONSIVE STYLES
   ================================ */

@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    order: 2;
  }
  
  .sidebar--collapsed {
    width: 100%;
  }
  
  .main-content {
    order: 1;
  }
  
  .top-bar {
    padding: 0 1rem;
    padding: 0 var(--space-4);
  }
  
  .dashboard-content {
    padding: 1rem;
    padding: var(--space-4);
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    gap: var(--space-4);
  }
  
  .profile-info {
    display: none;
  }
}

/* ================================
   RESPONSIVE MOBILE STYLES
   ================================ */

/* Mobile overlay for sidebar */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.2s ease-in-out;
}

/* Mobile sidebar styles */
.sidebar--mobile {
  position: fixed;
  top: 0;
  left: -20rem; /* Hidden by default */
  width: 20rem !important;
  height: 100vh;
  z-index: 1000;
  transition: left 0.3s ease-in-out;
}

.sidebar--mobile .nav-title {
  display: block !important; /* Force show labels on mobile */
}

.sidebar--mobile .logo-text {
  display: block !important; /* Force show logo text on mobile */
}

/* Ensure mobile sidebar has same styling as desktop */
.sidebar--mobile .sidebar-header {
  padding: 0.5rem 1rem !important;
  padding: 0.5rem var(--space-4) !important; /* Same as desktop */
  justify-content: flex-start !important; /* Not centered like collapsed */
}

.sidebar--mobile .nav-link {
  padding: 0.75rem 1rem !important;
  padding: var(--space-3) var(--space-4) !important; /* Same as desktop */
  padding-left: 1.5rem !important; /* Same as desktop */
  justify-content: flex-start !important; /* Not centered like collapsed */
}

.sidebar--mobile .logo {
  gap: 0.75rem !important;
  gap: var(--space-3) !important; /* Same spacing as desktop */
}

/* Override collapsed styles for mobile */
.sidebar--mobile.sidebar--collapsed .sidebar-header {
  padding: 0.5rem 1rem !important;
  padding: 0.5rem var(--space-4) !important; /* Override collapsed center padding */
  justify-content: flex-start !important; /* Override collapsed center alignment */
}

.sidebar--mobile.sidebar--collapsed .nav-link {
  padding: 0.75rem 1rem !important;
  padding: var(--space-3) var(--space-4) !important; /* Override collapsed center padding */
  padding-left: 1.5rem !important; /* Override collapsed center padding */
  justify-content: flex-start !important; /* Override collapsed center alignment */
  margin: 0 !important; /* Override collapsed margin */
}

.sidebar--mobile-open {
  left: 0; /* Slide in from left */
}

/* Mobile menu button */
.mobile-menu-btn {
  background: #819044;
  border: none;
  padding: 0;
  margin: 0;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: 200ms ease;
  transition: var(--transition-base);
  min-width: 2.5rem;
  min-height: 2.5rem;
  position: relative;
}

.mobile-menu-btn:hover {
  background-color: #6d7a3a;
  transform: scale(1.05);
}

/* Hamburger icon */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1rem;
  height: 0.75rem;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  background-color: white;
  border-radius: 1px;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.hamburger-icon span:nth-child(1),
.hamburger-icon span:nth-child(2),
.hamburger-icon span:nth-child(3) {
  width: 1rem;
}

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-submenu-dropdown {
    width: 12.5rem;
    max-height: 25rem;
    overflow-y: auto;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .company-dropdown,
  .notification-dropdown,
  .profile-dropdown {
    width: 17.5rem;
  }
}

/* Small tablet and large mobile */
@media (max-width: 768px) {
  .dashboard-container {
    position: relative;
  }
  
  .main-content {
    width: 100%;
    margin-left: 0;
  }
  
  .top-bar {
    padding: 0 1rem;
  }
  
  .top-bar-left {
    flex: 1 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: none;
  }
  
  .top-bar-left .search-container {
    flex: 1 1;
    max-width: 17.5rem; /* Limit search width on mobile */
  }
  
  .top-bar-left .search-container .search-input {
    font-size: 1rem; /* Prevent zoom on iOS */
    padding: 0.5rem 0.75rem 0.5rem 2.25rem; /* Adjust padding for mobile */
  }
  
  .search-icon {
    left: 0.75rem; /* Adjust icon position */
  }
  
  .nav-submenu-dropdown {
    position: fixed !important;
    top: 3.75rem !important;
    left: 0 !important;
    right: 0;
    width: 100% !important;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    border-left: none;
    border-right: none;
    border-radius: 0;
    z-index: 1001;
  }
  
  .nav-submenu-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #F0F1F3;
    border-bottom: 1px solid var(--color-gray-100);
  }
  
  .nav-submenu-item:last-child {
    border-bottom: none;
  }
  
  /* Modal responsive */
  .modal-container {
    min-width: calc(100vw - 2.5rem);
    max-width: calc(100vw - 2.5rem);
    margin: 0 1.25rem;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-card {
    padding: 1rem;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .sidebar {
    width: 20rem; /* Much wider on small screens for better usability */
  }
  
  .sidebar--mobile {
    left: -20rem;
    width: 20rem !important;
  }
  
  .top-bar {
    padding: 0 0.75rem;
  }
  
  .top-bar-left .search-container {
    max-width: 11.25rem; /* Even smaller on very small screens */
  }
  
  .top-bar-left {
    margin-right: 0.75rem; /* Add padding between search and building icon */
  }
  
  .top-bar-right {
    gap: 0px;
  }
  
  .icon-button {
    padding: 0;
    width: 2rem;
    height: 2rem;
  }
  
  .mobile-menu-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 2px;
  }
  
  .mobile-menu-btn .hamburger-icon {
    width: 0.875rem;
    height: 0.625rem;
  }
  
  .profile-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
  
  .company-dropdown,
  .notification-dropdown,
  .profile-dropdown {
    position: fixed !important;
    top: 3.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
  }
  
  .dashboard-content {
    padding: 0.75rem;
  }
  
  .content-header {
    margin-bottom: 1rem;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .modal-container {
    min-width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    margin: 0 0.75rem;
    min-height: auto;
  }
  
  .modal-header {
    padding: 1rem;
  }
  
  .modal-content {
    padding: 1rem;
  }
  
  .modal-actions {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .modal-btn {
    width: 100%;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  .nav-link:hover,
  .nav-submenu-item:hover,
  .profile-dropdown-item:hover,
  .notification-item:hover,
  .company-item:hover {
    background-color: transparent;
  }
  
  .nav-link:active,
  .nav-submenu-item:active,
  .profile-dropdown-item:active {
    background-color: var(--color-gray-50);
  }
  
  /* Larger touch targets */
  .nav-link {
    min-height: 3rem;
  }
  
  .nav-submenu-item {
    min-height: 3rem;
  }
  
  .icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Sales > Loyalty Dropdown */
.sales-loyalty-dropdown {
  position: fixed;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0;
  box-shadow: none;
  width: 14.375rem;
  z-index: 2001;
  padding: 0.5rem 0;
}

.sales-loyalty-dropdown .loyalty-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-loyalty-dropdown .loyalty-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-loyalty-dropdown .loyalty-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Sales > Report Dropdown */
.sales-report-dropdown {
  position: fixed;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0;
  box-shadow: none;
  width: 14.375rem;
  z-index: 2001;
  padding: 0.5rem 0;
}

.sales-report-dropdown .report-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  padding-left: 1.625rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: 200ms ease;
  transition: var(--transition-base);
}

.sales-report-dropdown .report-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-report-dropdown .report-title {
  font-size: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Nav submenu item with divider */
.nav-submenu-item--with-divider {
  position: relative;
}

.nav-submenu-item--with-divider::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
}

.nav-submenu-item--with-divider {
  margin-bottom: 1rem; /* Space for the divider line and gap */
}

/* Sort Dropdown Menu - Same style as other dropdowns */
.sort-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
  max-height: 25rem;
  overflow-y: auto;
}

/* Sort Dropdown Scrollbar - Thin scrollbar style */
.sort-dropdown-menu::-webkit-scrollbar {
  width: 0.25rem;
}

.sort-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sort-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.sort-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.sort-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sort-dropdown-item:last-child {
  border-bottom: none;
}

.sort-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sort-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.sort-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.sort-dropdown-order-icon {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group By Dropdown Menu - Same style as other dropdowns */
.groupby-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
  max-height: 25rem;
  overflow-y: auto;
}

/* Group By Dropdown Scrollbar - Thin scrollbar style */
.groupby-dropdown-menu::-webkit-scrollbar {
  width: 0.25rem;
}

.groupby-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.groupby-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.groupby-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.groupby-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.groupby-dropdown-item:last-child {
  border-bottom: none;
}

.groupby-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.groupby-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.groupby-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.groupby-dropdown-check-icon {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Dropdown Modal Overlay - Same style as logout modal */
.dropdown-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* Below sidebar and dropdowns */
  animation: fadeIn 0.3s ease-in-out;
}

.page-content {
  position: relative;
  height: 100%;
  overflow: auto;
}

/* Refresh Loading Overlay */
.refresh-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.refresh-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.refresh-loading-spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid #E5E5E5;
  border-top: 4px solid #408952;
  border-radius: 50%;
  animation: refreshSpin 1s linear infinite;
}

.refresh-loading-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #FFFFFF;
}

@keyframes refreshSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ===== from styles/components/_login.css ===== */
/* ================================
   LOGIN COMPONENT SPECIFIC STYLES
   ================================ */

/* Any component-specific overrides or custom styles go here */
/* Most styles are inherited from the global stylesheets */

.login-container {
  /* Inherits from .auth-container in layout/_auth.css */
}

.login-card {
  /* Inherits from .auth-card in layout/_auth.css */
}

.login-form {
  /* Inherits from .auth-form in layout/_auth.css */
}

/* Custom styles specific to login page */
.password-input {
  padding-right: 2.5rem;
}
/* ===== from styles/components/_signup.css ===== */
/* ================================
   SIGNUP PAGE STYLES
   ================================ */

.form-row {
  display: flex;
  gap: 1rem;
  gap: var(--space-4);
}

.form-row .form-group {
  flex: 1 1;
  margin-top: 0;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-row .form-group {
    flex: none;
  }
}
/* ===== from components/AIChat/AIChat.css ===== */
/* AI Chat Button */
.ai-chat-button {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0070C0 0%, #00B050 100%);
  border: none;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 112, 192, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
  z-index: 9999;
  overflow: visible;
}

/* Remove pseudo-element stars */
.ai-chat-button::before,
.ai-chat-button::after {
  content: none;
}

/* Embedded mode styles */
.ai-chat-button--embedded {
  position: relative;
  bottom: auto;
  right: auto;
  width: auto;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.875rem;
  border-radius: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0, 112, 192, 0.2);
}

/* Collapsed Insights mode */
.ai-chat-button--embedded.ai-chat-button--collapsed {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  justify-content: center;
}

.ai-chat-button--embedded .ai-chat-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ai-chat-button--embedded.ai-chat-button--collapsed .ai-chat-icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* Label for embedded button */
.ai-chat-label {
  font-size: 0.8125rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* Sparkle stars that orbit inside button */
.ai-chat-sparkle {
  position: absolute;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.375rem;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

/* Show sparkles in embedded mode */
.ai-chat-button--embedded .ai-chat-sparkle {
  display: flex;
}

/* Adjust sparkle orbit for collapsed state */
.ai-chat-button--embedded.ai-chat-button--collapsed .ai-chat-sparkle-1 {
  animation: orbit-1-small 6s linear infinite, blink 1.5s ease-in-out infinite;
}

.ai-chat-button--embedded.ai-chat-button--collapsed .ai-chat-sparkle-2 {
  animation: orbit-2-small 6s linear infinite, blink 1.5s ease-in-out infinite 0.5s;
}

.ai-chat-button--embedded.ai-chat-button--collapsed .ai-chat-sparkle-3 {
  animation: orbit-3-small 6s linear infinite, blink 1.5s ease-in-out infinite 1s;
}

.ai-chat-sparkle-1 {
  animation: orbit-1 6s linear infinite, blink 1.5s ease-in-out infinite;
}

.ai-chat-sparkle-2 {
  animation: orbit-2 6s linear infinite, blink 1.5s ease-in-out infinite 0.5s;
}

.ai-chat-sparkle-3 {
  animation: orbit-3 6s linear infinite, blink 1.5s ease-in-out infinite 1s;
}

/* Orbital animations for stars inside button */
@keyframes orbit-1 {
  0% {
    transform: rotate(0deg) translateX(1.125rem) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(1.125rem) rotate(-360deg);
  }
}

/* Define smaller orbit animations for collapsed state */
@keyframes orbit-1-small {
  0% {
    transform: rotate(0deg) translateX(0.9375rem) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(0.9375rem) rotate(-360deg);
  }
}

@keyframes orbit-2-small {
  0% {
    transform: rotate(120deg) translateX(0.9375rem) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(0.9375rem) rotate(-480deg);
  }
}

@keyframes orbit-3-small {
  0% {
    transform: rotate(240deg) translateX(0.9375rem) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(0.9375rem) rotate(-600deg);
  }
}

@keyframes orbit-2 {
  0% {
    transform: rotate(120deg) translateX(1.125rem) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(1.125rem) rotate(-480deg);
  }
}

@keyframes orbit-3 {
  0% {
    transform: rotate(240deg) translateX(1.125rem) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(1.125rem) rotate(-600deg);
  }
}

/* Blinking animation */
@keyframes blink {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sparkle-blink {
  0%, 100% {
    background-size: 0.1875rem 0.1875rem, 2px 2px, 0.1875rem 0.1875rem, 2px 2px, 100% 100%;
  }
  25% {
    background-size: 0.25rem 0.25rem, 2px 2px, 0.1875rem 0.1875rem, 2px 2px, 100% 100%;
  }
  50% {
    background-size: 0.1875rem 0.1875rem, 0.1875rem 0.1875rem, 0.1875rem 0.1875rem, 2px 2px, 100% 100%;
  }
  75% {
    background-size: 0.1875rem 0.1875rem, 2px 2px, 0.25rem 0.25rem, 0.1875rem 0.1875rem, 100% 100%;
  }
}

.ai-chat-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0.375rem 1rem rgba(0, 112, 192, 0.4);
}

.ai-chat-button:active {
  transform: scale(0.98);
}

.ai-chat-button--active {
  background: linear-gradient(135deg, #0070C0 0%, #00B050 100%);
}

.ai-chat-icon {
  width: 1.75rem;
  height: 1.75rem;
  filter: brightness(0) invert(1); /* White icon */
  position: relative;
  z-index: 1;
}

/* Chat Box */
.ai-chat-box {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  width: 23.75rem;
  height: 37.5rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 999;
  animation: slideUp 300ms ease;
}

/* Embedded chat box position - properly floats above page */
.ai-chat-box--embedded {
  position: fixed;
  /* Position the bottom of the chat box at the top of the AI button */
  bottom: 5.5rem; /* Moved 3px higher */
  right: 1.375rem; /* Moved 3px more to the right */
  width: 22.5rem;
  height: 36.25rem; /* Increased height for taller chat box */
  max-height: calc(100vh - 8.75rem); /* Ensure it doesn't go off screen */
  z-index: 2147483647; /* Maximum z-index to ensure it's above everything */
  box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.2); /* Stronger shadow for better visibility */
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Chat Header */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(135deg, #0070C0 0%, #00B050 100%);
  border-radius: 0.375rem 0.375rem 0 0;
}

.ai-chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-chat-avatar-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1);
}

.ai-chat-header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-chat-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  color: var(--color-white);
  margin: 0;
  text-align: left;
}

.ai-chat-status {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.ai-chat-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease;
  border-radius: 0.375rem;
}

.ai-chat-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.ai-chat-close-icon {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) invert(1);
}

/* Chat Body */
.ai-chat-body {
  flex: 1 1;
  background-color: #fff6ec;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 0.375rem 0.375rem;
  overflow: hidden;
}

.ai-chat-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-chat-body::-webkit-scrollbar {
  width: 0.375rem;
}

.ai-chat-body::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.1875rem;
}

/* Chat Messages */
.ai-chat-message {
  display: flex;
  animation: fadeIn 300ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-chat-message--user {
  justify-content: flex-end;
}

.ai-chat-message--ai {
  justify-content: flex-start;
}

.ai-chat-message-bubble {
  max-width: 70%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  position: relative;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
}

.ai-chat-message--user .ai-chat-message-bubble {
  background-color: #E9F5CE;
  color: #343a40;
  color: var(--color-gray-800);
  border-bottom-right-radius: 0.25rem;
}

.ai-chat-message--ai .ai-chat-message-bubble {
  background-color: #ffffff;
  background-color: var(--color-white);
  color: #343a40;
  color: var(--color-gray-800);
  border-bottom-left-radius: 0.25rem;
}

.ai-chat-message-text {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.ai-chat-message-time {
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  display: block;
  text-align: left;
}

/* Typing Indicator */
.ai-chat-typing {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0;
}

.ai-chat-typing span {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #ced4da;
  background-color: var(--color-gray-400);
  border-radius: 50%;
  animation: typing 1.4s ease infinite;
}

.ai-chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-0.625rem);
  }
}

/* Chat Footer */
.ai-chat-footer {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem 1.125rem 0.75rem;
  background-color: transparent;
  border-radius: 0 0 0.375rem 0.375rem;
  gap: 0.5rem;
}

.ai-chat-input {
  flex: 1 1;
  height: 2.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 1.25rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 200ms ease, background-color 200ms ease;
  background-color: #ffffff;
  background-color: var(--color-white);
}

.ai-chat-input:focus {
  border-color: #4269EF;
  background-color: #ffffff;
  background-color: var(--color-white);
}

.ai-chat-send {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0070C0 0%, #00B050 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease, transform 100ms ease;
}

.ai-chat-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #005A9E 0%, #009040 100%);
  transform: scale(1.1);
}

.ai-chat-send:active:not(:disabled) {
  transform: scale(0.95);
}

.ai-chat-send:disabled {
  background-color: #dee2e6;
  background-color: var(--color-gray-300);
  cursor: not-allowed;
}

.ai-chat-send-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

/* Responsive Design */
@media (max-width: 480px) {
  .ai-chat-box {
    width: calc(100vw - 3rem);
    height: calc(100vh - 9.375rem);
    right: 1.5rem;
  }
}

@media (max-width: 380px) {
  .ai-chat-box {
    width: calc(100vw - 2rem);
    right: 1rem;
  }
  
  .ai-chat-button {
    right: 1rem;
    bottom: 1rem;
  }
}
/* ===== from components/Modal/Modal.css ===== */
/* Modal Backdrop */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 200ms ease;
  /* Prevent browser back/forward gesture */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.modal {
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  animation: slideIn 200ms ease;
  max-height: calc(100vh - 3.75rem);
  overflow: hidden;
  /* Prevent browser back/forward gesture */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}

@keyframes slideIn {
  from {
    opacity: 0;
    margin-top: -1.25rem;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

/* Modal Sizes */
.modal--small {
  width: 25rem;
  max-width: calc(100vw - 3.75rem);
}

.modal--medium {
  width: 37.5rem;
  max-width: calc(100vw - 3.75rem);
}

.modal--large {
  width: 56.25rem;
  max-width: calc(100vw - 3.75rem);
}

.modal--fullscreen {
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #E5E5E5;
  flex-shrink: 0;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
}

.modal-title-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e8f5e8;
  border-radius: 0.375rem;
  flex-shrink: 0;
  transition: background-color 200ms ease;
}

.modal-title-icon-wrapper--edit {
  background-color: #e8f5e8;
}

.modal-title-icon-wrapper--external {
  background-color: #FEF3E2;
}

.modal-title-icon {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 200ms ease;
}

.modal-title-icon--edit {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-title-icon.modal-title-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.modal-header-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  line-height: 1.2;
  transition: color 200ms ease;
}

.modal-title--display {
  color: #888888;
}

.modal-description {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: #999999;
  line-height: 1.4;
}

.modal-header-buttons {
  display: flex;
  align-items: center;
  gap: 0;
}

.modal-edit-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 5.3125rem;
  height: 2rem;
}

.modal-edit-button span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-edit-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-edit-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-print-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 5.3125rem;
  height: 2rem;
}

.modal-print-button span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-print-button:hover,
.modal-print-button--active {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-print-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-print-dropdown {
  position: relative;
  display: inline-block;
}

.modal-print-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 10rem;
  margin-top: 2px;
  overflow: hidden;
}

.modal-print-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.modal-print-dropdown-item:hover {
  background-color: #F5F5F5;
}

.modal-print-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.6;
}

.modal-share-dropdown {
  position: relative;
  display: inline-block;
}

.modal-share-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 5.3125rem;
  height: 2rem;
}

.modal-share-button span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-share-button:hover,
.modal-share-button--active {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-share-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 9.375rem;
  margin-top: 2px;
  overflow: hidden;
}

.modal-share-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.modal-share-dropdown-item:hover {
  background-color: #F5F5F5;
}

.modal-share-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.modal-share-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 5.3125rem;
  height: 2rem;
}

.modal-action-btn span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-action-btn:hover:not(.modal-action-btn--disabled),
.modal-action-btn--active {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-action-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.modal-action-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.modal-action-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-action-btn--disabled .modal-action-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.modal-action-dropdown {
  position: relative;
  display: inline-block;
}

.modal-action-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 9.375rem;
  margin-top: 2px;
  overflow: visible;
}

.modal-action-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  position: relative;
}

.modal-action-dropdown-item:hover {
  background-color: #F5F5F5;
}

.modal-action-dropdown-item--has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.modal-action-submenu-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.modal-action-submenu-icon--open {
  transform: rotate(180deg);
}

.modal-action-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  background-color: #F8F8F8;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #555555;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.modal-action-submenu-item:hover {
  background-color: #EFEFEF;
}

.modal-action-stage-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.6;
}

.modal-action-stage-icon--selected {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.modal-action-check-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  margin-left: auto;
}

.modal-action-dropdown-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0.25rem 0;
}

.modal-lock-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 4.6875rem;
  height: 2rem;
}

.modal-lock-button span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-lock-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-lock-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-delete-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  width: 5rem;
  height: 2rem;
}

.modal-delete-button span {
  flex: 1 1;
  text-align: center;
  margin-left: -0.25rem;
}

.modal-delete-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.modal-delete-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-setting-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.modal-setting-button:hover {
  background-color: #F5F5F5;
}

.modal-setting-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.modal-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 0 0.375rem 0.375rem 0;
  cursor: pointer;
  transition: all 200ms ease;
}

.modal-close-button:hover {
  background-color: #F5F5F5;
}

.modal-close-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Reference Modal - Close button with all sides border radius */
.sales-order-reference-modal .modal-close-button {
  border-radius: 0.375rem;
}

/* Modal Body */
.modal-body {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
  min-height: 0;
  /* Prevent browser back/forward gesture */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}

/* Modal Body Scrollbar */
.modal-body::-webkit-scrollbar {
  width: 0.3125rem;
}

.modal-body::-webkit-scrollbar-track {
  background: #F5F5F5;
  border-radius: 0.25rem;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 0.25rem;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Modal Footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.5rem;
  background-color: #FAFAFA;
  border-top: 1px solid #E5E5E5;
  flex-shrink: 0;
}

.modal-footer-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Modal Action Button (ellipsis) */
.modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.modal-action-button:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.modal-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modal-action-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

.modal-action-icon--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Modal Buttons */
.modal-button {
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  width: 7.5rem;
  height: 2rem;
}

.modal-button--display {
  color: #888888;
}

.modal-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modal-button--cancel {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  color: #666666;
}

.modal-button--cancel:hover:not(:disabled) {
  border-color: #C2DE54;
  background-color: #F5F5F5;
  transform: translateY(-1px);
}

.modal-button--save {
  background-color: #C2DE54;
  border: 1px solid #C2DE54;
  color: #333333;
}

.modal-button--save.modal-button--display {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #888888;
}

.modal-button--save:hover:not(:disabled) {
  background-color: #b5d147;
  border-color: #b5d147;
  transform: translateY(-1px);
}

.modal-button--save.modal-button--display:hover:not(:disabled) {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  transform: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal--fullscreen {
    width: calc(100vw - 1.25rem);
    height: calc(100vh - 1.25rem);
  }

  .modal--small,
  .modal--medium,
  .modal--large {
    max-width: calc(100vw - 1.25rem);
  }
}

/* Share Modal */
.modal-share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6.875rem;
  z-index: 100001;
}

.modal-share-modal {
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  min-width: 37.5rem;
  max-width: 37.5rem;
  overflow: hidden;
}

.modal-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.modal-share-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.modal-share-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #999999;
  padding: 0.25rem;
  line-height: 1;
}

.modal-share-modal-close:hover {
  color: #666666;
}

.modal-share-modal-content {
  padding: 1.25rem;
  padding-bottom: 3.75rem;
}

.modal-share-modal-link-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-share-modal-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.modal-share-modal-link-wrapper {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.625rem;
}

.modal-share-modal-link-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  flex-shrink: 0;
}

.modal-share-modal-link-input {
  flex: 1 1;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: #555555;
  outline: none;
  cursor: default;
}

.modal-share-modal-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #E5E5E5;
}

.modal-share-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 1 1;
  padding: 0.5rem 0.875rem;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
}

.modal-share-modal-btn:hover {
  background-color: #F5F5F5;
  border-color: #C2DE54;
  transform: translateY(-1px);
}

.modal-share-modal-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Create Method Modal */
.modal-create-method-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-create-method-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  padding: 0.75rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  transition: all 200ms ease;
}

.modal-create-method-option:hover {
  border-color: #C2DE54;
  background-color: #f9fdf6;
}

.modal-create-method-option input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: #138B4C;
  cursor: pointer;
}

.modal-create-method-option input[type="radio"]:checked + .modal-create-method-radio-label {
  color: #138B4C;
  font-weight: 600;
}

.modal-create-method-radio-label {
  font-size: 0.8125rem;
  color: #333333;
  cursor: pointer;
}

/* Sales Order Reference Modal - Maximize table height */
.sales-order-reference-modal .modal-body {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sales-order-reference-modal .do-modal-tab-content {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sales-order-reference-modal .do-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  padding: 0.625rem 2.5rem 1.5rem 2.5rem !important;
  overflow: hidden;
}

.sales-order-reference-modal .do-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sales-order-reference-modal .do-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: auto;
}

.sales-order-reference-modal .do-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 3.75rem;
}

/* Hide scrollbar when table is empty */
.sales-order-reference-modal .do-modal-detail-table-container:has(.do-modal-table-empty-state) {
  overflow: hidden !important;
}

/* Sales Order Reference Modal - Table styling to match Delivery Order Item table */
.sales-order-reference-modal .do-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sales-order-reference-modal .do-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sales-order-reference-modal .do-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  background-color: #F9F9F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-order-reference-modal .do-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.sales-order-reference-modal .do-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.sales-order-reference-modal .do-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.sales-order-reference-modal .do-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.sales-order-reference-modal .do-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

/* Scrollbar styling - match Delivery Order Item table */
.sales-order-reference-modal .do-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.sales-order-reference-modal .do-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sales-order-reference-modal .do-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sales-order-reference-modal .do-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Sales Order Reference Modal - Checkbox column padding adjustment */
.sales-order-reference-modal .do-modal-detail-table th:first-child {
  padding-left: 0.9375rem;
  padding-right: 0.3125rem;
}

.sales-order-reference-modal .do-modal-detail-table td:first-child {
  padding-left: 0.9375rem;
  padding-right: 0.3125rem;
}

/* Sales Order Reference Modal - Fix dropdown z-index above table */
.sales-order-reference-modal .do-modal-partner-header-section {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}

.sales-order-reference-modal .do-modal-sold-to-party-dropdown-content {
  z-index: 1000;
}

.sales-order-reference-modal .do-modal-item-content-section {
  position: relative;
  z-index: 1;
}

/* Sales Order Reference Modal - Filter row with Search button */
.sales-order-reference-modal .sor-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.sales-order-reference-modal .sor-filter-row .do-modal-form-group {
  flex: 1 1;
  min-width: 0;
}

.sales-order-reference-modal .sor-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: 0;
}

.sales-order-reference-modal .sor-search-button:hover {
  background-color: #0f6e3b;
  border-color: #0f6e3b;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
}

.sales-order-reference-modal .sor-search-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Sales Order Reference Modal - Smooth closing transition */
.sales-order-reference-modal--closing {
  animation: fadeOutBackdrop 500ms ease forwards;
}

.sales-order-reference-modal--closing .modal {
  animation: slideOutModal 500ms ease forwards;
}

@keyframes fadeOutBackdrop {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideOutModal {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* ===== from components/SalesSidebar/SalesSidebar.css ===== */
/* Sales Sidebar Menu Styles */
.sales-sidebar-menu {
  display: flex;
  flex-direction: column;
  background-color: #138B4C;
  background-color: var(--color-sales-green);
  border-radius: 0.375rem;
  padding: 0.75rem 0;
  transition: width 200ms ease;
  width: 100%;
  box-sizing: border-box;
  min-height: 100%;
  position: relative;
}

.sales-sidebar-menu * {
  box-sizing: border-box;
}

/* Collapsed state */
.sales-sidebar-menu--collapsed {
  width: 3.5rem;
  padding: 0.75rem 0; /* Keep same padding as expanded */
}

/* Menu Header */
.sales-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.75rem 1rem;
  margin-bottom: 0.5rem;
  min-height: 2.375rem;  /* Fixed height to prevent shifting */
  height: 2.375rem; /* Fixed height */
  cursor: pointer;
  box-sizing: border-box;
}

.sales-sidebar-menu--collapsed .sales-menu-header {
  padding: 0.5rem 1rem 0.75rem 1rem;  /* Same padding as expanded */
  justify-content: center;
  height: 2.375rem; /* Same fixed height */
  min-height: 2.375rem;
}

.sales-menu-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  color: var(--color-white);
  text-transform: none; /* Changed from uppercase to normal case */
  letter-spacing: 0.5px;
  line-height: 1.25rem; /* Fixed line height */
  transition: opacity 200ms ease, visibility 200ms ease;
  -webkit-user-select: none;
          user-select: none; /* Prevent text selection when clicking */
}

.sales-menu-title--collapsed {
  opacity: 0;
  visibility: hidden;
  width: 0;
}

.sales-menu-bars-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1); /* White color */
  cursor: pointer;
}

.sales-menu-item {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.1875rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  position: relative;
  min-height: 2.5rem; /* Fixed height to maintain consistency */
}

.sales-sidebar-menu--collapsed .sales-menu-item {
  padding: 0.625rem 1rem;
  justify-content: center;
  min-height: 2.5rem; /* Same height as expanded */
}

.sales-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sales-menu-item--active {
  background-color: rgba(255, 255, 255, 0.1); /* Keep same background as hover */
}

.sales-menu-icon {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem; /* Ensure fixed width */
  min-height: 1.125rem; /* Ensure fixed height */
  filter: brightness(0) invert(1); /* Make icons white */
  flex-shrink: 0;
  transition: filter 200ms ease;
}

/* Active icon - yellow color #FFFF54 */
.sales-menu-icon--active {
  filter: brightness(0) saturate(100%) invert(98%) sepia(93%) saturate(7495%) hue-rotate(358deg) brightness(109%) contrast(104%) !important;
}

.sales-menu-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffffff;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease, opacity 200ms ease, visibility 200ms ease;
  line-height: 1.25rem; /* Fixed line height */
  margin-left: 0.75rem; /* Space between icon and label */
}

.sales-menu-label--collapsed {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
  margin: 0; /* Remove margin when collapsed */
}

/* Active label - yellow color matching icon */
.sales-menu-item--active .sales-menu-label {
  color: #FFFF54;
  font-weight: 600;
}

.sales-menu-divider {
  display: block;
  height: 1.0625rem; /* Total height including margins */
  position: relative;
  margin: 0;
  width: 100%;
}

.sales-menu-divider::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 200ms ease;
}

.sales-sidebar-menu--collapsed .sales-menu-divider::after {
  left: 0.5rem;
  right: 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .sales-menu-label {
    font-size: 0.75rem;
  }
  
  /* .sales-menu-item {
    padding: 8px 14px;
  } */
}

@media (max-width: 1200px) {
  .sales-menu-icon {
    width: 1rem;
    height: 1rem;
  }
  
  /* .sales-menu-item {
    padding: 8px 12px;
    gap: 10px;
  } */
}

/* Submenu arrow */
.sales-menu-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  filter: brightness(0) invert(1);
  transition: transform 200ms ease;
}

.sales-menu-item--has-submenu {
  cursor: pointer;
}

/* Submenu styles when sidebar is expanded */
.sales-submenu {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  margin-left: 0;
  margin-right: 0;
}

.sales-submenu .sales-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  padding-left: 2.5rem; /* Indent for submenu items */
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.8125rem;
  position: relative;
  margin: 0;
}

.sales-submenu .sales-submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sales-submenu .sales-submenu-item--active {
  background-color: rgba(255, 255, 255, 0.1);
}

.sales-submenu .sales-submenu-icon {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: all 200ms ease;
}

.sales-submenu .sales-submenu-item:hover .sales-submenu-icon {
  opacity: 0.9;
}

/* Active submenu item - yellow color #FFFF54 for icon when sidebar expanded */
.sales-submenu .sales-submenu-item--active .sales-submenu-icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(98%) sepia(93%) saturate(7495%) hue-rotate(358deg) brightness(109%) contrast(104%) !important;
}

.sales-submenu .sales-submenu-label {
  display: block;
  text-align: left;
  flex: 1 1;
  transition: all 200ms ease;
  color: rgba(255, 255, 255, 0.8);
}

/* Active submenu label - yellow color and bold for expanded state */
.sales-submenu .sales-submenu-item--active .sales-submenu-label {
  color: #FFFF54;
  font-weight: 600;
}

/* Submenu styles when sidebar is collapsed - appears to the right */
.sales-submenu-collapsed {
  display: block;
  position: absolute;
  left: 4rem; /* Position to the right of collapsed sidebar */
  top: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  padding: 0; /* Remove all padding */
  min-width: 12.5rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* Title in collapsed submenu dropdown */
.sales-submenu-collapsed-title {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #000000;
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 0.25rem;
  text-align: left;
  background-color: var(--color-gray-50);
}

.sales-submenu-collapsed .sales-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  justify-content: flex-start;
  border-radius: 0;
  margin: 0;
  transition: background-color 200ms ease;
}

.sales-submenu-collapsed .sales-submenu-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-submenu-collapsed .sales-submenu-item--active {
  background-color: #f0f8e8;
}

.sales-submenu-collapsed .sales-submenu-label {
  color: #495057;
  color: var(--color-gray-700); /* Default gray text */
  font-weight: 400;
}

.sales-submenu-collapsed .sales-submenu-item--active .sales-submenu-label {
  color: #000000; /* Black text when active */
  font-weight: 600; /* Bold */
}

.sales-submenu-collapsed .sales-submenu-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  filter: opacity(0.6); /* Match notification icon opacity */
  transition: 200ms ease;
  transition: var(--transition-base);
}

/* Remove hover effect for icons - only background changes */
/* .sales-submenu-collapsed .sales-submenu-item:hover .sales-submenu-icon {
  filter: opacity(0.9);
} */

.sales-submenu-collapsed .sales-submenu-item--active .sales-submenu-icon {
  /* Apply green color #3B804C to active icons */
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}


.sales-sidebar-menu--collapsed .sales-submenu {
  display: none;
}

/* Wrapper for menu item and its submenu */
.sales-menu-item-wrapper {
  position: relative;
}

.sales-sidebar-menu--collapsed .sales-menu-item-wrapper {
  position: relative;
}
/* ===== from components/Table/Table.css ===== */
/* Table Container */
.table-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none; /* Remove bottom border */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Table Wrapper */
.table-wrapper {
  width: 100%;
  flex: 1 1;
  overflow: auto;
  position: relative;
  min-height: 0;
  overscroll-behavior-x: contain; /* Prevent scroll chaining and navigation */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Disable transitions during scroll for better performance */
.table-wrapper.is-scrolling .table-row,
.table-wrapper.is-scrolling .table-cell,
.table-wrapper.is-scrolling .table-action,
.table-wrapper.is-scrolling .table-action-menu-button,
.table-wrapper.is-scrolling .table-checkbox {
  transition: none !important;
}

/* During scroll, keep all hover styles exactly as they are - no overrides */

/* Table */
.table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* Performance optimizations */
  contain: layout style;
}

/* Table Header */
.table-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
  /* Use border instead of box-shadow for better scroll performance */
  border-bottom: 1px solid #E5E5E5;
}

/* Table Header Icon */
.table-header-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green color */
  display: block;
  margin: 0 auto;
}

.table-header-row {
  height: 2.5rem;
}

.table-header-cell {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
  /* Performance optimizations */
  contain: layout style;
}

/* Sortable header cells */
.table-header-cell.table-header-sortable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.table-header-cell.table-header-sortable:hover {
  background-color: #EAEAEA !important;
}

.table-header-cell.table-header-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Frozen cells - checkbox and first column */
.table-frozen-cell {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9;
}

.table-header-cell.table-frozen-cell {
  z-index: 11;
  background-color: #F9F9F9 !important;
  border-bottom: 1px solid #E5E5E5;
}

.table-checkbox-cell {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  left: 0;
  background-color: #F9F9F9;
}

.table-first-column {
  left: 2.5rem; /* Position after checkbox */
  border-right: 1px solid #E5E5E5;
  z-index: 6;
  background-color: #F9F9F9;
  min-width: 25rem;
}

.table-header-cell.table-first-column {
  background-color: #F9F9F9;
  /* Use border instead of box-shadow for better scroll performance */
  border-right: 1px solid #E5E5E5;
  z-index: 12; /* Higher than regular frozen header cells */
}

/* When no checkbox */
.table-header-row:not(:has(.table-checkbox-cell)) .table-first-column,
.table-row:not(:has(.table-checkbox-cell)) .table-first-column {
  left: 0;
}

.table-header-content {
  display: flex;
  align-items: center;
}

/* Column Resize Handle */
.table-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3125rem;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 20;
}

.table-column-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.table-column-resize-handle:hover::after {
  background-color: #408952;
}

.table-column-resize-handle--active::after {
  background-color: #408952;
}

/* When resizing, disable pointer events on sortable header content */
.table-header-cell.table-header-resizing {
  pointer-events: none;
}

.table-header-cell.table-header-resizing .table-column-resize-handle {
  pointer-events: auto;
}

.table-header-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Table Body */
.table-body {
  background-color: #FFFFFF;
  /* Performance optimizations */
  contain: layout style;
}

.table-row {
  border-bottom: 1px solid #F5F5F5;
  height: 2.75rem;
}

.table-row:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.table-row:hover {
  background-color: #F5F5F5;
  transition: none;
}

.table-row:hover .table-cell {
  background-color: #F5F5F5;
  transition: none;
}

.table-row:hover .table-frozen-cell {
  background-color: #F0F0F0 !important;
  transition: none;
}

.table-row:hover .table-checkbox-cell {
  background-color: #F0F0F0 !important;
  transition: none;
}

.table-row:hover .table-first-column {
  background-color: #F0F0F0 !important;
  transition: none;
}

.table-row--clickable {
  cursor: pointer;
}

.table-cell--clickable {
  cursor: pointer;
}

.table-row--selected {
  background-color: #F4FAF3;
}

.table-row--selected .table-frozen-cell {
  background-color: #F4FAF3 !important;
}

.table-row--selected .table-checkbox-cell {
  background-color: #EDF5EC !important; /* Slightly darker for selected checkbox */
}

.table-row--selected .table-first-column {
  background-color: #EDF5EC !important; /* Slightly darker for selected */
}

.table-row--selected:hover,
.table-row--selected:hover .table-frozen-cell {
  background-color: #F2F8F1 !important;
}

.table-row--selected:hover .table-checkbox-cell {
  background-color: #EDF5EC !important;
}

.table-row--selected:hover .table-first-column {
  background-color: #EDF5EC !important;
}

/* Disabled row styles for Deleted and Cancelled status */
.table-row--disabled {
  background-color: #FAFAFA !important;
  position: relative;
}

.table-row--disabled .table-cell {
  color: #888888 !important;
  background-color: #FAFAFA !important;
}

/* No transparency - use solid colors */
.table-row--disabled .table-cell:last-child {
  background-color: #FAFAFA !important;
}

.table-row--disabled .table-frozen-cell {
  background-color: #FAFAFA !important;
  opacity: 1 !important;
}

.table-row--disabled .table-checkbox-cell {
  background-color: #EBEBEB !important;
  opacity: 1 !important;
}

.table-row--disabled .table-first-column {
  background-color: #EBEBEB !important;
  opacity: 1 !important;
}

.table-row--disabled:hover,
.table-row--disabled:hover .table-frozen-cell {
  background-color: #F0F0F0 !important;
  opacity: 1 !important;
}

.table-row--disabled:hover .table-cell {
  background-color: #F0F0F0 !important;
  opacity: 1 !important;
}

.table-row--disabled:hover .table-checkbox-cell {
  background-color: #E5E5E5 !important;
  opacity: 1 !important;
}

.table-row--disabled:hover .table-first-column {
  background-color: #E5E5E5 !important;
  opacity: 1 !important;
}

/* Override selected styles for disabled rows */
.table-row--disabled.table-row--selected,
.table-row--disabled.table-row--selected .table-frozen-cell,
.table-row--disabled.table-row--selected .table-checkbox-cell,
.table-row--disabled.table-row--selected .table-first-column {
  background-color: #E8E8E8 !important;
}

/* Preserve badge visibility in disabled rows */
.table-row--disabled .table-status,
.table-row--disabled .table-stage {
  opacity: 1 !important;
  filter: none !important;
}

/* Ensure status badges have proper contrast in disabled rows */
.table-row--disabled .table-status--active {
  background-color: #C8E6C9 !important;
  color: #1B5E20 !important;
}

.table-row--disabled .table-status--completed {
  background-color: #BBDEFB !important;
  color: #0D47A1 !important;
}


.table-row--disabled .table-status--cancelled {
  background-color: #E0E0E0 !important;
  color: #616161 !important;
}

.table-row--disabled .table-status--deleted {
  background-color: #E0E0E0 !important;
  color: #616161 !important;
}

.table-row--disabled .table-status--locked {
  background-color: #FFE0B2 !important;
  color: #BF360C !important;
}

/* Ensure stage badges have proper contrast in disabled rows */
.table-row--disabled .table-stage {
  opacity: 1 !important;
  background-color: #E0E0E0 !important;
  color: #616161 !important;
  border: none !important;
  font-weight: 600 !important;
}

/* Fix dropdown visibility in disabled rows */
.table-row--disabled .table-action-menu-wrapper {
  opacity: 1 !important;
  z-index: auto !important;
}

/* Ensure action menu button is fully visible in disabled rows */
.table-row--disabled .table-action-menu-button {
  opacity: 1 !important;
}

.table-cell {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.75rem;
  background-color: inherit;
  text-align: left;
  overflow: visible; /* Allow content to be visible */
}

/* Re-assert frozen cell background after .table-cell inherit */
.table-cell.table-frozen-cell,
.table-cell.table-checkbox-cell,
.table-cell.table-first-column {
  background-color: #F9F9F9;
}

/* Single line with ellipsis */
.table-cell-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.table-cell-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkbox - Match login page style */
.table-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C; /* Primary green color */
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.table-checkbox:hover {
  border-color: #138B4C;
}

.table-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.table-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.table-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Empty State */
.table-empty-cell {
  padding: 3rem 1rem;
  text-align: center;
  color: #999999;
  font-size: 0.875rem;
}

/* Loading State */
.table-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
}

.table-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #F5F5F5;
  border-top-color: #138B4C;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Status Badges */
.table-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 624.9375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Tinted (mid-saturation) status badges — lighter than solid, darker text for contrast. */
.table-status--active,
.table-status--won,
.table-status--signed,
.table-status--appointed,
.table-status--awarded {
  background-color: #D1FAE5;
  color: #065F46;
}

.table-status--completed,
.table-status--confirmed,
.table-status--received {
  background-color: #DBEAFE;
  color: #1E40AF;
}

.table-status--open {
  background-color: #DBEAFE;
  color: #1E3A8A;
}

.table-status--in-progress,
.table-status--outstanding-delivery {
  background-color: #FED7AA;
  color: #9A3412;
}

.table-status--locked {
  background-color: #FED7AA;
  color: #7C2D12;
}

.table-status--draft {
  background-color: #E5E7EB;
  color: #374151;
}

.table-status--cancelled,
.table-status--deleted,
.table-status--closed {
  background-color: #E5E7EB;
  color: #1F2937;
}

/* Stage Badges */
.table-stage {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 624.9375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Stage colors - custom pastel colors */
.table-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
  font-weight: 600;
}

.table-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
  font-weight: 600;
}

.table-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
  font-weight: 600;
}

.table-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
  font-weight: 600;
}

.table-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
  font-weight: 600;
}

.table-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
  font-weight: 600;
}

.table-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
  font-weight: 600;
}

.table-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
  font-weight: 600;
}

.table-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
  font-weight: 600;
}

.table-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
  font-weight: 600;
}

.table-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
  font-weight: 600;
}

.table-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
  font-weight: 600;
}

.table-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

.table-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
  font-weight: 600;
}

/* === Additional stage styles for Sales modules === */

/* Pre-Sales stages */
.table-stage--drafted {
  background-color: #F3E5CA;
  color: #8B6F47;
  font-weight: 600;
}

.table-stage--submitted {
  background-color: #CBB99E;
  color: #6B5D4F;
  font-weight: 600;
}

.table-stage--under-review {
  background-color: #A7DAE5;
  color: #2C5F6F;
  font-weight: 600;
}

.table-stage--accepted {
  background-color: #8FBF9C;
  color: #2B5C36;
  font-weight: 600;
}

.table-stage--rejected {
  background-color: #F3AEAB;
  color: #8B4A47;
  font-weight: 600;
}

.table-stage--negotiation {
  background-color: #FEC560;
  color: #8B6914;
  font-weight: 600;
}

.table-stage--won {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

.table-stage--lost {
  background-color: #E0E0E0;
  color: #616161;
  font-weight: 600;
}

/* General stages used across modules */
.table-stage--open {
  background-color: #E3F2FD;
  color: #1565C0;
  font-weight: 600;
}

.table-stage--in-progress {
  background-color: #7B98ED;
  color: #2D4A8F;
  font-weight: 600;
}

.table-stage--closed {
  background-color: #648455;
  color: #FFFFFF;
  font-weight: 600;
}

.table-stage--cancelled {
  background-color: #E0E0E0;
  color: #616161;
  font-weight: 600;
}

.table-stage--completed {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

/* After Sales / Service stages */
.table-stage--new {
  background-color: #E3F2FD;
  color: #1565C0;
  font-weight: 600;
}

.table-stage--escalated {
  background-color: #FFCDD2;
  color: #C62828;
  font-weight: 600;
}

.table-stage--pending-customer {
  background-color: #FFF3E0;
  color: #E65100;
  font-weight: 600;
}

.table-stage--resolved {
  background-color: #8FBF9C;
  color: #2B5C36;
  font-weight: 600;
}

.table-stage--released {
  background-color: #65D0EB;
  color: #1B5E71;
  font-weight: 600;
}

.table-stage--technically-complete {
  background-color: #B4A5DD;
  color: #5D4E8C;
  font-weight: 600;
}

.table-stage--dispatched {
  background-color: #7CBBEC;
  color: #265A73;
  font-weight: 600;
}

.table-stage--en-route {
  background-color: #FFC6E2;
  color: #A1537A;
  font-weight: 600;
}

.table-stage--on-site {
  background-color: #FEC560;
  color: #8B6914;
  font-weight: 600;
}

.table-stage--posted {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

.table-stage--reversed {
  background-color: #FFCDD2;
  color: #C62828;
  font-weight: 600;
}

/* Billing / Collection stages */
.table-stage--draft {
  background-color: #F3E5CA;
  color: #8B6F47;
  font-weight: 600;
}

.table-stage--sent {
  background-color: #A7DAE5;
  color: #2C5F6F;
  font-weight: 600;
}

.table-stage--partially-paid {
  background-color: #FEC560;
  color: #8B6914;
  font-weight: 600;
}

.table-stage--paid {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

.table-stage--overdue {
  background-color: #FFCDD2;
  color: #C62828;
  font-weight: 600;
}

.table-stage--void {
  background-color: #E0E0E0;
  color: #616161;
  font-weight: 600;
}

/* Contract / Recurring stages */
.table-stage--active {
  background-color: #E8F5E9;
  color: #2E7D32;
  font-weight: 600;
}

.table-stage--expired {
  background-color: #E0E0E0;
  color: #616161;
  font-weight: 600;
}

.table-stage--renewed {
  background-color: #E3F2FD;
  color: #1565C0;
  font-weight: 600;
}

.table-stage--terminated {
  background-color: #424242;
  color: #FFFFFF;
  font-weight: 600;
}

.table-stage--suspended {
  background-color: #FFF3E0;
  color: #E65100;
  font-weight: 600;
}

.table-stage--paused {
  background-color: #FFF3E0;
  color: #E65100;
  font-weight: 600;
}

.table-stage--pending-activation {
  background-color: #E3F2FD;
  color: #1565C0;
  font-weight: 600;
}

/* Activity / Task / Visit stages */
.table-stage--logged {
  background-color: #CBB99E;
  color: #6B5D4F;
  font-weight: 600;
}

.table-stage--to-do {
  background-color: #F3E5CA;
  color: #8B6F47;
  font-weight: 600;
}

.table-stage--on-hold {
  background-color: #FFF3E0;
  color: #E65100;
  font-weight: 600;
}

.table-stage--checked-in {
  background-color: #65D0EB;
  color: #1B5E71;
  font-weight: 600;
}

.table-stage--checked-out {
  background-color: #B4A5DD;
  color: #5D4E8C;
  font-weight: 600;
}

.table-stage--no-show {
  background-color: #FFCDD2;
  color: #C62828;
  font-weight: 600;
}

/* Settlement / Collection stages */
.table-stage--calculated {
  background-color: #A7DAE5;
  color: #2C5F6F;
  font-weight: 600;
}

.table-stage--settled {
  background-color: #80B464;
  color: #2B5C1F;
  font-weight: 600;
}

.table-stage--cleared {
  background-color: #8FBF9C;
  color: #2B5C36;
  font-weight: 600;
}

.table-stage--bounced {
  background-color: #FFCDD2;
  color: #C62828;
  font-weight: 600;
}

.table-stage--reconciled {
  background-color: #648455;
  color: #FFFFFF;
  font-weight: 600;
}

.table-stage--pending {
  background-color: #FFF3E0;
  color: #E65100;
  font-weight: 600;
}

/* Tags Container */
.table-tags-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
  overflow: hidden;
}

/* Tag Badge */
.table-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: #C2DE54;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #2C4A00;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* More Tags Badge */
.table-tag--more {
  background-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

/* Disabled row tags */
.table-row--disabled .table-tag {
  background-color: #F0F0F0 !important;
  color: #999999 !important;
}

/* Scrollbar Styling - Thin scrollbar style */
.table-wrapper::-webkit-scrollbar {
  height: 0.25rem;
  width: 0.25rem;
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.table-wrapper::-webkit-scrollbar-corner {
  background: transparent;
}

/* Specific column styling for DO Number */
.table-cell[data-key="doNumber"] {
  color: #138B4C; /* Green color */
  font-weight: 700; /* Bold */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* System font like in popup */
  font-size: 0.75rem; /* Slightly smaller than default 13px */
  padding-right: 0.75rem; /* Reduced padding-right */
}

/* Specific column styling for Sales Order No. (same as DO Number) */
.table-cell[data-key="salesOrderNo"] {
  color: #138B4C; /* Green color */
  font-weight: 700; /* Bold */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* System font like in popup */
  font-size: 0.75rem; /* Slightly smaller than default 13px */
  padding-right: 0.75rem; /* Reduced padding-right */
}

/* Primary No. column text styling (frozen + clickable columns) */
.table-do-text {
  font-weight: 700; /* Bold */
  color: #138B4C; /* Green */
  white-space: nowrap; /* Keep text on one line */
  flex: 1 1; /* Take available space */
  min-width: 0; /* Allow text to fit properly */
}

/* Remaining Qty. column styling with red background */
.table-cell[data-key="remainingQty"] {
  background-color: #FFEBEE !important; /* Light red background */
  color: #D32F2F; /* Red text */
  font-weight: 600;
  text-align: right;
}

.table-cell[data-key="remainingQty"] .table-cell-content {
  text-align: right;
  display: block;
}

/* Sold to and Deliver to text styling */
.table-sold-to-text,
.table-deliver-to-text {
  font-weight: 400; /* Normal weight */
  transition: font-weight 200ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0; /* Allow text to shrink */
}

.table-sold-to-party:hover .table-sold-to-text,
.table-deliver-to-party:hover .table-deliver-to-text {
  font-weight: 600; /* Semi-bold on hover */
}

/* Columns with info icon */
.table-do-number,
.table-sold-to-party,
.table-deliver-to-party {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem; /* Space between text and icon */
}

.table-do-info-icon,
.table-sold-to-info-icon,
.table-deliver-to-info-icon {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green color */
  transition: filter 200ms ease;
  flex-shrink: 0; /* Prevent icon from shrinking */
  margin-left: auto; /* Push to the right */
}

/* Action column styling */
.table-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  border: 1px solid #4CAF50;
  color: #2E7D32;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 200ms ease;
}

.table-action:hover {
  background-color: #E8F5E9;
  border-color: #2E7D32;
  color: #1B5E20;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
}

.table-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green color */
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.table-action:hover .table-action-icon {
  transform: scale(1.1);
}

.table-action-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action Menu column styling */
.table-action-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  padding: 0;
}

.table-action-menu-button:hover {
  background-color: #F1F8E9; /* Light green background */
  border-color: #C2DE54; /* Lime green border */
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.12);
}

.table-action-menu-button:active {
  background-color: #E8F5E9;
  border-color: #AED243; /* Darker lime green */
}

.table-action-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green color */
}

.table-action-menu-button:hover .table-action-menu-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(70%) saturate(1200%) hue-rotate(85deg) brightness(90%) contrast(95%); /* Darker green color on hover */
}

/* Action Menu Wrapper */
.table-action-menu-wrapper {
  position: static !important; /* Don't create stacking context */
  display: inline-block;
}

/* Override overflow for action menu cells */
.table-cell[data-key="actionMenu"] {
  overflow: visible !important;
  position: static !important; /* Don't create stacking context */
  z-index: auto !important;
}

.table-cell[data-key="actionMenu"] .table-cell-content {
  overflow: visible !important;
}

/* Ensure last cell can show dropdown */
.table-cell:last-child {
  overflow: visible !important;
  position: static !important; /* Don't create stacking context */
  z-index: auto !important;
}

/* Remove z-index from rows to prevent stacking context issues */
.table-row {
  position: relative;
  z-index: auto;
}

/* Action Dropdown Menu - Styled like Layout button dropdown */
.table-action-dropdown-menu {
  position: fixed !important; /* Use fixed positioning to escape overflow */
  width: 11.25rem;
  background-color: #ffffff;
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200, #E5E5E5);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 2147483647 !important; /* Maximum z-index value */
  overflow: hidden;
  padding: 0;
  pointer-events: auto !important;
}

/* Position dropdown above button for last rows */
.table-action-dropdown-menu--top {
  top: auto;
  bottom: calc(100% + 2px);
}

.table-action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  transition: all 200ms ease;
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700, #666666);
  border-bottom: 1px solid #f5f5f5;
  background-color: #FFFFFF;
}

.table-action-dropdown-item:last-child {
  border-bottom: none;
}

.table-action-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900, #333333);
}

.table-action-dropdown-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  flex-shrink: 0;
}

.table-action-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Delete item special styling */
.table-action-dropdown-item--delete {
  color: #d32f2f;
}

.table-action-dropdown-item--delete:hover {
  background-color: #ffebee;
  color: #b71c1c;
}

.table-action-dropdown-item--delete .table-action-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(21%) sepia(86%) saturate(3498%) hue-rotate(342deg) brightness(89%) contrast(97%);
}

/* Print accordion submenu styles */
.table-action-print-wrapper {
  display: flex;
  flex-direction: column;
}

.table-action-dropdown-item--has-submenu {
  position: relative;
}

.table-action-dropdown-item--expanded {
  background-color: #f5f5f5;
}

.table-action-dropdown-arrow {
  width: 0.625rem;
  height: 0.625rem;
  margin-left: auto;
  opacity: 0.6;
  transition: transform 200ms ease;
}

.table-action-dropdown-arrow--expanded {
  transform: rotate(90deg);
}

.table-action-print-subitems {
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease-out;
  background-color: #fafafa;
}

.table-action-print-subitems--open {
  max-height: 15.625rem;
}

.table-action-print-subitem {
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700, #374151);
  cursor: pointer;
  transition: background-color 200ms ease;
  border-bottom: 1px solid #f0f0f0;
}

.table-action-print-subitem:last-child {
  border-bottom: none;
}

.table-action-print-subitem:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900, #111827);
}

/* Additional Modal Styles for Lock functionality */
/* Using the global modal styles from _dashboard.css */
/* Only add specific styles for lock modal that differ from logout modal */

.modal-message-code {
  font-size: 0.75rem;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-message-label {
  color: #000000;
  font-weight: 700;
}

.modal-message-number-badge {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background-color: #E8F5E9;
  color: #408952;
  border: 1px solid #A5D6A7;
  white-space: nowrap;
}

.modal-document-info {
  display: block;
  margin: 0 0 0.5rem 0;
  color: #111827;
  font-size: 0.875rem;
}

.modal-warning {
  font-size: 0.875rem;
  color: #DC2626;
  background-color: #FEF2F2;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  margin: 1rem 0 0 0;
  line-height: 1.5;
}

/* Lock and Delete buttons use the same confirm button style (lime green) as logout modal */
/* The modal-btn-confirm class from global CSS will apply the lime green color automatically */

/* Modal title icon */
.modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-title-icon {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Green color */
}

/* DO Popup Scrollbar Styling - Match table scrollbar */
.table-do-info-dropdown::-webkit-scrollbar {
  width: 0.1875rem !important;
}

.table-do-info-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5 !important;
  border-radius: 0.25rem !important;
}

.table-do-info-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 0.25rem !important;
}

.table-do-info-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.do-popup-content-scrollable::-webkit-scrollbar {
  width: 0.1875rem !important;
}

.do-popup-content-scrollable::-webkit-scrollbar-track {
  background: #F5F5F5 !important;
  border-radius: 0.25rem !important;
}

.do-popup-content-scrollable::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 0.25rem !important;
}

.do-popup-content-scrollable::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* SO Popup Scrollbar Styling - Match DO popup scrollbar */
.table-so-info-dropdown::-webkit-scrollbar {
  width: 0.1875rem !important;
}

.table-so-info-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5 !important;
  border-radius: 0.25rem !important;
}

.table-so-info-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 0.25rem !important;
}

.table-so-info-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Product ID Popup Scrollbar Styling - Match SO popup scrollbar */
.table-product-info-dropdown::-webkit-scrollbar {
  width: 0.1875rem !important;
}

.table-product-info-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5 !important;
  border-radius: 0.25rem !important;
}

.table-product-info-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 0.25rem !important;
}

.table-product-info-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .table-header-cell,
  .table-cell {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .table-header-row,
  .table-row,
  .table-cell {
    height: 2rem;
  }
}
/* ===== from components/ThirdNavContent/ThirdNavContent.css ===== */
.third-nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.third-nav-content-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.third-nav-icon-box {
  width: 2.25rem;
  height: 2.25rem;
  background-color: #e8f5e8;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.third-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.third-nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: #138B4C;
  color: var(--color-sales-green);
}

.breadcrumb-link {
  color: #138B4C;
  color: var(--color-sales-green);
  cursor: pointer;
  transition: font-weight 200ms ease;
}

.breadcrumb-link:hover {
  font-weight: 700;
}

.breadcrumb-separator {
  color: #138B4C;
  color: var(--color-sales-green);
  font-size: 0.8125rem;
  opacity: 0.5;
  -webkit-user-select: none;
          user-select: none;
}

.third-nav-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0;
  text-align: left;
}

.third-nav-content-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Dropdown controls styling */
.third-nav-dropdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  min-width: 11.25rem;
}

.third-nav-dropdown:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.third-nav-dropdown-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.third-nav-dropdown-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.third-nav-dropdown-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.third-nav-dropdown-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}
/* ===== from components/Toast/Toast.css ===== */
.toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #F4FAF3;
  border: 1px solid #E5E5E5;
  border-radius: 0.5rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  padding: 1rem 1.25rem;
  min-width: 25rem;
  max-width: 31.25rem;
  z-index: 9999999;
  animation: slideInDown 0.3s ease;
}

.toast--success {
  background-color: #F4FAF3;
}

.toast--error {
  background-color: #f8d7da;
}

.toast--info {
  background-color: #d1ecf1;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.toast-icon--success {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.toast-icon--error {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.toast-icon--info {
  filter: brightness(0) saturate(100%) invert(44%) sepia(69%) saturate(402%) hue-rotate(168deg) brightness(95%) contrast(91%);
}

.toast-icon--custom {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.toast-message {
  flex: 1 1;
  font-size: 0.875rem;
  color: #666666;
  font-weight: 500;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.toast-close-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}

.toast-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
}

.toast-close:hover .toast-close-icon {
  opacity: 1;
  transform: scale(1.1);
}

@keyframes slideInDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}
/* ===== shared print + do-setting classes (deduplicated from ~22 Sales modal CSS files; canonical print-* from SalesOrderModal.css, do-setting-* from SalesVisitModal.css) ===== */
.print-template-content::-webkit-scrollbar {
  width: 0.25rem !important;
  height: 0.25rem !important;
}
.print-template-content::-webkit-scrollbar-track {
  background: transparent !important;
}
.print-template-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}
.print-template-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}
.print-template-content {
  flex: 1 1;
  overflow: auto;
  padding: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8e8e8;
  border-radius: 0 0 0.375rem 0.375rem;
}
.print-info-group {
  flex: 1 1;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.print-info-group label {
  font-size: 0.5625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.print-info-group label::after {
  content: ':';
}
.print-info-group span {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
}
.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.5625rem;
}
.print-table th,
.print-table td {
  padding: 0.3125rem 0.5rem;
  text-align: left;
  border: 1px solid #d0d0d0;
}
.print-table th {
  background-color: #f0f0f0;
  font-weight: 600;
  color: #333333;
  text-transform: uppercase;
  font-size: 0.5rem;
  letter-spacing: 0.3px;
}
.print-table td {
  color: #444444;
  font-size: 0.5625rem;
}
.print-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.print-table {
  flex: 1 1;
}
.print-template-content {
    padding: 0;
    overflow: visible;
    background-color: white;
    border-radius: 0;
  }
.print-table {
    page-break-inside: auto;
  }
.print-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
.print-table thead {
    display: table-header-group;
  }
.secured-qty-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.secured-qty-info-table thead tr {
  background-color: #FAFAFA;
}
.secured-qty-info-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  border-bottom: 1px solid #E0E0E0;
}
.secured-qty-info-table td {
  padding: 0.5rem 0.625rem;
  color: #333333;
  border-bottom: 1px solid #F0F0F0;
}
.secured-qty-info-table tbody tr:hover {
  background-color: #FAFAFA;
}
.secured-qty-info-table tbody tr:last-child td {
  border-bottom: none;
}

.do-setting-add-item-section {
  flex-shrink: 0;
  padding-top: 0.75rem;
  background-color: #FFFFFF;
}
.do-setting-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
}
.do-setting-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.do-setting-checkbox-mark {
  width: 1rem;
  height: 1rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.do-setting-checkbox input:checked + .do-setting-checkbox-mark {
  background-color: #138B4C;
  border-color: #138B4C;
}
.do-setting-checkbox input:checked + .do-setting-checkbox-mark::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
}
.do-setting-checkbox-mark--disabled {
  background-color: #FFFFFF;
  border-color: #D0D0D0;
  cursor: default;
}
.do-setting-checkbox input:checked + .do-setting-checkbox-mark--disabled {
  background-color: #138B4C;
  border-color: #138B4C;
}
.do-setting-output-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}
.do-setting-output-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}
.do-setting-output-dropdown--disabled .do-setting-output-trigger {
  cursor: default;
}
.do-setting-output-text {
  font-size: 0.8125rem;
  color: #333333;
}
.do-setting-output-text--placeholder {
  color: #999999;
  font-style: italic;
}
.do-setting-output-dropdown--disabled .do-setting-output-text {
  color: #333333;
}
.do-setting-output-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}
.do-setting-output-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}
.do-setting-output-dropdown--disabled .do-setting-output-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-setting-output-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}
.do-setting-output-menu::-webkit-scrollbar {
  width: 1px;
}
.do-setting-output-menu::-webkit-scrollbar-track {
  background: transparent;
}
.do-setting-output-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}
.do-setting-output-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.do-setting-output-menu--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}
.do-setting-output-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}
.do-setting-output-option:hover {
  background-color: #F5F5F5;
}
.do-setting-output-option--selected {
  background-color: #E8F5E9;
}
.do-setting-output-option--selected:hover {
  background-color: #D5EDD8;
}
.do-setting-output-option--placeholder {
  color: #999999;
  font-style: italic;
}
.do-setting-output-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FCFCFC;
}
.do-setting-output-option--disabled:hover {
  background-color: #FCFCFC;
}
.do-setting-output-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-setting-add-item-section {
  margin-top: 0.75rem;
}
.do-setting-transfer-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}
.do-setting-transfer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}
.do-setting-transfer-dropdown--disabled .do-setting-transfer-trigger {
  cursor: default;
}
.do-setting-transfer-text {
  font-size: 0.8125rem;
  color: #333333;
}
.do-setting-transfer-text--placeholder {
  color: #999999;
  font-style: italic;
}
.do-setting-transfer-dropdown--disabled .do-setting-transfer-text {
  color: #333333;
}
.do-setting-transfer-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}
.do-setting-transfer-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}
.do-setting-transfer-dropdown--disabled .do-setting-transfer-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-setting-transfer-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}
.do-setting-transfer-menu::-webkit-scrollbar {
  width: 1px;
}
.do-setting-transfer-menu::-webkit-scrollbar-track {
  background: transparent;
}
.do-setting-transfer-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}
.do-setting-transfer-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.do-setting-transfer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}
.do-setting-transfer-option:hover {
  background-color: #F5F5F5;
}
.do-setting-transfer-option--selected {
  background-color: #E8F5E9;
}
.do-setting-transfer-option--selected:hover {
  background-color: #D5EDD8;
}
.do-setting-transfer-option--placeholder {
  color: #999999;
  font-style: italic;
}
.do-setting-transfer-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FCFCFC;
}
.do-setting-transfer-option--disabled:hover {
  background-color: #FCFCFC;
}
.do-setting-transfer-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-setting-transfer-code-cell {
  background-color: #F9F9F9;
  color: #666666;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
}
.do-setting-transfer-readonly-cell {
  background-color: #FFFFFF !important;
  color: #666666;
  font-size: 0.8125rem;
}
.do-setting-transfer-code-cell,
.sv-modal-setting-table--display .do-setting-transfer-readonly-cell {
  color: #666666;
}
.do-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}
.do-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}
.do-setting-output-menu--display .do-setting-output-option,
.do-setting-output-menu--display .do-setting-output-option--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.do-setting-output-menu--display .do-setting-output-option:hover {
  background-color: transparent !important;
}
.do-setting-output-menu--display .do-setting-output-option--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}
.do-setting-output-menu--display .do-setting-output-check {
  color: #999999 !important;
}

/* ===== PAGES SECTION ===== */
/* ================================
   PER-PAGE STYLES
   All Sales modals, Task pages, Network app, Message app, Warehouse,
   Purchase, Home. Loaded last (highest specificity priority via order).
   Duplicate .print-* and .do-setting-* classes deduplicated into
   components.css.
   ================================ */

/* ===== from pages/ConnectStore/ConnectStore.css ===== */

.connect-store-search-input:focus {
  border-color: #C2DE54 !important;
}

/* ===== from pages/Home/Home.css ===== */
/* ===== HOME DASHBOARD ===== */
.home-dashboard {
  padding: 1.25rem 1.5rem;
  background: #fff;
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-dashboard::-webkit-scrollbar {
  display: none;
}

/* ===== WELCOME BAR (3-column) ===== */
.home-welcome-bar {
  display: flex;
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  border: 0.5px solid #e0e0e0;
  overflow: hidden;
  min-height: 8.75rem;
  margin-bottom: 0.75rem;
}

/* Column 1: Greeting */
.home-welcome-greeting {
  flex: 35 1;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #f0f0f0;
  position: relative;
}

.home-welcome-title-row {
  display: flex;
  align-items: flex-start;
}

.home-welcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  text-align: left;
}

/* Level badge */
.home-welcome-level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.375rem 0.875rem 0.5rem;
  border-radius: 0 0 0.375rem 0.375rem;
  white-space: nowrap;
  gap: 0;
  position: absolute;
  top: 0;
  right: 1.5rem;
}

.home-welcome-level-icon {
  width: 2rem;
  height: 2rem;
  filter: brightness(0) invert(1);
  margin-bottom: 0;
}

.home-welcome-level-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.home-welcome-level-label {
  font-size: 0.5625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

/* Newcomer — grey */
.home-welcome-level-badge--newcomer {
  background: linear-gradient(135deg, #78909C 0%, #B0BEC5 40%, #90A4AE 70%, #78909C 100%);
}

/* Active — green */
.home-welcome-level-badge--active {
  background: linear-gradient(135deg, #0D7C3F 0%, #1AA35C 40%, #138B4C 70%, #0D7C3F 100%);
}

/* Power — platinum dark */
.home-welcome-level-badge--power {
  background: linear-gradient(135deg, #263238 0%, #546E7A 30%, #78909C 55%, #546E7A 80%, #37474F 100%);
}

/* Champion — dark maroon */
.home-welcome-level-badge--champion {
  background: linear-gradient(135deg, #3B0000 0%, #7B1F1F 35%, #9B3333 55%, #7B1F1F 80%, #4A0000 100%);
}

.home-welcome-date {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.25rem;
  text-align: left;
}

.home-welcome-attention {
  font-size: 0.6875rem;
  color: #555;
  font-weight: 400;
  margin-top: 0.5rem;
  text-align: left;
  line-height: 1.5;
}

/* Column 2: Summary */
.home-welcome-summary {
  flex: 35 1;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #f0f0f0;
}

.home-welcome-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.home-welcome-summary-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

.home-welcome-ai-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  background: none;
  border: 1px solid #138B4C;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #138B4C;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.home-welcome-ai-btn:hover {
  background: #e8f5e0;
}

.home-welcome-ai-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-welcome-summary-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.home-welcome-summary-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #333;
  text-align: left;
}

.home-welcome-summary-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.home-welcome-summary-link:hover {
  font-weight: 700;
}

.home-welcome-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-welcome-icon--solid {
  display: none;
}

.home-welcome-summary-link:hover .home-welcome-icon--regular {
  display: none;
}

.home-welcome-summary-link:hover .home-welcome-icon--solid {
  display: inline;
}

/* Column 3: Weather */
.home-welcome-weather {
  flex: 30 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-weather-bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-welcome-weather::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.1) 70%, transparent 80%);
  z-index: 1;
}

.home-weather-content {
  position: relative;
  z-index: 2;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}

.home-weather-location-row {
  margin-bottom: 0.375rem;
  align-self: flex-start;
}

.home-weather-dropdown {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}

.home-weather-dropdown option {
  color: #333;
  background: #fff;
}

.home-weather-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.home-weather-temp {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 0.1875rem rgba(0,0,0,0.2);
}

.home-weather-condition {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
}

.home-weather-feels {
  font-size: 0.625rem;
  color: rgba(255,255,255,0.8);
  text-align: left;
}

.home-weather-details {
  display: flex;
  gap: 1rem;
  font-size: 0.625rem;
  color: #fff;
}

.home-weather-detail {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
}

.home-weather-detail-label {
  color: rgba(255,255,255,0.7);
}

/* Section spacing */
.home-section {
  margin-bottom: 0.75rem;
}

/* ===== CONTENT ROW (3-column: Announcement, Industry Insight, You May Be Interested) ===== */
.home-content-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-content-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  border: 0.5px solid #e0e0e0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-content-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem 0.625rem;
}

.home-content-card-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.home-content-card-link {
  font-size: 0.625rem;
  color: #138B4C;
  font-weight: 600;
  cursor: pointer;
}

/* Shared text styles */
.home-content-item-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.1875rem;
  text-align: left;
}

.home-content-item-sub {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
  text-align: left;
}

.home-content-item-read {
  font-size: 0.625rem;
  color: #138B4C;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

/* Column 1: Announcement — single card carousel */
.home-content-carousel-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.home-content-nav-btn {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  background: #fff;
  cursor: pointer;
  transition: all 150ms ease;
}

.home-content-nav-btn:hover {
  background: #f0f8e8;
  border-color: #C2DE54;
}

.home-content-nav-btn img {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-content-nav-count {
  font-size: 0.625rem;
  color: #999;
  min-width: 1.5rem;
  text-align: center;
}

.home-content-announcement {
  padding: 0 1rem 1rem;
  cursor: pointer;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.home-content-announcement-image {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.625rem;
  margin-bottom: 0.625rem;
}

.home-content-announcement-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  text-align: left;
}

.home-content-announcement-sub {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.4;
  margin-bottom: 0.375rem;
  text-align: left;
  flex: 1 1;
  display: -webkit-box;
  -webkit-line-clamp: 18;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Column 2: Industry Insight — vertical list */
.home-content-list {
  flex: 1 1;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-content-list-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 150ms ease;
  border-radius: 0.25rem;
  padding: 0.5rem 0.5rem;
  flex: 1 1;
  min-height: 0;
}

.home-content-list-item:hover {
  background: #fafafa;
}

.home-content-list-text {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.home-content-list-text .home-content-item-sub {
  flex: 1 1;
  -webkit-line-clamp: 2;
}

.home-content-list-image {
  width: 100%;
  height: 10rem;
  background: linear-gradient(135deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.625rem;
  margin-bottom: 0.375rem;
}

.home-content-list-text {
  text-align: left;
}

/* Column 3: You May Be Interested — image left, text right */
.home-content-horizontal-item {
  display: flex;
  gap: 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
  border-radius: 0.25rem;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #f5f5f5;
}

.home-content-horizontal-item:last-child {
  border-bottom: none;
}

.home-content-horizontal-item:hover {
  background: #fafafa;
}

.home-content-horizontal-image {
  width: 6.75rem;
  min-width: 6.75rem;
  height: 6.75rem;
  background: linear-gradient(135deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.5625rem;
  flex-shrink: 0;
}

/* Compact mode: 5 items per page on wide viewports — smaller square image */
.home-content-card--compact .home-content-horizontal-image {
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
}

.home-content-horizontal-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.home-content-horizontal-text .home-content-item-sub {
  -webkit-line-clamp: 3;
}

.home-content-horizontal-text .home-content-item-read {
  margin-top: auto;
}

/* Pagination */
.home-content-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.625rem 1rem 0.875rem;
}

.home-content-page-btn {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  background: #fff;
  font-size: 0.625rem;
  color: #555;
  cursor: pointer;
  transition: all 150ms ease;
}

.home-content-page-btn:hover:not(:disabled) {
  background: #f0f8e8;
  border-color: #C2DE54;
}

.home-content-page-btn--active {
  background: #e8f5e0;
  border-color: #ccc;
  color: #138B4C;
  font-weight: 600;
}

.home-content-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.home-content-page-btn img {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Generic card */
.home-card {
  background: #fff;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 0.25rem rgba(0,0,0,0.1);
  transition: box-shadow 150ms ease;
}

.home-card:hover {
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.15);
}

.home-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.home-card-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
}

.home-card-link {
  font-size: 0.625rem;
  color: #138B4C;
  cursor: pointer;
  font-weight: 600;
}

/* ===== ROW 1: MARKET OVERVIEW ===== */
.home-market-card {
  background: #fff;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 0.75rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  border: 0.5px solid #e0e0e0;
  overflow: visible;
}

.home-market-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.home-market-tabs {
  display: flex;
}

.home-market-tab {
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  border-right: none;
}

.home-market-tab:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.home-market-tab:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #ddd;
}

.home-market-tab.active {
  background: #138B4C;
  color: #fff;
  border-color: #138B4C;
}

.home-market-tab.active + .home-market-tab {
  border-left-color: #138B4C;
}

.home-market-time {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-market-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2;
}

.home-market-live {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

/* Scroll container */
.home-market-scroll {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem -0.5rem;
  scrollbar-width: none;
}

.home-market-scroll::-webkit-scrollbar {
  height: 0;
}

/* Stock card */
.home-stock-card {
  min-width: 13.125rem;
  max-width: 13.125rem;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.375rem rgba(0,0,0,0.1);
  border: 0.5px solid #e0e0e0;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.home-stock-card:hover {
  box-shadow: 0 0 0.625rem rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.home-stock-card--forex,
.home-stock-card--commodity {
  border: none;
}

.home-stock-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-stock-exchange {
  font-size: 0.5625rem;
  color: #999;
  margin-top: 0;
}

.home-stock-price {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.375rem;
  position: relative;
  z-index: 1;
}

.home-stock-price--up { color: #138B4C; }
.home-stock-price--down { color: #C62828; }

.home-stock-change {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.home-stock-change--up { color: #138B4C; }
.home-stock-change--down { color: #C62828; }

.home-stock-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.125rem;
  z-index: 0;
}

/* Divider between groups */
.home-market-divider {
  width: 1px;
  background: #e0e0e0;
  flex-shrink: 0;
  align-self: stretch;
  margin: 0 0.25rem;
}

/* ===== FAVOURITE LINKS ===== */
.home-favourite-card {
  background: #fff;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 0.75rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  border: 0.5px solid #e0e0e0;
  margin-bottom: 0.75rem;
}

.home-favourite-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.home-favourite-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-favourite-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
}

.home-favourite-subtitle {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

.home-favourite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0;
  gap: 0;
}

.home-favourite-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 1px solid #f0f0f0;
  padding: 0 1rem;
}

.home-favourite-column:first-child {
  padding-left: 0;
}

.home-favourite-column:last-child {
  border-right: none;
  padding-right: 0;
}

.home-favourite-col-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 0 0.5rem;
  margin-bottom: 0.25rem;
  text-align: left;
}

.home-favourite-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #444;
  text-decoration: none;
}

.home-favourite-link:hover {
  color: #222;
  font-weight: 700;
}

.home-favourite-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-favourite-icon--solid {
  display: none;
}

.home-favourite-link:hover .home-favourite-icon--regular {
  display: none;
}

.home-favourite-link:hover .home-favourite-icon--solid {
  display: inline;
}

.home-favourite-label {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.home-favourite-usage {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.home-favourite-bar {
  width: 2.5rem;
  height: 0.375rem;
  background: #f0f0f0;
  border-radius: 0.1875rem;
  overflow: hidden;
  flex-shrink: 0;
}

.home-favourite-bar-fill {
  height: 100%;
  border-radius: 0.1875rem;
}

.home-favourite-pct {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  width: 1.625rem;
  text-align: right;
}

/* ===== ENGAGEMENT ROW (Collaborators, Productivity, Growth) ===== */

/* -- Frequent Collaborators -- */
.home-engage-list {
  padding: 0.4375rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-engage-person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.home-engage-person:last-child {
  border-bottom: none;
}

.home-engage-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.home-engage-info {
  flex: 1 1;
  min-width: 0;
}

.home-engage-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  text-align: left;
}

.home-engage-role {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

.home-engage-chat {
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.home-engage-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-engage-chat-icon--solid {
  display: none;
}

.home-engage-chat:hover .home-engage-chat-icon--regular {
  display: none;
}

.home-engage-chat:hover .home-engage-chat-icon--solid {
  display: inline;
}

/* -- Productivity Pulse -- */
.home-engage-metrics {
  padding: 0 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-engage-metric {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.home-engage-metric:last-child {
  border-bottom: none;
}

.home-engage-metric-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 2px;
  opacity: 0.5;
  flex-shrink: 0;
}

.home-engage-metric-info {
  flex: 1 1;
  min-width: 0;
}

.home-engage-metric-label {
  font-size: 0.625rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: left;
}

.home-engage-metric-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 2px 0 0.25rem;
}

.home-engage-metric-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
}

.home-engage-metric-change {
  font-size: 0.625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.1875rem;
}

.home-engage-metric-change--up {
  color: #138B4C;
}

.home-engage-metric-change--down {
  color: #C62828;
}

.home-engage-trend-icon {
  width: 0.625rem;
  height: 0.625rem;
}

.home-engage-metric-change--up .home-engage-trend-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.home-engage-metric-change--down .home-engage-trend-icon {
  filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(5000%) hue-rotate(355deg) brightness(80%) contrast(90%);
}

.home-engage-metric-bar {
  height: 0.25rem;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.home-engage-metric-bar-fill {
  height: 100%;
  border-radius: 2px;
}

/* -- Growth Journey -- */
.home-engage-journey {
  padding: 0.4375rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-engage-level {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  background: linear-gradient(135deg, #0D7C3F 0%, #1AA35C 40%, #138B4C 70%, #0D7C3F 100%);
  border-radius: 0.5rem;
  aspect-ratio: 1.586;
  max-height: 8.75rem;
}

.home-engage-level-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.home-engage-level-icon {
  width: 2.625rem;
  height: 2.625rem;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.home-engage-level-score {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.home-engage-level-score span {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.home-engage-level-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.home-engage-level-info {
  flex: 1 1;
}

.home-engage-level-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home-engage-level-holder {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  text-align: left;
  margin-top: 1px;
}

.home-engage-level-since {
  text-align: right;
  flex-shrink: 0;
}

.home-engage-level-since-label {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.home-engage-level-since-date {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.home-engage-progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-engage-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.home-engage-progress-label {
  font-size: 0.6875rem;
  color: #666;
  text-align: left;
}

.home-engage-progress-label strong {
  color: #222;
}

.home-engage-progress-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.home-engage-progress-bar {
  height: 0.5rem;
  background: #f0f0f0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.home-engage-progress-fill {
  height: 100%;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #138B4C, #C2DE54);
}

.home-engage-progress-sub {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

.home-engage-tasks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-engage-tasks-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.375rem;
  text-align: left;
}

.home-engage-task {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.home-engage-task:last-child {
  border-bottom: none;
}

.home-engage-task-icon {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
}

.home-engage-task-label {
  flex: 1 1;
  font-size: 0.6875rem;
  color: #444;
  text-align: left;
}

.home-engage-task-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.home-engage-task-badge--green {
  color: #138B4C;
  background: #f0f8e8;
}

.home-engage-task-badge--orange {
  color: #E67E22;
  background: #FFF3E0;
}

.home-engage-task-badge--red {
  color: #C62828;
  background: #FFF5F5;
}

.home-engage-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #FAFBFC;
  border-radius: 0.375rem;
  border-left: 3px solid #C2DE54;
}

.home-engage-quote-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.4;
  flex-shrink: 0;
  margin-top: 1px;
}

.home-engage-quote span {
  font-size: 0.6875rem;
  color: #666;
  font-style: italic;
  line-height: 1.4;
  text-align: left;
}

/* ===== ROW 2: NEWS ===== */
.home-news-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}

/* Headlines (65%) */
.home-news-headlines {
  flex: 65 1;
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.25rem rgba(0,0,0,0.1);
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
}

/* Trending (35%) */
.home-news-trending {
  flex: 35 1;
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.25rem rgba(0,0,0,0.1);
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
}

.home-news-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.625rem;
}

/* Article list */
.home-news-articles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1;
}

/* Headline article */
.home-headline-article {
  display: flex;
  border: 1px solid #f0f0f0;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 150ms ease;
  min-height: 5rem;
}

.home-headline-article:hover {
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
}

.home-headline-img {
  width: 8.75rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, #E8E8E8, #F0F0F0);
  align-self: stretch;
}

.home-headline-content {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1;
}

.home-article-category {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #138B4C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.1875rem;
}

.home-article-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.home-article-excerpt {
  font-size: 0.6875rem;
  color: #777;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.home-article-hashtags {
  font-size: 0.625rem;
  color: #1565C0;
  margin-bottom: 0.25rem;
}

.home-article-meta {
  font-size: 0.625rem;
  color: #999;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
}

.home-article-meta strong {
  color: #555;
}

.home-article-readmore {
  color: #138B4C;
  font-weight: 600;
  margin-left: auto;
  cursor: pointer;
}

/* Trending article */
.home-trending-article {
  display: flex;
  border: 1px solid #f0f0f0;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 150ms ease;
  min-height: 4.375rem;
}

.home-trending-article:hover {
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
}

.home-trending-img {
  width: 5.625rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, #E8E8E8, #F0F0F0);
  align-self: stretch;
}

.home-trending-content {
  padding: 0.4375rem 0.625rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1;
}

.home-trending-category {
  font-size: 0.5rem;
  font-weight: 700;
  color: #138B4C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.home-trending-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  margin-bottom: 0.1875rem;
}

.home-trending-hashtags {
  font-size: 0.5625rem;
  color: #1565C0;
  margin-bottom: 0.1875rem;
}

.home-trending-meta {
  font-size: 0.5625rem;
  color: #999;
  margin-top: auto;
}

/* Pagination */
.home-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.625rem;
  justify-content: flex-start;
}

.home-page-btn {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.25rem;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 0.6875rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background 150ms, color 150ms;
}

.home-page-btn:hover {
  background: #f5f5f5;
}

.home-page-btn.active {
  background: #138B4C;
  color: #fff;
  border-color: #138B4C;
}

.home-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.home-page-count {
  font-size: 0.625rem;
  color: #aaa;
  margin-left: 0.375rem;
}

/* ===== ROW 3: DASHBOARD WIDGETS ===== */
/* 4-column grid */
.home-row-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* 2-column grid */
.home-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* 3-column grid */
.home-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Action cards */
.home-action-card {
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 0.25rem rgba(0,0,0,0.1);
  cursor: pointer;
  transition: box-shadow 150ms ease;
}

.home-action-card:hover {
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.15);
}

.home-action-card--red   { border-left: 4px solid #C62828; }
.home-action-card--green { border-left: 4px solid #138B4C; }
.home-action-card--blue  { border-left: 4px solid #1565C0; }
.home-action-card--teal  { border-left: 4px solid #00695C; }

.home-metric-big {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0.375rem;
}

.home-metric-sub {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 0.25rem;
}

/* Stats inside cards */
.home-stats-row {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.home-stat {
  flex: 1 1;
  text-align: center;
  padding: 0.5rem 0.375rem;
  background: #f8f8f8;
  border-radius: 0.25rem;
}

.home-stat-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #333;
}

.home-stat-label {
  font-size: 0.625rem;
  color: #999;
}

/* Progress bar slim */
.home-progress-track {
  height: 0.5rem;
  background: #e8e8e8;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-top: 0.375rem;
  margin-bottom: 0.25rem;
}

.home-progress-fill {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 300ms ease;
}

.home-progress-label {
  font-size: 0.6875rem;
  color: #777;
  display: flex;
  justify-content: space-between;
}

/* Big metric hero */
.home-metric-hero {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.home-metric-hero-label {
  font-size: 0.625rem;
  color: #999;
  margin-bottom: 0.625rem;
}

/* Inventory badges */
.home-inventory-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.25rem;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-inventory-badge--red    { background: #FFF5F5; color: #C62828; border-left: 3px solid #C62828; }
.home-inventory-badge--yellow { background: #FFF8E1; color: #F57F17; border-left: 3px solid #F57F17; }
.home-inventory-badge--green  { background: #F1F8F4; color: #138B4C; border-left: 3px solid #138B4C; }

.home-inventory-badge-sub {
  font-size: 0.625rem;
  font-weight: 400;
  color: #aaa;
}

.home-inventory-badge-count {
  font-size: 1rem;
  font-weight: 700;
}

/* Financial rows */
.home-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.3125rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.home-fin-row:last-child {
  border-bottom: none;
}

.home-fin-label {
  color: #999;
}

/* ===== ROW 4: RECENT ACTIVITY ===== */
.home-activity-item {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.4375rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.home-activity-item:last-child {
  border-bottom: none;
}

.home-activity-avatar {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.home-activity-text {
  font-size: 0.75rem;
  color: #333;
  flex: 1 1;
  line-height: 1.4;
}

.home-activity-time {
  font-size: 0.625rem;
  color: #aaa;
  white-space: nowrap;
}

/* ===== YOUR FOCUS SECTION ===== */
.home-focus-card {
  background: #fff;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 0.75rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  border: 0.5px solid #e0e0e0;
  overflow: visible;
  margin-bottom: 0.75rem;
}

.home-focus-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.home-focus-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-focus-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
}

.home-focus-subtitle {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

.home-focus-tabs { display: flex; }

.home-focus-tab {
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 150ms ease;
  border-right: none;
}

.home-focus-tab:first-child { border-radius: 0.25rem 0 0 0.25rem; }
.home-focus-tab:last-child { border-radius: 0 0.25rem 0.25rem 0; border-right: 1px solid #ddd; }
.home-focus-tab.active { background: #138B4C; color: #fff; border-color: #138B4C; }
.home-focus-tab:hover:not(.active) { background: #f0f8e8; border-color: #C2DE54; }

.home-focus-scroll {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem;
  scrollbar-width: none;
}

.home-focus-scroll::-webkit-scrollbar { height: 0; }

.home-focus-metric-card {
  min-width: 13.75rem;
  max-width: 13.75rem;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.375rem rgba(0,0,0,0.1);
  border: 0.5px solid #e0e0e0;
  padding: 0.875rem 1rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-focus-metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.home-focus-metric-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.home-focus-metric-change {
  font-size: 0.625rem;
  font-weight: 600;
  margin-top: 2px;
}

.home-focus-metric-change--up { color: #138B4C; }
.home-focus-metric-change--down { color: #C62828; }

.home-focus-metric-sub {
  font-size: 0.625rem;
  color: #999;
  margin-top: 2px;
}

.home-focus-chart {
  margin-top: auto;
  padding-top: 0.5rem;
}

.home-focus-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.1875rem;
  height: 3.75rem;
}

.home-focus-mini-bar {
  flex: 1 1;
  border-radius: 2px 2px 0 0;
}

.home-focus-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999;
  margin-top: 0.1875rem;
}

.home-focus-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.home-focus-progress-bar {
  flex: 1 1;
  height: 0.375rem;
  background: #f0f0f0;
  border-radius: 0.1875rem;
  overflow: hidden;
}

.home-focus-progress-fill {
  height: 100%;
  border-radius: 0.1875rem;
}

.home-focus-progress-pct {
  font-size: 0.6875rem;
  font-weight: 700;
}

.home-focus-stacked {
  height: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  overflow: hidden;
}

.home-focus-stacked-seg {
  height: 100%;
}

.home-focus-stacked-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.5625rem;
  color: #666;
  margin-bottom: 0.1875rem;
}

.home-focus-h-bars {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.home-focus-h-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
}

.home-focus-h-bar {
  height: 0.25rem;
  background: #f0f0f0;
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.home-focus-h-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.home-focus-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 2px;
  gap: 2px;
}

.home-focus-heatmap-cell {
  height: 0.75rem;
  border-radius: 2px;
}

.home-focus-heatmap-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999;
  margin-top: 0.1875rem;
}

.home-focus-donut {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Donut legend */
.home-focus-donut-legend {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.5625rem;
  color: #666;
  margin-top: 0.25rem;
}

.home-focus-donut-legend span {
  display: flex;
  align-items: center;
}

.home-focus-coming-soon {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: #ccc;
  font-size: 0.8125rem;
}

/* ===== from pages/MessageApp/MessageApp.css ===== */
.message-app-page {
  width: 100%;
  height: 100%;
}

/* ===== from pages/MessageApp/pages/AllChatsPage.css ===== */
/* ============================================================
   All Chats Page — Three-panel layout
   ============================================================ */

.all-chats-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* Expanded mode — no left panel, no margin/border (detail page) */
.all-chats-page--expanded {
  margin-top: 0;
  border-top: none;
}

/* Expanded mode — bring chat bubbles closer together */
.all-chats-page--expanded .all-chats-messages-area {
  padding-left: 20%;
  padding-right: 20%;
}

.all-chats-page--expanded .all-chats-bubble {
  max-width: 80%;
}

.all-chats-page--expanded .all-chats-input-area {
  padding-left: 20%;
  padding-right: 20%;
}

.all-chats-conv-header--expanded {
  border-left: none;
  border-bottom: none;
  height: 4.6125rem !important;
  min-height: 4.6125rem !important;
  padding: 0.75rem 1rem 0.5rem 1rem;
  box-sizing: border-box;
}

.all-chats-conv-header--expanded .all-chats-header-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.9375rem;
  border-radius: 50%;
}

.all-chats-conv-header--expanded .all-chats-header-name {
  font-size: 1.125rem;
  font-weight: 700;
}

.all-chats-conv-header--expanded .all-chats-header-status {
  font-size: 0.75rem;
}

/* Toolbar button group in expanded mode header (Refresh | Collapse | Info) */
.all-chats-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #fff;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: all 200ms ease;
}

.all-chats-toolbar-btn:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
  z-index: 1;
  position: relative;
}

.all-chats-toolbar-btn--left {
  border-radius: 0.375rem 0 0 0.375rem;
}

.all-chats-toolbar-btn--mid {
  border-radius: 0;
  margin-left: -1px;
}

.all-chats-toolbar-btn--right {
  border-radius: 0 0.375rem 0.375rem 0;
  margin-left: -1px;
}

/* ============================================================
   LEFT PANEL — Conversation List (280px)
   ============================================================ */

.all-chats-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  border-right: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

/* Sub-tabs — height matches conversation header */
.all-chats-subtabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.all-chats-subtab {
  flex: 1 1;
  padding: 0.75rem 0;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #999;
  font-weight: 500;
  transition: color 150ms ease, border-color 150ms ease;
}

.all-chats-subtab.active {
  color: #138B4C;
  border-bottom: 3px solid #138B4C;
  font-weight: 700;
}

/* Search */
.all-chats-search-wrap {
  padding: 0.625rem 0.75rem;
  flex-shrink: 0;
}

.all-chats-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.all-chats-search:focus {
  border-color: #C2DE54;
}

/* Conversation list scroll */
.all-chats-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 0 0.5rem 0;
  border-right: 1px solid #e0e0e0;
}

.all-chats-list-scroll::-webkit-scrollbar {
  width: 0;
}

.all-chats-list-scroll {
  scrollbar-width: none;
}

/* Section headers */
.all-chats-section-header {
  font-size: 0.625rem;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

/* Pinned section header — red tint */
.all-chats-section-header--pinned {
  background: #FFF5F5;
  color: #C62828;
}

/* Recent section header — blue tint */
.all-chats-section-header--recent {
  background: #F0F5FF;
  color: #1565C0;
}

/* Conversation item */
.all-chats-conv-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms ease;
  position: relative;
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
}

.all-chats-conv-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.all-chats-conv-item--internal.active {
  background: #F5FBF0;
}

/* External active — light orange */
.all-chats-conv-item--external.active {
  background: #FFF9F2;
}

/* Avatar */
.all-chats-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  position: relative;
}

.all-chats-avatar-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid #fff;
}

/* Conv info */
.all-chats-conv-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.all-chats-conv-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.all-chats-conv-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-chats-conv-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.all-chats-conv-sub {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.all-chats-conv-item.active .all-chats-conv-sub {
  color: #138B4C;
}

.all-chats-conv-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 2px;
}

.all-chats-conv-preview {
  font-size: 0.75rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

.all-chats-unread-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 0.3125rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
}

/* ============================================================
   CENTER PANEL — Active Conversation
   ============================================================ */

.all-chats-conversation-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* Conversation Header — height matches left panel subtabs */
.all-chats-conv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
  background: #fff;
}

/* Ensure subtabs and conv-header have identical height */
.all-chats-subtabs,
.all-chats-conv-header {
  height: 3.5rem;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.all-chats-conv-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.all-chats-header-avatar {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  position: relative;
}

.all-chats-header-avatar-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid #fff;
}

.all-chats-header-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #222;
  text-align: left;
}

.all-chats-header-status {
  font-size: 0.6875rem;
  color: #999;
  text-align: left;
}

.all-chats-conv-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.all-chats-header-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: #f5f5f5;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #555;
  transition: background 150ms ease;
}

.all-chats-header-btn:hover {
  background: #eaeaea;
}

.all-chats-header-btn.info-active {
  background: #f0f8e8;
  color: #138B4C;
  border: 1px solid #c8e6c9;
}

.all-chats-header-btn img {
  width: 0.875rem;
  height: 0.875rem;
}

/* Messages area */
.all-chats-messages-area {
  flex: 1 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background-color: #fff6ec;
}

.all-chats-messages-area::-webkit-scrollbar {
  width: 0;
}

.all-chats-messages-area {
  scrollbar-width: none;
}

/* Date separator */
.all-chats-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem 0;
}

.all-chats-date-sep-label {
  font-size: 0.625rem;
  color: #999;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 0.625rem;
  border-radius: 0.625rem;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.08);
}

/* Message row */
.all-chats-msg {
  display: flex;
  animation: allChatsfadeIn 250ms ease;
}

@keyframes allChatsfadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.all-chats-msg--other {
  justify-content: flex-start;
}

.all-chats-msg--me {
  justify-content: flex-end;
}

/* Bubble */
.all-chats-bubble {
  max-width: 68%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
  position: relative;
  text-align: left;
}

.all-chats-msg--other .all-chats-bubble {
  background: #fff;
  border-bottom-left-radius: 0;
}

.all-chats-msg--me .all-chats-bubble {
  background: #E9F5CE;
  border-bottom-right-radius: 0;
}

.all-chats-bubble-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #222;
  margin: 0;
}

/* Emoji-only messages — bigger with bubble */
.all-chats-bubble--emoji-only .all-chats-bubble-text {
  font-size: 2.5rem;
  line-height: 1.2;
}

.all-chats-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.all-chats-bubble-time {
  font-size: 0.5625rem;
  color: #999;
}

.all-chats-bubble-receipt {
  display: inline-flex;
  align-items: center;
}

.all-chats-receipt-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: opacity(0.5);
}

.all-chats-receipt-icon--read {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* File attachment card */
.all-chats-attach-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  margin-top: 0.375rem;
  cursor: pointer;
}

.all-chats-attach-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.all-chats-attach-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #333;
}

.all-chats-attach-size {
  font-size: 0.625rem;
  color: #999;
}

/* Document link card */
.all-chats-doc-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(19, 139, 76, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  margin-top: 0.375rem;
  cursor: pointer;
}

.all-chats-msg--other .all-chats-doc-card {
  background: #f0f0f0;
}

.all-chats-doc-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.all-chats-doc-number {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #138B4C;
}

.all-chats-msg--other .all-chats-doc-number {
  color: #333;
}

.all-chats-doc-summary {
  font-size: 0.625rem;
  color: #555;
}

/* Input area */
.all-chats-input-area {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: 0.5rem 0.75rem 0.625rem;
}

/* Plus button + dropdown */
.all-chats-plus-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}

.all-chats-plus-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #dee2e6;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.all-chats-plus-btn:hover {
  background: #f0f8e8;
  border-color: #C2DE54;
}

.all-chats-plus-btn--active {
  background: #f0f8e8;
  border-color: #C2DE54;
}

.all-chats-plus-btn--active .all-chats-plus-icon {
  transform: rotate(45deg);
}

.all-chats-plus-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
}

.all-chats-plus-dropdown {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0;
  min-width: 10rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 0.25rem 0;
  animation: allChatsPlusSlide 150ms ease;
}

@keyframes allChatsPlusSlide {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

.all-chats-plus-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333;
  transition: background 150ms ease;
}

.all-chats-plus-dropdown-item:hover {
  background: #f0f8e8;
}

.all-chats-plus-dropdown-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Emoji picker panel */
.all-chats-emoji-picker {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0;
  width: 17.5rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
  z-index: 101;
  padding: 0.625rem;
  animation: allChatsPlusSlide 150ms ease;
}

.all-chats-emoji-picker-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.all-chats-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 2px;
  gap: 2px;
}

.all-chats-emoji-btn {
  width: 2.125rem;
  height: 2.125rem;
  border: none;
  background: none;
  border-radius: 0.375rem;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease;
}

.all-chats-emoji-btn:hover {
  background: #f0f8e8;
}

.all-chats-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.all-chats-text-input {
  flex: 1 1;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 1.25rem;
  font-size: 0.8125rem;
  outline: none;
  background: #fff;
  color: #333;
  transition: border-color 150ms ease;
}

.all-chats-text-input:focus {
  border-color: #C2DE54;
}

.all-chats-send-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #0070C0, #00B050);
  box-shadow: 0 2px 0.375rem rgba(0, 112, 192, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.all-chats-send-btn:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 0.25rem 0.625rem rgba(0, 112, 192, 0.4);
}

.all-chats-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.all-chats-send-btn:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}

.all-chats-send-btn img {
  width: 0.9375rem;
  height: 0.9375rem;
  filter: brightness(0) invert(1);
}

/* ============================================================
   RIGHT PANEL — Contact Info (260px, collapsible)
   ============================================================ */

.all-chats-info-panel {
  width: 20rem;
  min-width: 20rem;
  border-left: 1px solid #e0e0e0;
  background: #fff;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: allChatsPanelSlide 200ms ease;
}


@keyframes allChatsPanelSlide {
  from {
    opacity: 0;
    transform: translateX(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.all-chats-info-panel::-webkit-scrollbar {
  width: 0;
}

.all-chats-info-panel {
  scrollbar-width: none;
  border-radius: 2px;
}

/* Contact avatar + name */
.all-chats-info-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.all-chats-info-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.all-chats-info-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: -0.25rem;
}

.all-chats-info-online {
  font-size: 0.6875rem;
  color: #138B4C;
}

/* Contact fields */
.all-chats-info-fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  text-align: left;
}

.all-chats-info-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.all-chats-info-label {
  font-size: 0.625rem;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.all-chats-info-value {
  font-size: 0.75rem;
  color: #333;
}

.all-chats-info-value.email {
  color: #138B4C;
}

/* Section title */
.all-chats-info-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.375rem;
  text-align: left;
}

/* Related docs */
.all-chats-info-docs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  text-align: left;
}

.all-chats-info-doc-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 0.4375rem 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.all-chats-info-doc-card:hover {
  background: #eaeaea;
}

.all-chats-info-doc-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.all-chats-info-doc-number {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #138B4C;
}

.all-chats-info-doc-summary {
  font-size: 0.625rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shared files */
.all-chats-info-files {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  text-align: left;
}

.all-chats-info-file-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 0.4375rem 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.all-chats-info-file-card:hover {
  background: #eaeaea;
}

.all-chats-info-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.all-chats-info-file-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

.all-chats-info-file-meta {
  font-size: 0.625rem;
  color: #999;
  white-space: nowrap;
}

/* ===== from pages/MessageApp/pages/AnnouncementPage.css ===== */
/* ============================================================
   Announcement Page — Three-panel layout (same as Notification)
   ============================================================ */

.announce-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Announcement List (280px)
   ============================================================ */

.announce-left-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.announce-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  height: 3.5rem;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.announce-tab {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #999;
  font-weight: 500;
  transition: color 150ms ease, border-color 150ms ease;
}

.announce-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
  font-weight: 700;
}

.announce-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.announce-list-scroll::-webkit-scrollbar { width: 0; }

.announce-search-wrap {
  padding: 0.625rem 0.75rem;
}

.announce-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.announce-search:focus { border-color: #C2DE54; }

/* Section headers */
.announce-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.announce-section-header--pinned { background: #FFF5F5; color: #C62828; }
.announce-section-header--recent { background: #F0F5FF; color: #1565C0; }

/* Announcement list item */
.announce-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms ease;
  border-bottom: 1px solid #f0f0f0;
}

.announce-item:hover { background: #fafafa; }
.announce-item--active { background: transparent; }
.announce-item--active .announce-thumb { background: #C2DE54; border: 1px solid #a8c846; }
.announce-item--unread { font-weight: 500; }

/* Thumbnail */
.announce-thumb {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  border-radius: 0.375rem;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.announce-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.375rem;
}

.announce-thumb-placeholder {
  font-size: 0.625rem;
  color: #bbb;
  font-weight: 600;
}

/* Item info */
.announce-info { flex: 1 1; min-width: 0; }
.announce-title-row { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; }
.announce-title { font-size: 0.75rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-date { font-size: 0.625rem; color: #999; white-space: nowrap; flex-shrink: 0; }
.announce-category { font-size: 0.625rem; color: #999; margin-top: 1px; text-transform: capitalize; }
.announce-preview { font-size: 0.6875rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.announce-unread-dot { width: 0.5rem; height: 0.5rem; background: #138B4C; border-radius: 50%; flex-shrink: 0; margin-top: 0.25rem; }

/* ============================================================
   CENTER PANEL — Announcement Detail
   ============================================================ */

.announce-center-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.announce-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 3.5rem;
  min-height: 3.5rem;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
  background: #fff;
  box-sizing: border-box;
}

.announce-center-header-left { display: flex; align-items: center; gap: 0.625rem; }
.announce-center-title { font-size: 0.875rem; font-weight: 600; color: #222; text-align: left; }
.announce-center-meta { font-size: 0.6875rem; color: #999; text-align: left; }

.announce-center-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.announce-center-content::-webkit-scrollbar { width: 0; }

/* Detail card */
.announce-detail-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  width: 60%;
  margin: 0 auto;
  overflow: hidden;
}

.announce-detail-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.announce-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.announce-detail-image-placeholder {
  font-size: 0.875rem;
  color: #ccc;
  font-weight: 600;
}

.announce-detail-body {
  padding: 1.25rem 1.5rem;
}

.announce-detail-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.625rem;
  text-transform: capitalize;
}

.announce-detail-badge--company { background: #E3F2FD; color: #1565C0; }
.announce-detail-badge--product { background: #C2DE54; color: #333; }
.announce-detail-badge--hr { background: #F5B041; color: #fff; }
.announce-detail-badge--general { background: #F5F5F5; color: #666; }

.announce-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.announce-detail-description {
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.7;
  white-space: pre-line;
  text-align: left;
}

.announce-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f0f0;
}

.announce-detail-author {
  font-size: 0.6875rem;
  color: #138B4C;
  font-weight: 600;
}

.announce-detail-date {
  font-size: 0.6875rem;
  color: #999;
}

/* ============================================================
   RIGHT PANEL — Info (320px)
   ============================================================ */

.announce-right-panel {
  width: 20rem;
  min-width: 20rem;
  border-left: 1px solid #e0e0e0;
  background: #fff;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scrollbar-width: none;
}

.announce-right-panel::-webkit-scrollbar { width: 0; }

.announce-right-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #444;
  text-align: left;
}

.announce-right-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.announce-right-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
}

.announce-right-value {
  font-size: 0.75rem;
  color: #333;
}

/* Empty state */
.announce-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 0.8125rem;
}

/* ===== from pages/MessageApp/pages/ApprovalPage.css ===== */
/* ============================================================
   Approval Page — Two-panel workflow hub layout
   ============================================================ */

.approval-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Approval List (280px)
   ============================================================ */

.approval-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

/* Tabs */
.approval-tabs {
  display: flex;
  align-items: flex-end;
  height: 3.5rem;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.approval-tab {
  flex: 1 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #999;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  padding: 0;
}

.approval-tab:hover {
  color: #555;
}

.approval-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
}

.approval-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background: #C62828;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  border-radius: 0.5rem;
}

/* Search */
.approval-search-wrap {
  padding: 0.5rem 0.75rem 0.25rem;
  flex-shrink: 0;
}

.approval-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.approval-search:focus {
  border-color: #C2DE54;
}

/* Document type dropdown — match search field border */
.approval-left-panel .so-modal-tags-input {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
}

.approval-left-panel .so-modal-tags-input--open {
  border-color: #C2DE54;
}

/* Filter chips */
.approval-filter-chips {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.approval-chip {
  font-size: 0.5625rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background: #f5f5f5;
  color: #666;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.approval-chip:hover {
  background: #ebebeb;
}

.approval-chip--active {
  background: #e8f5e0;
  color: #138B4C;
  font-weight: 600;
}

/* List scroll */
.approval-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.approval-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.approval-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.approval-section-header--overdue {
  background: #FFF5F5;
  color: #C62828;
}

.approval-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.approval-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.approval-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Approval list item */
.approval-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.approval-item:hover {
  background: #fafafa;
}

.approval-item--active {
  background: #F5FBF0;
}

/* Avatar */
.approval-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.approval-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.approval-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.approval-avatar--external {
  background: #F5B041;
  color: #fff;
}

.approval-item-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.approval-item-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.approval-item-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approval-sla {
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.approval-item-doc-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.1875rem;
}

.approval-doc-number {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approval-doc-type-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 0.3125rem;
  border-radius: 0.1875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.approval-item-desc {
  font-size: 0.6875rem;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approval-item-amount {
  font-size: 0.6875rem;
  color: #555;
  font-weight: 600;
  margin-top: 2px;
}

.approval-empty {
  padding: 1.5rem 0.875rem;
  font-size: 0.75rem;
  color: #bbb;
  text-align: center;
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.approval-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
}

.approval-reading-panel::-webkit-scrollbar {
  display: none;
}

.approval-reading-panel {
  scrollbar-width: none;
}

/* Document card */
.approval-doc-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Urgency banner */
.approval-urgency-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: #FFF5F5;
  border-bottom: 1px solid #FFCDD2;
}

.approval-urgency-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(3000%) hue-rotate(357deg) brightness(80%) contrast(105%);
}

.approval-urgency-banner span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #C62828;
  flex: 1 1;
}

.approval-urgency-submitted {
  font-size: 0.6875rem;
  font-weight: 400 !important;
  color: #999 !important;
  white-space: nowrap;
  flex: 0 1 !important;
}

/* Document header */
.approval-doc-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-doc-badges-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

.approval-doc-type-badge-lg {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.25rem;
}

.approval-priority-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
}

.approval-priority-badge--high {
  background: #FFF5F5;
  color: #C62828;
}

.approval-priority-badge--medium {
  background: #FFF8E1;
  color: #F57F17;
}

.approval-priority-badge--low {
  background: #F5F5F5;
  color: #666;
}

.approval-status-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
}

.approval-status-badge--approved {
  background: #e8f5e0;
  color: #138B4C;
}

.approval-status-badge--rejected {
  background: #FFF5F5;
  color: #C62828;
}

.approval-doc-number-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.approval-doc-description {
  font-size: 0.8125rem;
  color: #666;
  margin-top: 0.25rem;
  text-align: left;
}

/* Key metrics row */
.approval-metrics-row {
  display: flex;
  align-items: stretch;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.approval-metric {
  flex: 1 1;
  padding: 1rem 1.5rem;
  border-right: 1px solid #f0f0f0;
  text-align: left;
}

.approval-metric:last-child {
  border-right: none;
}

.approval-metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.approval-metric-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #222;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.approval-metric-sla-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.8;
}

/* Requester section */
.approval-requester-section {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
  margin-top: 0.25rem;
  text-align: left;
}

.approval-requester-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.approval-requester-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.approval-requester-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
}

.approval-requester-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
}

.approval-requester-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
}

.approval-submitted-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Document summary */
.approval-summary-section {
  padding: 1rem 1.5rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.625rem 1.5rem;
  gap: 0.625rem 1.5rem;
}

.approval-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.approval-summary-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.2px;
}

.approval-summary-value {
  font-size: 0.75rem;
  color: #333;
  font-weight: 500;
}

/* Document chain */
.approval-chain-section {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

/* Document Detail — Order Items / Profitability tabs */
.approval-detail-section {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-detail-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

.approval-detail-tab {
  padding: 0.375rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #999;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.approval-detail-tab:hover { color: #555; }

.approval-detail-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

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

.approval-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.6875rem;
}

.approval-detail-table {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
}

.approval-detail-table th {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  white-space: nowrap;
  background: #F9F9F9;
}

.approval-detail-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  vertical-align: top;
  text-align: left;
}

.approval-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Profitability — two-column layout */
.approval-profit-columns {
  display: flex;
  gap: 1.25rem;
}

.approval-profit-col {
  flex: 1 1;
  min-width: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  padding: 0.75rem;
}

.approval-profit-col-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  background: #F9F9F9;
  padding: 0.375rem 0.5rem;
  margin: -0.75rem -0.75rem 0.5rem -0.75rem;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.25rem 0.25rem 0 0;
  white-space: nowrap;
}

.approval-profit-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.approval-profit-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f8f8f8;
}

.approval-profit-item--highlight {
  background: #fafafa;
  padding: 0.25rem 0.375rem;
  margin: 2px -0.375rem;
  border-radius: 0.1875rem;
}

.approval-profit-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.2px;
}

.approval-profit-value {
  font-size: 0.75rem;
  color: #333;
  font-weight: 500;
  text-align: left;
}

.approval-profit-sub {
  font-size: 0.5625rem;
  color: #bbb;
  margin-top: 0;
}

/* Document Flow — reuses DO do-modal-data-flow-2-document-* classes directly */

/* Requester note */
.approval-note-section {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-note-box {
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-left: 3px solid #138B4C;
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.7;
  font-style: italic;
  text-align: left;
}

.approval-note-quote {
  font-size: 1.125rem;
  font-weight: 700;
  color: #138B4C;
  font-style: normal;
  opacity: 0.6;
  margin: 0 2px;
}

/* Attachments */
.approval-attachments-section {
  padding: 1rem 1.5rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}

.approval-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.approval-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.approval-file-card:hover {
  background: #f0f0f0;
}

.approval-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.approval-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approval-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Action bar */
.approval-action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  flex-wrap: wrap;
}

.approval-comment-input {
  flex: 0 0 58%;
  height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  color: #333;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.approval-comment-input:focus {
  border-color: #C2DE54;
}

.approval-comment-input::placeholder {
  color: #bbb;
}

.approval-btn {
  height: 1.75rem;
  min-width: 5rem;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  transition: opacity 150ms ease;
  flex: 1 1;
}

.approval-btn:hover {
  opacity: 0.88;
}

.approval-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.approval-btn--return {
  background: #fff;
  border: 1px solid #E65100;
  color: #E65100;
}

.approval-btn--reject {
  background: #C62828;
  color: #fff;
}

.approval-btn--approve {
  background: #138B4C;
  color: #fff;
}

.approval-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.approval-btn--return .approval-btn-icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(2500%) hue-rotate(14deg) brightness(92%) contrast(98%);
}

.approval-btn--reject .approval-btn-icon,
.approval-btn--approve .approval-btn-icon {
  filter: brightness(0) invert(1);
}

/* ============================================================
   APPROVAL TRAIL CARD
   ============================================================ */

.approval-trail-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 1rem;
}

.approval-trail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
}

.approval-trail-step {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  position: relative;
  padding: 0;
}

.approval-trail-line-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  align-self: stretch;
}

/* Connected circle timeline — matching DO Delivery Status Timeline */
.approval-trail-circle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 2px solid #D0D0D0;
  background: #fff;
}

.approval-trail-circle--completed {
  background: #138B4C;
  border-color: #138B4C;
}

.approval-trail-circle--current {
  border-color: #E65100;
  background: #fff;
}

.approval-trail-circle-inner {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #E65100;
}

.approval-trail-circle--pending {
  border-color: #D0D0D0;
  background: #fff;
}

.approval-trail-connector {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% - 1.75rem);
  z-index: 0;
}

.approval-trail-connector--completed {
  background: #138B4C;
}

.approval-trail-connector--current {
  background: #D0D0D0;
}

.approval-trail-connector--pending {
  background: #D0D0D0;
}

.approval-trail-step:last-child .approval-trail-connector {
  display: none;
}

.approval-trail-content {
  flex: 1 1;
  min-width: 0;
  padding-bottom: 1.25rem;
  text-align: left;
}

.approval-trail-step:last-child .approval-trail-content {
  padding-bottom: 0;
}

.approval-trail-step-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #222;
}

.approval-trail-person {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 0;
}

.approval-trail-date {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 0;
}

.approval-trail-comment {
  font-size: 0.6875rem;
  color: #666;
  font-style: italic;
  margin-top: 1px;
  line-height: 1.5;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.approval-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.875rem;
  color: #bbb;
}

/* ============================================================
   TOAST
   ============================================================ */

.approval-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: approval-toast-in 300ms ease;
}

@keyframes approval-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== from pages/MessageApp/pages/ArchivePage.css ===== */
/* ============================================================
   Archive Page — Two-panel Outlook-style layout
   ============================================================ */

.archive-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.archive-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.archive-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.archive-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.archive-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.archive-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.archive-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.archive-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.archive-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.archive-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.archive-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.archive-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.archive-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.archive-email-item--internal.archive-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.archive-email-item--external.archive-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.archive-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.archive-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.archive-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.archive-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.archive-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.archive-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.archive-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.archive-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.archive-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.archive-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.archive-tag--archived {
  color: #666;
  background: #F5F5F5;
  border: 1px solid #e0e0e0;
}

.archive-tag--sent {
  color: #1565C0;
  background: #E3F2FD;
}

.archive-tag--received {
  color: #6A1B9A;
  background: #F3E5F5;
}

.archive-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.archive-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.archive-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.archive-tag--attach img {
  filter: opacity(0.5);
}

.archive-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.archive-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.archive-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.archive-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.archive-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.archive-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.archive-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.archive-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.archive-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.archive-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.archive-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.archive-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.archive-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender/Recipient info */
.archive-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.archive-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.archive-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.archive-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.archive-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.archive-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.archive-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.archive-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.archive-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.archive-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.archive-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.archive-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.archive-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.archive-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.archive-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.archive-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archive-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.archive-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.archive-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
  cursor: pointer;
  transition: background 150ms ease;
}

.archive-action-btn:hover {
  background: #f5f5f5;
}

.archive-action-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.archive-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.archive-icon-btn:hover {
  background: #f5f5f5;
}

.archive-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

/* Unarchive button — wider to fit text */
.archive-icon-btn--unarchive {
  width: auto;
  padding: 0 0.625rem;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: #444;
  font-family: inherit;
}

.archive-icon-btn--unarchive img {
  filter: opacity(0.6);
}

.archive-icon-btn--unarchive:hover {
  background: #f0f5ff;
  border-color: #90CAF9;
  color: #1565C0;
}

.archive-icon-btn--unarchive:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(1500%) hue-rotate(200deg) brightness(90%) contrast(95%);
}

.archive-icon-btn--delete img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1500%) hue-rotate(340deg) brightness(90%) contrast(95%) opacity(0.7);
}

.archive-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.archive-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.archive-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.archive-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* Toast */
.archive-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: archive-toast-in 300ms ease;
}

@keyframes archive-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.archive-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.archive-card-body ul,
.archive-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.archive-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.archive-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.archive-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.archive-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.archive-file-card:hover {
  background: #f0f0f0;
}

.archive-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.archive-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.archive-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.archive-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.archive-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.archive-doc-card:hover {
  background: #e8f5e0;
}

.archive-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.archive-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.archive-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

.archive-page--expanded {
  border-top: none;
}
.archive-page--expanded .archive-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ===== from pages/MessageApp/pages/DistributionListPage.css ===== */
/* Distribution List — type badges */
.dl-type-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 2px 0.375rem;
  border-radius: 0.625rem;
  text-transform: capitalize;
  flex-shrink: 0;
}

.dl-type-badge--chat { background: #E3F2FD; color: #1565C0; }
.dl-type-badge--message { background: #E8F5E9; color: #138B4C; }
.dl-type-badge--announcement { background: #FFF3E0; color: #E65100; }
.dl-type-badge--all { background: #F3E5F5; color: #6A1B9A; }

/* Member list in detail */
.dl-member-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dl-member-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dl-member-item:last-child { border-bottom: none; }

.dl-member-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  overflow: hidden;
  font-weight: 700;
  color: #555;
}

.dl-member-avatar--internal { background: #C2DE54; color: #333; }
.dl-member-avatar--external { background: #F5B041; color: #fff; }

.dl-member-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.dl-member-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
}

.dl-member-role {
  font-size: 0.625rem;
  color: #999;
}

.dl-member-email {
  font-size: 0.625rem;
  color: #138B4C;
}

/* Detail card sections */
.dl-detail-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.dl-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.25rem;
  text-align: left;
}

.dl-detail-desc {
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: left;
}

.dl-detail-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  justify-content: flex-start;
}

.dl-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.dl-detail-meta-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #999;
  text-align: left;
}

.dl-detail-meta-value {
  font-size: 0.75rem;
  color: #333;
  text-align: left;
}

.dl-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

/* ===== from pages/MessageApp/pages/DraftsPage.css ===== */
/* ============================================================
   Drafts Page — Two-panel Outlook-style layout
   ============================================================ */

.drafts-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Draft List (280px)
   ============================================================ */

.drafts-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.drafts-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.drafts-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.drafts-search:focus {
  border-color: #C2DE54;
}

/* Draft list scroll */
.drafts-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.drafts-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.drafts-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.drafts-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.drafts-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.drafts-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Draft item */
.drafts-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.drafts-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.drafts-email-item--internal.drafts-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.drafts-email-item--external.drafts-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.drafts-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.drafts-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.drafts-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Draft item content */
.drafts-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.drafts-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.drafts-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drafts-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.drafts-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.drafts-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.drafts-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.drafts-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Draft indicator tag — orange */
.drafts-tag--draft {
  color: #E65100;
  background: #FFF3E0;
  font-weight: 600;
}

.drafts-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.drafts-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.drafts-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.drafts-tag--attach img {
  filter: opacity(0.5);
}

.drafts-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* ============================================================
   CENTER PANEL — Editable Draft Compose Form
   ============================================================ */

.drafts-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.drafts-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Draft card */
.drafts-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Card header bar */
.drafts-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.drafts-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

/* ============================================================
   COMPOSE PANEL — inside draft card
   ============================================================ */

.drafts-compose-panel {
  padding: 1rem 1.5rem 1.5rem;
  text-align: left;
}

.drafts-compose-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.drafts-compose-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  min-width: 3.125rem;
  text-align: right;
}

.drafts-compose-tag-input {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: border-color 150ms ease;
  cursor: text;
}

.drafts-compose-tag-input:focus-within {
  border-color: #C2DE54;
}

.drafts-compose-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: #e8f5e0;
  color: #138B4C;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.drafts-compose-tag-remove {
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.drafts-compose-tag-remove:hover {
  opacity: 1;
}

.drafts-compose-tag--invalid {
  background: #FFF5F5;
  color: #C62828;
}

.drafts-compose-tag-remove--invalid {
  color: #C62828;
}

.drafts-compose-tag-field {
  flex: 1 1;
  min-width: 5rem;
  border: none;
  outline: none;
  font-size: 0.75rem;
  color: #333;
  padding: 0;
  height: 1.375rem;
}

.drafts-compose-input {
  flex: 1 1;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  color: #333;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.drafts-compose-input:focus {
  border-color: #C2DE54;
}

/* Editor wrapper — single border around toolbar + textarea */
.drafts-compose-editor-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms ease;
  margin-top: 0.25rem;
}

.drafts-compose-editor-wrap:focus-within {
  border-color: #C2DE54;
}

.drafts-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fafafa;
}

.drafts-toolbar-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.drafts-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #e0e0e0;
}

.drafts-toolbar-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: opacity(0.6);
}

.drafts-toolbar-btn:hover img {
  filter: opacity(0.9);
}

.drafts-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: #e0e0e0;
  margin: 0 0.25rem;
}

/* Compose text area (contentEditable div) */
.drafts-compose-textarea {
  width: 100%;
  min-height: 8.75rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #333;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-y: auto;
  text-align: left;
}

.drafts-compose-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

.drafts-compose-textarea p {
  margin: 0 0 0.5rem 0;
}

.drafts-compose-textarea ul,
.drafts-compose-textarea ol {
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
}

/* Actions row */
.drafts-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-bottom: 0.25rem;
  justify-content: flex-end;
}

.drafts-compose-actions .modal-btn {
  height: 2.125rem;
  min-width: auto;
  padding: 0 1rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
}

/* File remove button */
.drafts-compose-file-remove {
  background: none;
  border: none;
  font-size: 1rem;
  color: #999;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 150ms ease;
  flex-shrink: 0;
}

.drafts-compose-file-remove:hover {
  color: #c62828;
}

/* ============================================================
   ATTACHMENTS & LINKED DOCS sections
   ============================================================ */

.drafts-card-attachments {
  padding: 0 0 0.5rem;
  border-top: 1px solid #f0f0f0;
  margin-top: 0.75rem;
}

.drafts-card-linkeddocs {
  padding: 0 0 0.5rem;
  border-top: 1px solid #f0f0f0;
  margin-top: 0.75rem;
}

.drafts-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.drafts-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.drafts-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  transition: background 150ms ease;
}

.drafts-file-card:hover {
  background: #f0f0f0;
}

.drafts-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.drafts-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drafts-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

.drafts-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.drafts-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  transition: background 150ms ease;
}

.drafts-doc-card:hover {
  background: #e8f5e0;
}

.drafts-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.drafts-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.drafts-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

/* ============================================================
   TOAST
   ============================================================ */

.drafts-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: drafts-toast-in 300ms ease;
}

@keyframes drafts-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

.drafts-page--expanded {
  border-top: none;
}
.drafts-page--expanded .drafts-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ===== from pages/MessageApp/pages/FlaggedPage.css ===== */
/* ============================================================
   Flagged Page — Two-panel Outlook-style layout
   ============================================================ */

.flagged-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.flagged-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.flagged-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.flagged-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.flagged-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.flagged-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.flagged-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.flagged-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.flagged-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.flagged-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.flagged-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.flagged-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.flagged-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.flagged-email-item--internal.flagged-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.flagged-email-item--external.flagged-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.flagged-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flagged-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.flagged-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.flagged-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.flagged-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.flagged-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flagged-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.flagged-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.flagged-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.flagged-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.flagged-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.flagged-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.flagged-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.flagged-tag--flag {
  color: #C62828;
  background: #FFF5F5;
}

.flagged-tag--direction-sent {
  color: #0070C0;
  background: #E3F2FD;
}

.flagged-tag--direction-received {
  color: #555;
  background: #f0f0f0;
}

.flagged-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.flagged-tag--attach img {
  filter: opacity(0.5);
}

.flagged-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.flagged-tag--flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.flagged-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.flagged-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.flagged-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.flagged-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.flagged-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.flagged-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.flagged-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.flagged-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.flagged-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.flagged-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.flagged-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.flagged-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender/Recipient info */
.flagged-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.flagged-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.flagged-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.flagged-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flagged-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.flagged-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.flagged-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.flagged-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.flagged-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.flagged-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.flagged-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.flagged-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.flagged-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.flagged-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.flagged-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.flagged-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flagged-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.flagged-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flagged-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
  cursor: pointer;
  transition: background 150ms ease;
}

.flagged-action-btn:hover {
  background: #f5f5f5;
}

.flagged-action-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.flagged-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.flagged-icon-btn:hover {
  background: #f5f5f5;
}

.flagged-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.flagged-icon-btn--delete img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1500%) hue-rotate(340deg) brightness(90%) contrast(95%) opacity(0.7);
}

.flagged-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.flagged-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.flagged-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.flagged-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

/* Active action button */
.flagged-action-btn--active {
  background: #f0f8e8;
  border-color: #138B4C;
  color: #138B4C;
  font-weight: 600;
}

.flagged-action-btn--active img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toast */
.flagged-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: flagged-toast-in 300ms ease;
}

@keyframes flagged-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.flagged-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.flagged-card-body ul,
.flagged-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.flagged-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.flagged-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.flagged-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.flagged-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.flagged-file-card:hover {
  background: #f0f0f0;
}

.flagged-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.flagged-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flagged-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.flagged-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.flagged-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.flagged-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.flagged-doc-card:hover {
  background: #e8f5e0;
}

.flagged-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.flagged-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.flagged-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

/* ============================================================
   COMPOSE PANEL (inline reply/forward)
   ============================================================ */

.flagged-compose-panel {
  margin: 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
  text-align: left;
}

.flagged-compose-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.flagged-compose-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  min-width: 3.125rem;
  text-align: right;
}

.flagged-compose-tag-input {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: border-color 150ms ease;
  cursor: text;
}

.flagged-compose-tag-input:focus-within {
  border-color: #C2DE54;
}

.flagged-compose-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: #e8f5e0;
  color: #138B4C;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.flagged-compose-tag-remove {
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.flagged-compose-tag-remove:hover {
  opacity: 1;
}

.flagged-compose-tag--invalid {
  background: #FFF5F5;
  color: #C62828;
}

.flagged-compose-tag-remove--invalid {
  color: #C62828;
}

.flagged-compose-tag-field {
  flex: 1 1;
  min-width: 5rem;
  border: none;
  outline: none;
  font-size: 0.75rem;
  color: #333;
  padding: 0;
  height: 1.375rem;
}

.flagged-compose-input {
  flex: 1 1;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  color: #333;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.flagged-compose-input:focus {
  border-color: #C2DE54;
}

.flagged-compose-input--subject {
  background: #fafafa;
  color: #666;
}

/* Editor wrapper */
.flagged-compose-editor-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.flagged-compose-editor-wrap:focus-within {
  border-color: #C2DE54;
}

.flagged-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fafafa;
}

.flagged-toolbar-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.flagged-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #e0e0e0;
}

.flagged-toolbar-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: opacity(0.6);
}

.flagged-toolbar-btn:hover img {
  filter: opacity(0.9);
}

.flagged-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: #e0e0e0;
  margin: 0 0.25rem;
}

/* Compose text area */
.flagged-compose-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #333;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-y: auto;
  text-align: left;
}

.flagged-compose-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

.flagged-compose-quoted {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #138B4C;
  background: #fafafa;
  border-radius: 0 0.25rem 0.25rem 0;
}

.flagged-compose-quoted-header {
  font-size: 0.6875rem;
  color: #999;
  font-style: italic;
  margin-bottom: 0.5rem;
  text-align: left;
}

.flagged-compose-quoted-body {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.6;
  font-style: italic;
  text-align: left;
}

.flagged-compose-quoted-body p {
  margin: 0 0 0.5rem 0;
}

.flagged-compose-quoted-body ul,
.flagged-compose-quoted-body ol {
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.flagged-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-bottom: 1rem;
  justify-content: flex-end;
}

.flagged-compose-actions .modal-btn {
  height: 2.125rem;
  min-width: auto;
  padding: 0 1rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
}

.flagged-compose-file-remove {
  background: none;
  border: none;
  font-size: 1rem;
  color: #999;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 150ms ease;
}

.flagged-compose-file-remove:hover {
  color: #c62828;
}

/* ============================================================
   THREAD ITEMS
   ============================================================ */

.flagged-thread-item {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.flagged-thread-item:hover {
  background: #fafafa;
}

.flagged-thread-avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flagged-thread-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.flagged-thread-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.flagged-thread-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
}

.flagged-thread-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.flagged-thread-preview {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.flagged-thread-meta {
  margin-top: 2px;
  text-align: left;
}

.flagged-thread-meta-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
}

.flagged-thread-meta-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
}

.flagged-thread-meta-tocc {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #666;
}

.flagged-thread-meta-tocc div + div {
  margin-top: 2px;
}

.flagged-thread-meta-label {
  font-weight: 600;
  color: #888;
}

.flagged-thread-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0.75rem -1rem 0;
}

.flagged-thread-body {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.flagged-thread-body ul,
.flagged-thread-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.flagged-thread-item--expanded .flagged-thread-preview {
  display: none;
}

.flagged-thread-item--expanded {
  align-items: flex-start;
  flex-wrap: wrap;
}

.flagged-thread-divider,
.flagged-thread-item--expanded > .flagged-thread-body {
  width: 100%;
}

.flagged-thread-toggle--expanded img {
  transform: rotate(180deg);
}

.flagged-thread-toggle {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.flagged-thread-toggle img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.4);
}

.flagged-page--expanded {
  border-top: none;
}
.flagged-page--expanded .flagged-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ===== from pages/MessageApp/pages/InboxPage.css ===== */
/* ============================================================
   Inbox Page — Two-panel Outlook-style layout
   ============================================================ */

.inbox-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

.inbox-page--expanded {
  border-top: none;
}

.inbox-page--expanded .inbox-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.inbox-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.inbox-compose-wrap {
  padding: 0.625rem 0.75rem 0.375rem;
  flex-shrink: 0;
}

.inbox-compose-btn {
  width: 100%;
  height: 2.125rem;
  background: linear-gradient(135deg, #0070C0, #00B050);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: opacity 150ms ease;
}

.inbox-compose-btn:hover {
  opacity: 0.9;
}

.inbox-compose-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) invert(1);
}

.inbox-search-wrap {
  padding: 0.375rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.inbox-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.inbox-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.inbox-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.inbox-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.inbox-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.inbox-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.inbox-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.inbox-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.inbox-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.inbox-email-item:hover {
  background: #fafafa;
}

.inbox-email-item--internal.inbox-email-item--unread {
  border-left-color: #138B4C;
}

.inbox-email-item--external.inbox-email-item--unread {
  border-left-color: #E65100;
}

/* Internal active — light green (same as Chat) */
.inbox-email-item--internal.inbox-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange (same as Chat) */
.inbox-email-item--external.inbox-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.inbox-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  overflow: hidden;
  font-weight: 700;
  flex-shrink: 0;
}

.inbox-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.inbox-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.inbox-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.inbox-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.inbox-email-name--unread {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-email-name--read {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.inbox-email-subject--unread {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.inbox-email-subject--read {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.inbox-email-preview--unread {
  font-size: 0.6875rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.inbox-email-preview--read {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.inbox-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.inbox-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.inbox-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.inbox-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.inbox-tag--urgent {
  color: #E65100;
  background: #FFF3E0;
}

.inbox-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.inbox-tag--attach img {
  filter: opacity(0.5);
}

.inbox-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.inbox-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.inbox-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.inbox-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.inbox-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.inbox-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.inbox-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.inbox-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.inbox-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.inbox-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.inbox-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.inbox-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.inbox-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender info */
.inbox-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.inbox-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.inbox-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.inbox-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  overflow: hidden;
  font-weight: 700;
  flex-shrink: 0;
}

.inbox-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.inbox-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.inbox-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.inbox-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.inbox-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.inbox-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.inbox-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.inbox-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.inbox-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.inbox-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.inbox-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.inbox-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inbox-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.inbox-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.inbox-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-action-btn:hover {
  background: #f5f5f5;
}

.inbox-action-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.inbox-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-icon-btn:hover {
  background: #f5f5f5;
}

.inbox-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.inbox-icon-btn--delete img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1500%) hue-rotate(340deg) brightness(90%) contrast(95%) opacity(0.7);
}

.inbox-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.inbox-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.inbox-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.inbox-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* Active action button */
.inbox-action-btn--active {
  background: #f0f8e8;
  border-color: #138B4C;
  color: #138B4C;
  font-weight: 600;
}

.inbox-action-btn--active img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* ============================================================
   COMPOSE PANEL (inline reply/forward)
   ============================================================ */

.inbox-compose-panel {
  margin: 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
  text-align: left;
}

.inbox-compose-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.inbox-compose-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  min-width: 3.125rem;
  text-align: right;
}

.inbox-compose-tag-input {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: border-color 150ms ease;
  cursor: text;
}

.inbox-compose-tag-input:focus-within {
  border-color: #C2DE54;
}

.inbox-compose-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: #e8f5e0;
  color: #138B4C;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.inbox-compose-tag-remove {
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.inbox-compose-tag-remove:hover {
  opacity: 1;
}

.inbox-compose-tag--invalid {
  background: #FFF5F5;
  color: #C62828;
}

.inbox-compose-tag-remove--invalid {
  color: #C62828;
}

.inbox-compose-tag-field {
  flex: 1 1;
  min-width: 5rem;
  border: none;
  outline: none;
  font-size: 0.75rem;
  color: #333;
  padding: 0;
  height: 1.375rem;
}

.inbox-compose-input {
  flex: 1 1;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  color: #333;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.inbox-compose-input:focus {
  border-color: #C2DE54;
}

.inbox-compose-input--subject {
  background: #fafafa;
  color: #666;
}

/* Formatting toolbar */
/* Editor wrapper — single border around toolbar + textarea */
.inbox-compose-editor-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.inbox-compose-editor-wrap:focus-within {
  border-color: #C2DE54;
}

.inbox-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fafafa;
}

.inbox-toolbar-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.inbox-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #e0e0e0;
}

.inbox-toolbar-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: opacity(0.6);
}

.inbox-toolbar-btn:hover img {
  filter: opacity(0.9);
}

.inbox-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: #e0e0e0;
  margin: 0 0.25rem;
}

/* Compose text area (contentEditable div) */
.inbox-compose-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #333;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-y: auto;
  text-align: left;
}

.inbox-compose-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}


.inbox-compose-quoted {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #138B4C;
  background: #fafafa;
  border-radius: 0 0.25rem 0.25rem 0;
}

.inbox-compose-quoted-header {
  font-size: 0.6875rem;
  color: #999;
  font-style: italic;
  margin-bottom: 0.5rem;
  text-align: left;
}

.inbox-compose-quoted-body {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.6;
  font-style: italic;
  text-align: left;
}

.inbox-compose-quoted-body p {
  margin: 0 0 0.5rem 0;
}

.inbox-compose-quoted-body ul,
.inbox-compose-quoted-body ol {
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.inbox-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-bottom: 1rem;
  justify-content: flex-end;
}

.inbox-compose-actions .modal-btn {
  height: 2.125rem;
  min-width: auto;
  padding: 0 1rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
}

.inbox-compose-send {
  height: 2.125rem;
  padding: 0 1.5rem;
  background: linear-gradient(135deg, #0070C0, #00B050);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.inbox-compose-send:hover {
  opacity: 0.9;
}

.inbox-compose-discard {
  height: 2.125rem;
  padding: 0 1rem;
  background: #fff;
  color: #666;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-compose-discard:hover {
  background: #f5f5f5;
}

/* Toast */
.inbox-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: inbox-toast-in 300ms ease;
}

@keyframes inbox-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.inbox-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.inbox-card-body ul,
.inbox-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.inbox-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.inbox-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.inbox-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.inbox-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-file-card:hover {
  background: #f0f0f0;
}

.inbox-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.inbox-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.inbox-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.inbox-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.inbox-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-doc-card:hover {
  background: #e8f5e0;
}

.inbox-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.inbox-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.inbox-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

/* Thread items */
.inbox-thread-item {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.inbox-thread-item:hover {
  background: #fafafa;
}

.inbox-thread-avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  overflow: hidden;
  font-weight: 700;
  flex-shrink: 0;
}

.inbox-thread-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.inbox-thread-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.inbox-thread-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
}

.inbox-thread-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.inbox-thread-preview {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.inbox-thread-meta {
  margin-top: 2px;
  text-align: left;
}

.inbox-thread-meta-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
}

.inbox-thread-meta-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
}

.inbox-thread-meta-tocc {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #666;
}

.inbox-thread-meta-tocc div + div {
  margin-top: 2px;
}

.inbox-thread-meta-label {
  font-weight: 600;
  color: #888;
}

.inbox-thread-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0.75rem -1rem 0;
}

.inbox-thread-body {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.inbox-thread-body ul,
.inbox-thread-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.inbox-thread-item--expanded .inbox-thread-preview {
  display: none;
}

.inbox-thread-item--expanded {
  align-items: flex-start;
  flex-wrap: wrap;
}

.inbox-thread-divider,
.inbox-thread-item--expanded > .inbox-thread-body {
  width: 100%;
}

.inbox-thread-toggle--expanded img {
  transform: rotate(180deg);
}

.inbox-thread-toggle {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.inbox-thread-toggle img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.4);
}

/* ============================================================
   COMPOSE ATTACHMENTS & LINKED DOCUMENTS
   ============================================================ */

.inbox-compose-attachments {
  margin-top: 0.75rem;
  text-align: left;
}

.inbox-compose-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inbox-compose-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.25rem;
  border: 1px solid #e8e8e8;
}

.inbox-compose-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: opacity(0.6);
}

.inbox-compose-file-info {
  flex: 1 1;
  min-width: 0;
}

.inbox-compose-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.inbox-compose-file-size {
  font-size: 0.625rem;
  color: #999;
  text-align: left;
}

.inbox-compose-file-remove {
  background: none;
  border: none;
  font-size: 1rem;
  color: #999;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 150ms ease;
}

.inbox-compose-file-remove:hover {
  color: #c62828;
}

/* Compose linked documents */
.inbox-compose-linked-doc {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  background: rgba(19, 139, 76, 0.06);
  border-radius: 0.25rem;
  border: 1px solid rgba(19, 139, 76, 0.12);
}

.inbox-compose-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.inbox-compose-doc-info {
  flex: 1 1;
  min-width: 0;
}

.inbox-compose-doc-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: #138B4C;
  text-align: left;
}

.inbox-compose-doc-summary {
  font-size: 0.625rem;
  color: #666;
  text-align: left;
}

/* ===== from pages/MessageApp/pages/LoungePage.css ===== */
/* Lounge — center panel content */
.lounge-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  scrollbar-width: none;
}
.lounge-content::-webkit-scrollbar { width: 0; }

.notif-page--expanded .lounge-content {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* Original post card */
.lounge-post-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.lounge-post-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.lounge-post-avatar {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lounge-post-author {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.lounge-post-meta {
  font-size: 0.6875rem;
  color: #999;
  text-align: left;
}

.lounge-post-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  text-transform: capitalize;
  margin-left: auto;
  flex-shrink: 0;
}

.lounge-post-body {
  font-size: 0.8125rem;
  color: #333;
  line-height: 1.7;
  white-space: pre-line;
  text-align: left;
}

.lounge-post-date {
  font-size: 0.6875rem;
  color: #bbb;
  margin-top: 0.75rem;
  text-align: left;
}

/* Comments section */
.lounge-comments-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.75rem;
  text-align: left;
}

/* Divider between post and comments */
.lounge-divider {
  border-top: 1px solid #e0e0e0;
  margin: 1rem 0;
}

/* Individual comment */
.lounge-comment {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.lounge-comment:last-child { border-bottom: none; }

.lounge-comment-avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lounge-comment-body {
  flex: 1 1;
  min-width: 0;
}

.lounge-comment-header {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.lounge-comment-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #222;
}

.lounge-comment-role {
  font-size: 0.625rem;
  color: #999;
}

.lounge-comment-time {
  font-size: 0.625rem;
  color: #bbb;
  margin-left: auto;
}

.lounge-comment-text {
  font-size: 0.75rem;
  color: #444;
  line-height: 1.6;
  text-align: left;
}

.lounge-comment-emoji {
  font-size: 2rem;
  line-height: 1.2;
}

.lounge-comment-sticker {
  font-size: 1.125rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  display: inline-block;
  font-weight: 700;
  color: #333;
}

/* Reactions */
.lounge-reactions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
  flex-wrap: wrap;
}

.lounge-reaction {
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.75rem;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  color: #555;
  cursor: pointer;
  transition: all 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
}

.lounge-reaction:hover { background: #eee; }

.lounge-reaction--active {
  background: #EDF5EC;
  border-color: #A5D6A7;
  color: #138B4C;
}

/* Comment input area */
/* Comment input row — uses all-chats-plus-btn and all-chats-send-btn from Chat */
.lounge-input-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.lounge-textarea {
  flex: 1 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  color: #333;
  box-sizing: border-box;
  resize: none;
  line-height: 1.5;
}

.lounge-textarea:focus { border-color: #C2DE54; }


/* ===== from pages/MessageApp/pages/NotificationPage.css ===== */
/* ============================================================
   Notification Page — Three-panel layout (same as Chat)
   ============================================================ */

.notif-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

.notif-page--expanded {
  border-top: none;
}

.notif-page--expanded .notif-center-panel {
  border-left: none;
}

.notif-page--expanded .notif-center-content {
  padding-left: 15%;
  padding-right: 15%;
}

/* ============================================================
   LEFT PANEL — Notification List (280px)
   ============================================================ */

.notif-left-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.notif-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  height: 3.5rem;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.notif-tab {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #999;
  font-weight: 500;
  transition: color 150ms ease, border-color 150ms ease;
}

.notif-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
  font-weight: 700;
}

.notif-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.notif-list-scroll::-webkit-scrollbar { width: 0; }

.notif-search-wrap {
  padding: 0.625rem 0.75rem;
}

.notif-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.notif-search:focus { border-color: #C2DE54; }

/* Section headers */
.notif-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.notif-section-header--today { background: #F0F5FF; color: #1565C0; }
.notif-section-header--yesterday { background: #F5F5F5; color: #666; }
.notif-section-header--earlier { background: #F5F5F5; color: #999; }

/* Notification item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms ease;
  border-bottom: 1px solid #f0f0f0;
}

.notif-item:hover { background: #fafafa; }
.notif-item--active { background: #F5FBF0; }
.notif-item--unread { font-weight: 500; }

/* Avatar */
.notif-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-avatar-icon { width: 1rem; height: 1rem; }

.notif-avatar--approval { background: #C2DE54; }
.notif-avatar--approval .notif-avatar-icon { filter: brightness(0) invert(1); }

.notif-avatar--mention { background: #2196F3; }
.notif-avatar--mention .notif-avatar-icon { filter: brightness(0) invert(1); }

.notif-avatar--system { background: #F5B041; }
.notif-avatar--system .notif-avatar-icon { filter: brightness(0) invert(1); }

.notif-avatar--document { background: #C2DE54; }
.notif-avatar--document .notif-avatar-icon { filter: brightness(0) invert(1); }

.notif-info { flex: 1 1; min-width: 0; text-align: left; }
.notif-name-row { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; }
.notif-name { font-size: 0.8125rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.notif-time { font-size: 0.6875rem; color: #999; white-space: nowrap; flex-shrink: 0; }
.notif-sub { font-size: 0.6875rem; color: #999; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin-top: 2px; }
.notif-preview { font-size: 0.75rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1; min-width: 0; }
.notif-unread-dot { width: 0.5rem; height: 0.5rem; background: #138B4C; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   CENTER PANEL — Notification Detail
   ============================================================ */

.notif-center-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.notif-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 3.5rem;
  min-height: 3.5rem;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
  background: #fff;
  box-sizing: border-box;
}

.notif-center-header-left { display: flex; align-items: center; gap: 0.625rem; }

.notif-center-avatar {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-center-avatar-icon { width: 1.125rem; height: 1.125rem; }
.notif-center-avatar.notif-avatar--approval .notif-center-avatar-icon { filter: brightness(0) invert(1); }
.notif-center-avatar.notif-avatar--mention .notif-center-avatar-icon { filter: brightness(0) invert(1); }
.notif-center-avatar.notif-avatar--system .notif-center-avatar-icon { filter: brightness(0) invert(1); }
.notif-center-avatar.notif-avatar--document .notif-center-avatar-icon { filter: brightness(0) invert(1); }

.notif-center-name { font-size: 0.875rem; font-weight: 600; color: #222; text-align: left; }
.notif-center-status { font-size: 0.6875rem; color: #999; text-align: left; }

.notif-center-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.notif-center-content::-webkit-scrollbar { width: 0; }

/* Detail card */
.notif-detail-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 1.25rem 1.5rem;
  width: 100%;
}

.notif-detail-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

.notif-detail-badge--approval { background: #C2DE54; color: #333; }
.notif-detail-badge--mention { background: #E3F2FD; color: #1565C0; }
.notif-detail-badge--system { background: #F5B041; color: #fff; }
.notif-detail-badge--document { background: #C2DE54; color: #333; }

.notif-detail-title { font-size: 1rem; font-weight: 700; color: #222; margin-bottom: 0.5rem; }
.notif-detail-message { font-size: 0.8125rem; color: #555; line-height: 1.6; margin-bottom: 1rem; white-space: pre-line; }
.notif-detail-meta { font-size: 0.6875rem; color: #999; margin-bottom: 1rem; display: flex; gap: 1rem; }

.notif-detail-doc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: background 150ms ease;
  width: -webkit-fit-content;
  width: fit-content;
}

.notif-detail-doc:hover { background: #eaeaea; }

.notif-detail-doc-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.notif-detail-doc-type { font-size: 0.6875rem; color: #777; }
.notif-detail-doc-number { font-size: 0.75rem; font-weight: 700; color: #138B4C; }

.notif-detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.notif-detail-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 150ms ease;
}

.notif-detail-btn--approve { background: #138B4C; color: #fff; }
.notif-detail-btn--approve:hover { background: #0D6B3A; }
.notif-detail-btn--reject { background: #fff; color: #C62828; border: 1px solid #C62828; }
.notif-detail-btn--reject:hover { background: #FFF5F5; }

.notif-detail-timestamp { font-size: 0.6875rem; color: #bbb; margin-top: 1rem; }

/* No reply footer */
.notif-no-reply {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  color: #999;
}

/* ============================================================
   RIGHT PANEL — Related Document (320px)
   ============================================================ */

.notif-right-panel {
  width: 20rem;
  min-width: 20rem;
  border-left: 1px solid #e0e0e0;
  background: #fff;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: none;
}

.notif-right-panel::-webkit-scrollbar { width: 0; }

.notif-right-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.75rem;
  text-align: left;
}

.notif-right-link {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
}

.notif-right-link:hover { text-decoration: underline; }

/* ===== from pages/MessageApp/pages/SentPage.css ===== */
/* ============================================================
   Sent Page — Two-panel Outlook-style layout
   ============================================================ */

.sent-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.sent-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.sent-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.sent-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.sent-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.sent-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.sent-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.sent-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.sent-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.sent-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.sent-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.sent-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.sent-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.sent-email-item--internal.sent-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.sent-email-item--external.sent-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.sent-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sent-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.sent-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.sent-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.sent-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.sent-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sent-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.sent-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sent-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.sent-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.sent-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.sent-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.sent-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.sent-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.sent-tag--attach img {
  filter: opacity(0.5);
}

.sent-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.sent-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.sent-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.sent-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.sent-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.sent-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.sent-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.sent-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.sent-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.sent-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.sent-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.sent-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sent-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender/Recipient info */
.sent-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.sent-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.sent-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sent-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sent-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.sent-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.sent-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.sent-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.sent-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.sent-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.sent-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.sent-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.sent-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.sent-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.sent-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.sent-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sent-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sent-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sent-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
  cursor: pointer;
  transition: background 150ms ease;
}

.sent-action-btn:hover {
  background: #f5f5f5;
}

.sent-action-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.sent-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.sent-icon-btn:hover {
  background: #f5f5f5;
}

.sent-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.sent-icon-btn--delete img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1500%) hue-rotate(340deg) brightness(90%) contrast(95%) opacity(0.7);
}

.sent-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.sent-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.sent-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.sent-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* Toast */
.sent-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: sent-toast-in 300ms ease;
}

@keyframes sent-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.sent-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.sent-card-body ul,
.sent-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.sent-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.sent-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.sent-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sent-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.sent-file-card:hover {
  background: #f0f0f0;
}

.sent-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.sent-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sent-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.sent-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.sent-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sent-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.sent-doc-card:hover {
  background: #e8f5e0;
}

.sent-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sent-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.sent-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

.sent-page--expanded {
  border-top: none;
}
.sent-page--expanded .sent-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ===== from pages/MessageApp/pages/StarredPage.css ===== */
/* ============================================================
   Starred Page — Two-panel Outlook-style layout
   ============================================================ */

.starred-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.starred-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.starred-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.starred-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.starred-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.starred-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.starred-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.starred-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.starred-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.starred-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.starred-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.starred-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.starred-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.starred-email-item--internal.starred-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.starred-email-item--external.starred-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.starred-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.starred-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.starred-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.starred-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.starred-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.starred-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.starred-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.starred-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.starred-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.starred-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.starred-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.starred-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.starred-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.starred-tag--star {
  color: #B8860B;
  background: #FFFDE7;
}

.starred-tag--direction-sent {
  color: #0070C0;
  background: #E3F2FD;
}

.starred-tag--direction-received {
  color: #555;
  background: #f0f0f0;
}

.starred-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.starred-tag--attach img {
  filter: opacity(0.5);
}

.starred-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.starred-tag--star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.starred-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.starred-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.starred-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.starred-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.starred-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.starred-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.starred-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.starred-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.starred-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.starred-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.starred-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.starred-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender/Recipient info */
.starred-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.starred-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.starred-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.starred-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.starred-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.starred-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.starred-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.starred-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.starred-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.starred-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.starred-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.starred-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.starred-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.starred-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.starred-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.starred-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.starred-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.starred-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.starred-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
  cursor: pointer;
  transition: background 150ms ease;
}

.starred-action-btn:hover {
  background: #f5f5f5;
}

.starred-action-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.starred-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.starred-icon-btn:hover {
  background: #f5f5f5;
}

.starred-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

.starred-icon-btn--delete img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1500%) hue-rotate(340deg) brightness(90%) contrast(95%) opacity(0.7);
}

.starred-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.starred-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.starred-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.starred-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* Active action button */
.starred-action-btn--active {
  background: #f0f8e8;
  border-color: #138B4C;
  color: #138B4C;
  font-weight: 600;
}

.starred-action-btn--active img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toast */
.starred-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: starred-toast-in 300ms ease;
}

@keyframes starred-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.starred-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.starred-card-body ul,
.starred-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.starred-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.starred-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.starred-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.starred-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.starred-file-card:hover {
  background: #f0f0f0;
}

.starred-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.starred-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.starred-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.starred-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.starred-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.starred-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.starred-doc-card:hover {
  background: #e8f5e0;
}

.starred-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.starred-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.starred-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

/* ============================================================
   COMPOSE PANEL (inline reply/forward)
   ============================================================ */

.starred-compose-panel {
  margin: 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
  text-align: left;
}

.starred-compose-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.starred-compose-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  min-width: 3.125rem;
  text-align: right;
}

.starred-compose-tag-input {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: border-color 150ms ease;
  cursor: text;
}

.starred-compose-tag-input:focus-within {
  border-color: #C2DE54;
}

.starred-compose-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: #e8f5e0;
  color: #138B4C;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.starred-compose-tag-remove {
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.starred-compose-tag-remove:hover {
  opacity: 1;
}

.starred-compose-tag--invalid {
  background: #FFF5F5;
  color: #C62828;
}

.starred-compose-tag-remove--invalid {
  color: #C62828;
}

.starred-compose-tag-field {
  flex: 1 1;
  min-width: 5rem;
  border: none;
  outline: none;
  font-size: 0.75rem;
  color: #333;
  padding: 0;
  height: 1.375rem;
}

.starred-compose-input {
  flex: 1 1;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  color: #333;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.starred-compose-input:focus {
  border-color: #C2DE54;
}

.starred-compose-input--subject {
  background: #fafafa;
  color: #666;
}

/* Editor wrapper */
.starred-compose-editor-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.starred-compose-editor-wrap:focus-within {
  border-color: #C2DE54;
}

.starred-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fafafa;
}

.starred-toolbar-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.starred-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #e0e0e0;
}

.starred-toolbar-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: opacity(0.6);
}

.starred-toolbar-btn:hover img {
  filter: opacity(0.9);
}

.starred-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: #e0e0e0;
  margin: 0 0.25rem;
}

/* Compose text area */
.starred-compose-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #333;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-y: auto;
  text-align: left;
}

.starred-compose-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

.starred-compose-quoted {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #138B4C;
  background: #fafafa;
  border-radius: 0 0.25rem 0.25rem 0;
}

.starred-compose-quoted-header {
  font-size: 0.6875rem;
  color: #999;
  font-style: italic;
  margin-bottom: 0.5rem;
  text-align: left;
}

.starred-compose-quoted-body {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.6;
  font-style: italic;
  text-align: left;
}

.starred-compose-quoted-body p {
  margin: 0 0 0.5rem 0;
}

.starred-compose-quoted-body ul,
.starred-compose-quoted-body ol {
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.starred-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-bottom: 1rem;
  justify-content: flex-end;
}

.starred-compose-actions .modal-btn {
  height: 2.125rem;
  min-width: auto;
  padding: 0 1rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
}

.starred-compose-file-remove {
  background: none;
  border: none;
  font-size: 1rem;
  color: #999;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 150ms ease;
}

.starred-compose-file-remove:hover {
  color: #c62828;
}

/* ============================================================
   THREAD ITEMS
   ============================================================ */

.starred-thread-item {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.starred-thread-item:hover {
  background: #fafafa;
}

.starred-thread-avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.starred-thread-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.starred-thread-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.starred-thread-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #333;
}

.starred-thread-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.starred-thread-preview {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.starred-thread-meta {
  margin-top: 2px;
  text-align: left;
}

.starred-thread-meta-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
}

.starred-thread-meta-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
}

.starred-thread-meta-tocc {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #666;
}

.starred-thread-meta-tocc div + div {
  margin-top: 2px;
}

.starred-thread-meta-label {
  font-weight: 600;
  color: #888;
}

.starred-thread-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0.75rem -1rem 0;
}

.starred-thread-body {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.starred-thread-body ul,
.starred-thread-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

.starred-thread-item--expanded .starred-thread-preview {
  display: none;
}

.starred-thread-item--expanded {
  align-items: flex-start;
  flex-wrap: wrap;
}

.starred-thread-divider,
.starred-thread-item--expanded > .starred-thread-body {
  width: 100%;
}

.starred-thread-toggle--expanded img {
  transform: rotate(180deg);
}

.starred-thread-toggle {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.starred-thread-toggle img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.4);
}

.starred-page--expanded {
  border-top: none;
}
.starred-page--expanded .starred-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ===== from pages/MessageApp/pages/TrashPage.css ===== */
/* ============================================================
   Trash Page — Two-panel Outlook-style layout
   ============================================================ */

.trash-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

.trash-page--expanded {
  border-top: none;
}

.trash-page--expanded .trash-reading-panel {
  border-left: none;
  padding-left: 15%;
  padding-right: 15%;
}

/* ============================================================
   LEFT PANEL — Email List (280px)
   ============================================================ */

.trash-list-panel {
  width: 17.5rem;
  min-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.trash-search-wrap {
  padding: 0.625rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.trash-search {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  outline: none;
  box-sizing: border-box;
  color: #333;
  transition: border-color 150ms ease;
}

.trash-search:focus {
  border-color: #C2DE54;
}

/* Email list scroll */
.trash-list-scroll {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  scrollbar-width: none;
}

.trash-list-scroll::-webkit-scrollbar {
  width: 0;
}

/* Section headers */
.trash-section-header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.trash-section-header--today {
  background: #F0F5FF;
  color: #1565C0;
}

.trash-section-header--yesterday {
  background: #F5F5F5;
  color: #666;
}

.trash-section-header--earlier {
  background: #F5F5F5;
  color: #999;
}

/* Email item */
.trash-email-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}

.trash-email-item:hover {
  background: #fafafa;
}

/* Internal active — light green */
.trash-email-item--internal.trash-email-item--active {
  background: #F5FBF0;
  border-left-color: transparent;
}

/* External active — light orange */
.trash-email-item--external.trash-email-item--active {
  background: #FFF9F2;
  border-left-color: transparent;
}

/* Avatar */
.trash-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.trash-avatar--internal {
  background: #C2DE54;
  color: #333;
}

.trash-avatar--external {
  background: #F5B041;
  color: #fff;
}

/* Email item content */
.trash-email-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.trash-email-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.trash-email-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trash-email-time {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.trash-email-subject {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.trash-email-preview {
  font-size: 0.6875rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Tags row */
.trash-email-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.trash-tag {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  padding: 1px 0.3125rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Deleted tag — red */
.trash-tag--deleted {
  color: #C62828;
  background: #FFF5F5;
  border: 1px solid #FFCDD2;
}

.trash-tag--sent {
  color: #1565C0;
  background: #E3F2FD;
}

.trash-tag--received {
  color: #6A1B9A;
  background: #F3E5F5;
}

.trash-tag--attach {
  color: #999;
  background: #f0f0f0;
}

.trash-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.trash-tag img {
  width: 0.5625rem;
  height: 0.5625rem;
  flex-shrink: 0;
}

.trash-tag--attach img {
  filter: opacity(0.5);
}

.trash-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* ============================================================
   CENTER PANEL — Reading Pane
   ============================================================ */

.trash-reading-panel {
  flex: 1 1;
  overflow-y: auto;
  background-color: #fff6ec;
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem;
  scrollbar-width: none;
}

.trash-reading-panel::-webkit-scrollbar {
  width: 0;
}

/* Email card */
.trash-email-card {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Subject bar */
.trash-card-subject-bar {
  padding: 1.25rem 1.5rem 0.75rem;
}

.trash-card-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
  text-align: left;
}

.trash-card-subject-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.trash-card-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

.trash-card-tag--doc {
  color: #138B4C;
  background: #e8f5e0;
}

.trash-card-tag--attach {
  color: #777;
  background: #f0f0f0;
}

.trash-card-tag img {
  width: 0.6875rem;
  height: 0.6875rem;
}

.trash-card-tag--doc img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.trash-card-tag--attach img {
  filter: opacity(0.5);
}

/* Sender/Recipient info */
.trash-card-sender {
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.trash-sender-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.trash-sender-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.trash-sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.trash-sender-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.trash-sender-email {
  font-size: 0.75rem;
  color: #138B4C;
  margin-top: 1px;
  text-align: left;
}

.trash-sender-role {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 1px;
  text-align: left;
}

.trash-card-date {
  font-size: 0.6875rem;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
  text-align: right;
}

.trash-card-date-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.trash-indicator {
  width: 0.875rem;
  height: 0.875rem;
}

.trash-indicator--star {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.trash-indicator--flag {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

.trash-to-cc {
  margin-top: 0.375rem;
  margin-left: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-align: left;
}

.trash-to-cc-row {
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.trash-to-cc-label {
  font-weight: 600;
  color: #888;
}

/* Action buttons */
.trash-card-actions {
  margin: 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trash-action-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.trash-action-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.trash-icon-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.trash-icon-btn:hover {
  background: #f5f5f5;
}

.trash-icon-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: opacity(0.6);
}

/* Restore button — wider to fit text */
.trash-icon-btn--restore {
  width: auto;
  padding: 0 0.625rem;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: #444;
  font-family: inherit;
}

.trash-icon-btn--restore img {
  filter: opacity(0.6);
}

.trash-icon-btn--restore:hover {
  background: #f0f5ff;
  border-color: #90CAF9;
  color: #1565C0;
}

.trash-icon-btn--restore:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(1500%) hue-rotate(200deg) brightness(90%) contrast(95%);
}

/* Delete Permanently button — wider text, red styling */
.trash-icon-btn--delete-permanently {
  width: auto;
  padding: 0 0.625rem;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: #C62828;
  font-family: inherit;
  border-color: #FFCDD2;
}

.trash-icon-btn--delete-permanently img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(90%) saturate(2000%) hue-rotate(349deg) brightness(85%) contrast(100%) opacity(0.8);
}

.trash-icon-btn--delete-permanently:hover {
  background: #FFF5F5;
  border-color: #EF9A9A;
  color: #B71C1C;
}

.trash-icon-btn--delete-permanently:hover img {
  filter: brightness(0) saturate(100%) invert(10%) sepia(90%) saturate(3000%) hue-rotate(349deg) brightness(80%) contrast(100%);
}

.trash-icon-btn--active-star {
  background: #FFFDE7;
  border-color: #FDD835;
}

.trash-icon-btn--active-star img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
}

.trash-icon-btn--active-flag {
  background: #FFF5F5;
  border-color: #EF5350;
}

.trash-icon-btn--active-flag img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(3000%) hue-rotate(349deg) brightness(85%) contrast(100%);
}

/* Toast */
.trash-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #138B4C;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: trash-toast-in 300ms ease;
}

@keyframes trash-toast-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Email body */
.trash-card-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: #444;
  line-height: 1.8;
  text-align: left;
}

.trash-card-body ul,
.trash-card-body ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  list-style-position: inside;
}

/* Attachments section */
.trash-card-attachments {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.trash-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: left;
}

.trash-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.trash-file-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f8;
  border-radius: 0.375rem;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 150ms ease;
}

.trash-file-card:hover {
  background: #f0f0f0;
}

.trash-file-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(1500%) hue-rotate(206deg) brightness(90%) contrast(95%) opacity(0.7);
}

.trash-file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trash-file-size {
  font-size: 0.6875rem;
  color: #999;
  flex-shrink: 0;
}

/* Linked docs section */
.trash-card-linkeddocs {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
}

.trash-doc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.trash-doc-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: #f8fff4;
  border-radius: 0.375rem;
  border: 1px solid #d4edda;
  cursor: pointer;
  transition: background 150ms ease;
}

.trash-doc-card:hover {
  background: #e8f5e0;
}

.trash-doc-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.trash-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #138B4C;
}

.trash-doc-summary {
  font-size: 0.6875rem;
  color: #555;
  flex: 1 1;
}

/* ===== from pages/NetworkApp/NetworkApp.css ===== */
.network-app-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.network-search-input::placeholder {
  color: #CCCCCC;
  opacity: 1;
}

/* ===== from pages/Sales/Activity/Activity.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.activity-tracker-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.activity-tracker-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.activity-tracker-header {
  margin-bottom: 0;
}

.activity-tracker-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.activity-tracker-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.activity-tracker-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.activity-tracker-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.activity-tracker-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.activity-tracker-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.activity-tracker-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.activity-tracker-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.activity-tracker-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.activity-tracker-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.activity-tracker-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.activity-tracker-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.activity-tracker-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.activity-tracker-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.activity-tracker-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.activity-tracker-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.activity-tracker-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.activity-tracker-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.activity-tracker-layout-dropdown-item:last-child {
  border-bottom: none;
}

.activity-tracker-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.activity-tracker-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.activity-tracker-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.activity-tracker-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.activity-tracker-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.activity-tracker-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.activity-tracker-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.activity-tracker-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity-tracker-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.activity-tracker-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.activity-tracker-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.activity-tracker-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.activity-tracker-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.activity-tracker-filter-parameter-wrapper {
  position: relative;
}

.activity-tracker-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.activity-tracker-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.activity-tracker-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.activity-tracker-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.activity-tracker-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.activity-tracker-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.activity-tracker-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.activity-tracker-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.activity-tracker-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.activity-tracker-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.activity-tracker-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.activity-tracker-filter-close:hover {
  background-color: #f0f0f0;
}

.activity-tracker-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.activity-tracker-filter-group {
  margin-bottom: 1rem;
}

.activity-tracker-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.activity-tracker-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.activity-tracker-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.activity-tracker-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.activity-tracker-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.activity-tracker-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.activity-tracker-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.activity-tracker-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.activity-tracker-filter-org-container {
  flex: 1 1;
  position: relative;
}

.activity-tracker-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.activity-tracker-filter-org-input:hover {
  border-color: #C2DE54;
}

.activity-tracker-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.activity-tracker-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.activity-tracker-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.activity-tracker-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.activity-tracker-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.activity-tracker-filter-tag-remove:hover {
  color: #000;
}

.activity-tracker-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.activity-tracker-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.activity-tracker-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.activity-tracker-filter-org-item:hover {
  background-color: #f5f5f5;
}

.activity-tracker-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.activity-tracker-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.activity-tracker-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.activity-tracker-filter-org-code {
  font-weight: 600;
  color: #333;
}

.activity-tracker-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.activity-tracker-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.activity-tracker-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.activity-tracker-type-dropdown-item:last-child {
  border-bottom: none;
}

.activity-tracker-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.activity-tracker-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.activity-tracker-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.activity-tracker-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.activity-tracker-table {
  animation: activityTrackerFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes activityTrackerFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .activity-tracker-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .activity-tracker-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .activity-tracker-type-dropdown {
    min-width: 11.25rem;
  }

  .activity-tracker-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Activity/ActivityModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.ac-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.ac-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.ac-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.ac-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.ac-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.ac-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.ac-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ac-modal-pov-button--external.ac-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ac-modal-pov-button--external .ac-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-pov-button--external .ac-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.ac-modal-pov-caret--open {
  transform: rotate(180deg);
}

.ac-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.ac-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.ac-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.ac-modal-pov-dropdown-item span {
  flex: 1 1;
}

.ac-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.ac-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.ac-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.ac-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.ac-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.ac-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.ac-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.ac-modal-tabs--display .ac-modal-tab {
  color: #666666;
}

.ac-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.ac-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.ac-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.ac-modal-tabs--display .ac-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ac-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.ac-modal-tabs--external .ac-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ac-modal-tabs--external.ac-modal-tabs--display .ac-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ac-modal-tabs--external .ac-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.ac-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.ac-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.ac-modal-action-button span {
  white-space: nowrap;
}

.ac-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.ac-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.ac-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ac-modal-action-button--disabled .ac-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.ac-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.ac-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.ac-modal-left-area--full .ac-modal-back-button {
  transition: width 300ms ease;
}

.ac-modal-left-area--full .ac-modal-back-button:hover {
  width: 3.5rem;
}

.ac-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.ac-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.ac-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ac-modal-content--item {
  padding-bottom: 1rem;
}

.ac-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.ac-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.ac-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.ac-modal-attachment-table-container .ac-modal-detail-table thead,
.ac-modal-attachment-table-container .ac-modal-attachment-table thead {
  box-shadow: none !important;
}

.ac-modal-attachment-table-container .ac-modal-detail-table tr,
.ac-modal-attachment-table-container .ac-modal-attachment-table tr {
  box-shadow: none !important;
}

.ac-modal-attachment-table-container .ac-modal-detail-table tbody tr:last-child,
.ac-modal-attachment-table-container .ac-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ac-modal-attachment-table-container .ac-modal-detail-table tbody tr:last-child td,
.ac-modal-attachment-table-container .ac-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ac-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.ac-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.ac-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.ac-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.ac-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.ac-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.ac-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ac-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.ac-modal-attachment-filename--external {
  color: #E67E22;
}

.ac-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.ac-modal-tab-content--display .ac-modal-attachment-filename--external {
  color: #E67E22;
}

.ac-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.ac-modal-attachment-size {
  color: #666666;
}

.ac-modal-attachment-date {
  color: #666666;
}

.ac-modal-attachment-uploadedby {
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.ac-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ac-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ac-modal-attachment-browse-btn:focus {
  outline: none;
}

.ac-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ac-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ac-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-attachment-browse-btn--disabled .ac-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ac-modal-tab-content--display .ac-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.ac-modal-tab-content--display .ac-modal-attachment-filename.ac-modal-attachment-filename--external {
  color: #E67E22;
}

.ac-modal-tab-content--display .ac-modal-attachment-type {
  color: #666666;
}

.ac-modal-tab-content--display .ac-modal-attachment-size {
  color: #666666;
}

.ac-modal-tab-content--display .ac-modal-attachment-date {
  color: #666666;
}

.ac-modal-tab-content--display .ac-modal-attachment-uploadedby {
  color: #333333;
}

.ac-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.ac-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.ac-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.ac-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ac-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.ac-modal-tab-content--display .ac-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.ac-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ac-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.ac-modal-tab-content--display .ac-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.ac-modal-basic-section--external .ac-modal-form-input:focus {
  border-color: #F5B041;
}

.ac-modal-basic-section--external .ac-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.ac-modal-tab-content--external .ac-modal-form-input:focus,
.ac-modal-tab-content--external .ac-modal-form-textarea:focus,
.ac-modal-tab-content--external .ac-modal-custom-dropdown-input:focus,
.ac-modal-tab-content--external .ac-modal-date-input:focus,
.ac-modal-tab-content--external .ac-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.ac-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.ac-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.ac-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.ac-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.ac-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ac-modal-tab-content--display .ac-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.ac-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.ac-modal-tab-content--display .ac-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.ac-modal-partner-header-section--external .ac-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.ac-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ac-modal-tab-content--display .ac-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.ac-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.ac-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.ac-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.ac-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ac-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.ac-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.ac-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.ac-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.ac-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.ac-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.ac-modal-chat-section {
  padding: 1.5rem 0;
}

.ac-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ac-modal-chat-header h3 {
  margin: 0;
}

.ac-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.ac-modal-chat-new-thread .ac-modal-form-textarea {
  min-height: 5rem;
}

.ac-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.ac-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ac-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ac-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.ac-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ac-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.ac-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.ac-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.ac-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ac-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.ac-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.ac-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.ac-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ac-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ac-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-chat-user-name {
  color: #333333 !important;
}

.ac-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.ac-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.ac-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.ac-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.ac-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.ac-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.ac-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ac-modal-chat-reply-btn:hover .ac-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ac-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.ac-modal-chat-replies .ac-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.ac-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.ac-modal-chat-reply-input .ac-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.ac-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ac-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.ac-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.ac-modal-tab-content--display .ac-modal-chat-thread {
  border-color: #E5E5E5;
}

.ac-modal-tab-content--display .ac-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display .ac-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-chat-user-position {
  background-color: #E8F5E9;
}

.ac-modal-tab-content--display .ac-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.ac-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ac-modal-tab-content--display .ac-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ac-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.ac-modal-notes-header-section--external .ac-modal-form-textarea:focus {
  border-color: #F5B041;
}

.ac-modal-chat-section--external .ac-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.ac-modal-chat-avatar--external {
  background-color: #F5B041;
}

.ac-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.ac-modal-tab-content--display .ac-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-thread {
  border-color: #E5E5E5;
}

.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-user-name {
  color: #333333 !important;
}

.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-user-position {
  background-color: #FDE8D0;
}

.ac-modal-tab-content--display.ac-modal-tab-content--external .ac-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.ac-modal-chat-reply-btn--external {
  color: #E67E22;
}

.ac-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.ac-modal-chat-reply-btn--external .ac-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ac-modal-chat-reply-btn--external:hover .ac-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.ac-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ac-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.ac-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.ac-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.ac-modal-chat-textarea-wrapper {
  position: relative;
}

.ac-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.ac-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ac-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.ac-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.ac-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.ac-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.ac-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ac-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.ac-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.ac-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.ac-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ac-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.ac-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.ac-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.ac-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.ac-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.ac-modal-tab-content--display .ac-modal-table-empty-state-title {
  color: #666666;
}

.ac-modal-tab-content--display .ac-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.ac-modal-partner-header-section + .ac-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.ac-modal-partner-header-section + .ac-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.ac-modal-partner-header-section + .ac-modal-item-content-section .ac-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.ac-modal-partner-header-section + .ac-modal-item-content-section .ac-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.ac-modal-partner-header-section + .ac-modal-item-content-section .ac-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.ac-modal-partner-header-section + .ac-modal-item-content-section .ac-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.ac-modal-partner-header-section + .ac-modal-item-content-section .ac-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.ac-modal-partner-table-container .ac-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.ac-modal-partner-table-container .ac-modal-partner-table th:last-child,
.ac-modal-partner-table-container .ac-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.ac-modal-detail-table-container--external.ac-modal-partner-table-container .ac-modal-partner-table th:last-child,
.ac-modal-detail-table-container--external.ac-modal-partner-table-container .ac-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.ac-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ac-modal-item-header-section .ac-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-tab-content--display .ac-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.ac-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.ac-modal-tab-content--display .ac-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.ac-modal-item-header-section--external .ac-modal-form-input:focus {
  border-color: #F5B041;
}

.ac-modal-item-header-section--external .ac-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.ac-modal-detail-subtabs--external .ac-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.ac-modal-detail-subtabs--external .ac-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.ac-modal-detail-subtabs--external .ac-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.ac-modal-tab-content--display .ac-modal-detail-subtabs--external .ac-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ac-modal-tab-content--display .ac-modal-detail-subtabs--external .ac-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.ac-modal-tab-content.ac-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.ac-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.ac-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.ac-modal-item-table-wrapper .ac-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.ac-modal-item-table-wrapper .ac-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.ac-modal-item-table-wrapper--terms .ac-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.ac-modal-tab-content--external.ac-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.ac-modal-tab-content--external .ac-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-tab-content--external .ac-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-tab-content--external .ac-modal-item-table-wrapper--terms .ac-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.ac-modal-tab-content--external .ac-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.ac-modal-item-table-wrapper--terms .ac-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.ac-modal-item-table-wrapper--terms .ac-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ac-modal-item-table-wrapper--terms .ac-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.ac-modal-item-table-wrapper--terms .ac-modal-detail-table tr {
  height: auto;
}

.ac-modal-item-table-wrapper--terms .ac-modal-detail-table-container .ac-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.ac-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.ac-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.ac-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ac-modal-volume-input-group .ac-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ac-modal-volume-input-group .ac-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ac-modal-volume-input-group .ac-modal-sla-input-wrapper .ac-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.ac-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ac-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ac-modal-volume-uom-list--display .ac-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-volume-uom-list--display .ac-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.ac-modal-volume-uom-list--display .ac-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-volume-uom-list--display .ac-modal-volume-uom-check {
  color: #999999 !important;
}

.ac-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.ac-modal-volume-uom-dropdown--display .ac-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ac-modal-volume-uom-dropdown--display .ac-modal-volume-uom-item:hover {
  background-color: transparent;
}

.ac-modal-volume-uom-dropdown--display .ac-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ac-modal-volume-uom-dropdown--display .ac-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.ac-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ac-modal-weight-input-group .ac-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ac-modal-weight-input-group .ac-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ac-modal-weight-input-group .ac-modal-sla-input-wrapper .ac-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.ac-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ac-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-weight-uom-input::placeholder {
  color: #999999;
}

.ac-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.ac-modal-weight-uom-dropdown--display .ac-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ac-modal-weight-uom-dropdown--display .ac-modal-weight-uom-item:hover {
  background-color: transparent;
}

.ac-modal-weight-uom-dropdown--display .ac-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ac-modal-weight-uom-dropdown--display .ac-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.ac-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.ac-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.ac-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.ac-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.ac-modal-form-input--display ~ .ac-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.ac-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.ac-modal-form-input--display {
  cursor: default;
}

.ac-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.ac-modal-form-label--display {
  color: #333333 !important;
}

.ac-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.ac-modal-form-label--display .ac-modal-required {
  color: #FF4D4F;
}

.ac-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.ac-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.ac-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.ac-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.ac-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.ac-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.ac-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ac-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.ac-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.ac-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.ac-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.ac-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.ac-modal-sla-spinner-btn:disabled .ac-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ac-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sla-spinner-btn:hover .ac-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.ac-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.ac-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.ac-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.ac-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.ac-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.ac-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.ac-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.ac-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.ac-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.ac-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.ac-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.ac-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.ac-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.ac-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.ac-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.ac-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.ac-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.ac-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.ac-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.ac-modal-stage-dropdown-input--display .ac-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.ac-modal-stage-dropdown-input--display .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.ac-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.ac-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.ac-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.ac-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.ac-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ac-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.ac-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.ac-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.ac-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.ac-modal-accordion-header--display {
  color: #333333;
}

.ac-modal-accordion-header--display.ac-modal-accordion-header--active {
  color: #333333;
}

.ac-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.ac-modal-accordion-header--display .ac-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.ac-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.ac-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.ac-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.ac-modal-stage-main-title--display {
  color: #138B4C;
}

.ac-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-stage-title--display {
  color: #333333;
}

.ac-modal-stage-current {
  margin-bottom: 1.875rem;
}

.ac-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.ac-modal-stage-label--display {
  color: #666666;
}

.ac-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-stage-subtitle--display {
  color: #333333;
}

.ac-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.ac-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.ac-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.ac-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.ac-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.ac-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ac-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.ac-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.ac-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ac-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.ac-modal-download-button:active {
  background-color: #E0E0E0;
}

.ac-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-download-button--display .ac-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.ac-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.ac-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.ac-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.ac-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.ac-modal-timeline-item--display .ac-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.ac-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.ac-modal-timeline-badge--inactive .ac-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.ac-modal-timeline-item--display .ac-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.ac-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.ac-modal-timeline-item--display .ac-modal-timeline-line {
  background-color: #138B4C;
}

.ac-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ac-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.ac-modal-timeline-status--display {
  color: #333333;
}

.ac-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.ac-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.ac-modal-timeline-date--display {
  color: #666666;
}

.ac-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.ac-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.ac-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.ac-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ac-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ac-modal-timeline-document--display {
  color: #138B4C;
}

.ac-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.ac-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.ac-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.ac-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.ac-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.ac-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.ac-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.ac-modal-activity-item--display .ac-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.ac-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.ac-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.ac-modal-activity-item--display .ac-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.ac-modal-activity-item--display .ac-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.ac-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.ac-modal-activity-item--display .ac-modal-activity-line {
  background-color: #138B4C;
}

.ac-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.ac-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.ac-modal-activity-type--display {
  color: #333333;
}

.ac-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.ac-modal-activity-header--display {
  color: #666666;
}

.ac-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.ac-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.ac-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.ac-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.ac-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.ac-modal-activity-change--display .ac-modal-activity-field {
  color: #333333;
}

.ac-modal-activity-change--display .ac-modal-activity-new {
  color: #138B4C;
}

.ac-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.ac-modal-activity-date--display {
  color: #666666;
}

.ac-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.ac-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.ac-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ac-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ac-modal-activity-more--display {
  color: #138B4C;
}

.ac-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-activity-more--display .ac-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.ac-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.ac-modal-reference-table thead {
  background-color: #F9F9F9;
}

.ac-modal-tab-content--display .ac-modal-reference-table thead {
  background-color: #FAFAFA;
}

.ac-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.ac-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.ac-modal-tab-content--display .ac-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.ac-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.ac-modal-tab-content--display .ac-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.ac-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.ac-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.ac-modal-detail-subtab:hover {
  color: #138B4C;
}

.ac-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.ac-modal-tab-content--display .ac-modal-detail-subtab {
  color: #666666;
}

.ac-modal-tab-content--display .ac-modal-detail-subtab:hover {
  color: #138B4C;
}

.ac-modal-tab-content--display .ac-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ac-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.ac-modal-tab-content.ac-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.ac-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-detail-delivery-wrapper .ac-modal-form-label {
  flex-shrink: 0;
}

.ac-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.ac-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.ac-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ac-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ac-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ac-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ac-modal-detail-table-container .ac-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ac-modal-detail-table-container .ac-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ac-modal-detail-table-container .ac-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.ac-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.ac-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ac-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.ac-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.ac-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ac-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.ac-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-detail-table th,
.ac-modal-tab-content--display .ac-modal-packaging-table th,
.ac-modal-tab-content--display .ac-modal-partner-table th,
.ac-modal-tab-content--display .ac-modal-attachment-table th {
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-detail-table td,
.ac-modal-tab-content--display .ac-modal-packaging-table td,
.ac-modal-tab-content--display .ac-modal-partner-table td,
.ac-modal-tab-content--display .ac-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-description,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-text,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-batch,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-serial,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-so-item,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-package-no,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-product-type,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-product-group,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-product-category,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ac-modal-tab-content--display .ac-modal-detail-table tbody tr:hover .ac-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-description,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-text,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-batch,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-serial,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-so-item,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-package-no,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-type,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-group,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-category,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .ac-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.ac-modal-detail-table-container .ac-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.ac-modal-detail-table-container .ac-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.ac-modal-detail-table-container--external .ac-modal-detail-table td {
  color: #555555 !important;
}

.ac-modal-detail-table-container .ac-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.ac-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.ac-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ac-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.ac-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.ac-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.ac-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.ac-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.ac-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.ac-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ac-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ac-modal-detail-table tbody tr:hover .detail-table-description,
.ac-modal-detail-table tbody tr:hover .detail-table-text,
.ac-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ac-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ac-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ac-modal-detail-table tbody tr:hover .detail-table-batch,
.ac-modal-detail-table tbody tr:hover .detail-table-serial,
.ac-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ac-modal-detail-table tbody tr:hover .detail-table-so-item,
.ac-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ac-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ac-modal-detail-table tbody tr:hover .detail-table-package-no,
.ac-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ac-modal-detail-table tbody tr:hover .detail-table-product-type,
.ac-modal-detail-table tbody tr:hover .detail-table-product-group,
.ac-modal-detail-table tbody tr:hover .detail-table-product-category,
.ac-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ac-modal-detail-table tbody tr:hover .ac-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-description,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-text,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-batch,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-serial,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-so-item,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-package-no,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-type,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-group,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-category,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .ac-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.ac-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ac-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.ac-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.ac-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.ac-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.ac-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ac-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.ac-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ac-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.ac-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.ac-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.ac-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.ac-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.ac-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.ac-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.ac-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.ac-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.ac-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ac-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.ac-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.ac-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.ac-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ac-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.ac-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ac-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.ac-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ac-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ac-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ac-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ac-modal-add-item-btn--disabled .ac-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ac-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.ac-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.ac-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.ac-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ac-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ac-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.ac-modal-sales-order-table-container .ac-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.ac-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ac-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ac-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.ac-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.ac-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.ac-modal-table-input:focus {
  outline: none;
}

.ac-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.ac-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.ac-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ac-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.ac-modal-tags-container {
  position: relative;
  width: 100%;
}

.ac-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ac-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ac-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.ac-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.ac-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.ac-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.ac-modal-tags-input--display .ac-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.ac-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.ac-modal-tag-remove:hover {
  color: #333333;
}

.ac-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.ac-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ac-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.ac-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.ac-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.ac-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.ac-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.ac-modal-status-container {
  position: relative;
  width: 100%;
}

.ac-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ac-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ac-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.ac-modal-status-placeholder {
  color: #999999;
}

.ac-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.ac-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ac-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ac-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-status-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-status-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.ac-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ac-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.ac-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.ac-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.ac-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.ac-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.ac-modal-status-input--display .ac-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.ac-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.ac-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ac-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ac-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.ac-modal-stage-dropdown-placeholder {
  color: #999999;
}

.ac-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.ac-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ac-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ac-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.ac-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.ac-modal-stage--created .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.ac-modal-stage--approved .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.ac-modal-stage--processed .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.ac-modal-stage--picked .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.ac-modal-stage--packed .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.ac-modal-stage--planned .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.ac-modal-stage--loaded .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.ac-modal-stage--issued .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.ac-modal-stage--departed .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.ac-modal-stage--arrived .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.ac-modal-stage--unloaded .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.ac-modal-stage--delivered .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.ac-modal-stage--confirmed .ac-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.ac-modal-stage--billed .ac-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.ac-modal-stage-dropdown-input .ac-modal-stage,
.ac-modal-stage-dropdown-item .ac-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.ac-modal-baseline-date-dropdown {
  position: relative;
}

.ac-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ac-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.ac-modal-reference-type-dropdown {
  position: relative;
}

.ac-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ac-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.ac-modal-delivery-priority-dropdown {
  position: relative;
}

.ac-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ac-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.ac-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.ac-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.ac-modal-delivery-priority-separator {
  color: #666666;
}

.ac-modal-delivery-priority-name {
  color: #333333;
}

.ac-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.ac-modal-organization-dropdown {
  position: relative;
}

.ac-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ac-modal-organization-dropdown-content--display .ac-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-organization-dropdown-content--display .ac-modal-organization-item:hover {
  background-color: transparent !important;
}

.ac-modal-organization-dropdown-content--display .ac-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-organization-dropdown-content--display .ac-modal-organization-code,
.ac-modal-organization-dropdown-content--display .ac-modal-organization-name,
.ac-modal-organization-dropdown-content--display .ac-modal-organization-separator {
  color: #999999 !important;
}

.ac-modal-organization-dropdown-content--display .ac-modal-organization-check {
  color: #999999 !important;
}

.ac-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-organization-separator {
  color: #999999;
}

.ac-modal-organization-name {
  color: #333333;
}

.ac-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.ac-modal-sales-structure-dropdown {
  position: relative;
}

.ac-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.ac-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ac-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-sales-structure-separator {
  color: #999999;
}

.ac-modal-sales-structure-name {
  color: #333333;
}

.ac-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.ac-modal-delivery-type-dropdown {
  position: relative;
}

.ac-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.ac-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ac-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ac-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ac-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ac-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.ac-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.ac-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-delivery-type-separator {
  color: #999999;
}

.ac-modal-delivery-type-description {
  color: #333333;
}

.ac-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.ac-modal-content::-webkit-scrollbar,
.ac-modal-stage-content::-webkit-scrollbar,


.ac-modal-content::-webkit-scrollbar-track,
.ac-modal-stage-content::-webkit-scrollbar-track,


.ac-modal-content::-webkit-scrollbar-thumb,
.ac-modal-stage-content::-webkit-scrollbar-thumb,


.ac-modal-content::-webkit-scrollbar-thumb:hover,
.ac-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.ac-modal-sales-channel-dropdown {
  position: relative;
}

.ac-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ac-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-sales-channel-separator {
  color: #999999;
}

.ac-modal-sales-channel-name {
  color: #333333;
}

.ac-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.ac-modal-sales-unit-dropdown {
  position: relative;
}

.ac-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ac-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-sales-unit-separator {
  color: #999999;
}

.ac-modal-sales-unit-name {
  color: #333333;
}

.ac-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.ac-modal-organization-item--placeholder,
.ac-modal-sales-structure-item--placeholder,
.ac-modal-sales-channel-item--placeholder,
.ac-modal-sales-unit-item--placeholder,
.ac-modal-territory-item--placeholder,
.ac-modal-sales-office-item--placeholder,
.ac-modal-sold-to-party-item--placeholder,
.ac-modal-deliver-to-party-item--placeholder,
.ac-modal-attention-to-deliver-item--placeholder,
.ac-modal-incoterm-item--placeholder,
.ac-modal-delivery-point-item--placeholder,
.ac-modal-shipping-point-item--placeholder,
.ac-modal-sales-order-item--placeholder,
.ac-modal-sales-team-item--placeholder,
.ac-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.ac-modal-organization-item--placeholder:hover,
.ac-modal-sales-structure-item--placeholder:hover,
.ac-modal-sales-channel-item--placeholder:hover,
.ac-modal-sales-unit-item--placeholder:hover,
.ac-modal-territory-item--placeholder:hover,
.ac-modal-sales-office-item--placeholder:hover,
.ac-modal-sold-to-party-item--placeholder:hover,
.ac-modal-deliver-to-party-item--placeholder:hover,
.ac-modal-attention-to-deliver-item--placeholder:hover,
.ac-modal-incoterm-item--placeholder:hover,
.ac-modal-delivery-point-item--placeholder:hover,
.ac-modal-shipping-point-item--placeholder:hover,
.ac-modal-sales-order-item--placeholder:hover,
.ac-modal-sales-team-item--placeholder:hover,
.ac-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.ac-modal-sold-to-party-dropdown {
  position: relative;
}

.ac-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-sold-to-party-input:focus,
.ac-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.ac-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ac-modal-sold-to-party-separator {
  color: #999999;
}

.ac-modal-sold-to-party-name {
  color: #333333;
}

.ac-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.ac-modal-deliver-to-party-dropdown {
  position: relative;
}

.ac-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ac-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ac-modal-deliver-to-party-separator {
  color: #999999;
}

.ac-modal-deliver-to-party-name {
  color: #333333;
}

.ac-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.ac-modal-attention-to-deliver-dropdown {
  position: relative;
}
.ac-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.ac-modal-attention-to-deliver-separator {
  color: #999999;
}
.ac-modal-attention-to-deliver-name {
  color: #333333;
}
.ac-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.ac-modal-incoterm-dropdown {
  position: relative;
}
.ac-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.ac-modal-incoterm-separator {
  color: #999999;
}
.ac-modal-incoterm-name {
  color: #333333;
}
.ac-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.ac-modal-delivery-point-dropdown {
  position: relative;
}
.ac-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ac-modal-delivery-point-separator {
  color: #999999;
}
.ac-modal-delivery-point-name {
  color: #333333;
}
.ac-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.ac-modal-shipping-point-dropdown {
  position: relative;
}
.ac-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ac-modal-shipping-point-separator {
  color: #999999;
}
.ac-modal-shipping-point-name {
  color: #333333;
}
.ac-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.ac-modal-sales-order-dropdown {
  position: relative;
}
.ac-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.ac-modal-sales-order-separator {
  color: #999999;
}
.ac-modal-sales-order-name {
  color: #333333;
}
.ac-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.ac-modal-date-picker {
  position: relative;
}
.ac-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.ac-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.ac-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.ac-modal-date-input::-webkit-datetime-edit-text,
.ac-modal-date-input::-webkit-datetime-edit-month-field,
.ac-modal-date-input::-webkit-datetime-edit-day-field,
.ac-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.ac-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.ac-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.ac-modal-sales-person-dropdown {
  position: relative;
}
.ac-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.ac-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.ac-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.ac-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ac-modal-sales-person-separator {
  color: #999999;
}
.ac-modal-sales-person-name {
  color: #333333;
}
.ac-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.ac-modal-sales-team-dropdown {
  position: relative;
}
.ac-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ac-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ac-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ac-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ac-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ac-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ac-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ac-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.ac-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.ac-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.ac-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ac-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.ac-modal-sales-team-separator {
  color: #999999;
}
.ac-modal-sales-team-name {
  color: #333333;
}
.ac-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ac-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.ac-modal-territory-dropdown {
  position: relative;
}

.ac-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ac-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-territory-separator {
  color: #999999;
}

.ac-modal-territory-name {
  color: #333333;
}

.ac-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.ac-modal-sales-office-dropdown {
  position: relative;
}

.ac-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ac-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ac-modal-sales-office-separator {
  color: #999999;
}

.ac-modal-sales-office-name {
  color: #333333;
}

.ac-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.ac-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ac-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.ac-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.ac-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ac-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ac-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ac-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-table-dropdown-input:focus {
  outline: none;
}

.ac-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ac-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.ac-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.ac-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.ac-modal-delivery-type-list::-webkit-scrollbar,
.ac-modal-stage-dropdown-list::-webkit-scrollbar,
.ac-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ac-modal-delivery-type-list::-webkit-scrollbar-track,
.ac-modal-stage-dropdown-list::-webkit-scrollbar-track,
.ac-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-delivery-type-list::-webkit-scrollbar-thumb,
.ac-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.ac-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ac-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.ac-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.ac-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.ac-modal-wrapper,
.ac-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.ac-modal-wrapper,
.ac-modal-wrapper *,
.ac-modal-content,
.ac-modal-data-flow-2-container,
.ac-modal-data-flow-container,
.ac-modal-calendar-container,
.ac-modal-calendar-milestones-list,
.ac-modal-calendar-view,
.ac-modal-calendar-yearly,
.ac-modal-calendar-monthly,
.ac-modal-calendar-weekly,
.ac-modal-calendar-weekly-body,
.ac-modal-calendar-daily,
.ac-modal-calendar-daily-timeline,
.ac-modal-calendar-grid,
.ac-modal-calendar-grid-body,
.ac-modal-detail-table-container,
.ac-modal-item-table-wrapper,
.ac-modal-attachment-table-container,
.ac-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.ac-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ac-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ac-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.ac-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.ac-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.ac-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.ac-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.ac-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.ac-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-tab-content--display .ac-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.ac-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-tab-content--display .ac-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ac-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ac-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.ac-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) {
  font-weight: 600;
}

.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) .ac-modal-packaging-input,
.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) .ac-modal-packaging-input--display,
.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) .ac-modal-handling-product-input,
.ac-modal-packaging-row--unassigned:not(.ac-modal-packaging-row--expanded) .ac-modal-handling-product-input--display {
  font-weight: 600;
}

.ac-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.ac-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row td.ac-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row td.ac-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row td.ac-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td.ac-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded td.ac-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row--expanded:hover td.ac-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display,
.ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display,
.ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.ac-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.ac-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-tab-content--display .ac-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.ac-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-tab-content--display .ac-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ac-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.ac-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.ac-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.ac-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.ac-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.ac-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.ac-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.ac-modal-packaging-detail-table th:first-child,
.ac-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.ac-modal-packaging-detail-table th:nth-child(2),
.ac-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.ac-modal-packaging-detail-table th:nth-child(3),
.ac-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.ac-modal-packaging-detail-table td:nth-child(4),
.ac-modal-packaging-detail-table td:nth-child(6),
.ac-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.ac-modal-packaging-detail-table td:nth-child(5),
.ac-modal-packaging-detail-table td:nth-child(7),
.ac-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.ac-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.ac-modal-tab-content--display .ac-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display .ac-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.ac-modal-tab-content--display .ac-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.ac-modal-tab-content--display .ac-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.ac-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.ac-modal-packaging-table td:last-child,
.ac-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.ac-modal-packaging-table td:last-child .ac-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.ac-modal-detail-table-container--external .ac-modal-packaging-table th:last-child,
.ac-modal-detail-table-container--external .ac-modal-packaging-table td.ac-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.ac-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.ac-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ac-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ac-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.ac-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.ac-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.ac-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.ac-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.ac-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ac-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.ac-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.ac-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.ac-modal-packaging-child-table tr {
  border: none !important;
}

.ac-modal-packaging-child-table thead,
.ac-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.ac-modal-packaging-child-table th:first-child,
.ac-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.ac-modal-packaging-child-table th:nth-child(2),
.ac-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.ac-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.ac-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.ac-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.ac-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.ac-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.ac-modal-packaging-child-table th:nth-child(3),
.ac-modal-packaging-child-table td:nth-child(3),
.ac-modal-packaging-child-table th:nth-child(4),
.ac-modal-packaging-child-table td:nth-child(4),
.ac-modal-packaging-child-table th:nth-child(5),
.ac-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.ac-modal-packaging-child-table th:nth-child(6),
.ac-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.ac-modal-packaging-child-table th:nth-child(7),
.ac-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.ac-modal-detail-table-container--external .ac-modal-packaging-child-table th:last-child,
.ac-modal-detail-table-container--external .ac-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.ac-modal-packaging-child-table td:last-child .ac-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.ac-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.ac-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ac-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.ac-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.ac-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row {
  transition: none !important;
}

.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display,
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display:focus,
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display,
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display:focus,
.ac-modal-tab-content--display .ac-modal-detail-table-container .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display:focus,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display:focus,
.ac-modal-tab-content--display .ac-modal-detail-table-container--external .ac-modal-packaging-table tbody tr.ac-modal-packaging-row:hover td .ac-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.ac-modal-detail-table-container--external .ac-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.ac-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ac-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ac-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.ac-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ac-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.ac-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.ac-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.ac-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.ac-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.ac-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.ac-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.ac-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.ac-modal-detail-table-container--external .ac-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.ac-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-item--display {
  color: #999999 !important;
}

.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-code,
.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-name,
.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-separator {
  color: #999999 !important;
}

.ac-modal-handling-product-dropdown-content--display .ac-modal-handling-product-check {
  color: #999999 !important;
}

.ac-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.ac-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.ac-modal-handling-product-dropdown-content--narrow .ac-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.ac-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.ac-modal-packaging-detail-table .ac-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.ac-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.ac-modal-detail-table-container--dropdown-open .ac-modal-detail-table {
  overflow: visible;
}

.ac-modal-detail-table-container--dropdown-open .ac-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.ac-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ac-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ac-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.ac-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.ac-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.ac-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.ac-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.ac-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.ac-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.ac-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ac-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.ac-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.ac-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.ac-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.ac-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.ac-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.ac-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.ac-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ac-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.ac-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.ac-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-item:hover {
  background-color: transparent;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-item--placeholder {
  display: none;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-code,
.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-name,
.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-separator {
  color: #555555;
}

.ac-modal-handling-product-dropdown-content--view-only .ac-modal-handling-product-check {
  color: #888888;
}

.ac-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.ac-modal-handling-product-separator {
  color: #999999;
}

.ac-modal-handling-product-name {
  color: #333333;
}

.ac-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ac-modal-handling-product-item--placeholder {
  cursor: default;
}

.ac-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.ac-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.ac-modal-detail-table td:has(.ac-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.ac-modal-detail-table td .ac-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.ac-modal-detail-table td .ac-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.ac-modal-detail-table td .ac-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.ac-modal-detail-table td .ac-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.ac-modal-detail-table td .ac-modal-handling-product-input--display,
.ac-modal-detail-table td .ac-modal-handling-product-input--display:focus,
.ac-modal-detail-table td .ac-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display,
.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display:focus,
.ac-modal-detail-table-container .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display:focus,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover td .ac-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.ac-modal-detail-table td .ac-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.ac-modal-detail-table td .ac-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.ac-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ac-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ac-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.ac-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-table-text-icon-btn--filled:not(.ac-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.ac-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.ac-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ac-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.ac-modal-table-text-icon-btn--display.ac-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.ac-modal-table-text-icon-btn--display.ac-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-table-text-icon-btn--display.ac-modal-table-text-icon-btn--external.ac-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.ac-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.ac-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.ac-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ac-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.ac-modal-serial-assignment-btn {
  width: 10.625rem;
}

.ac-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.ac-modal-batch-assignment-btn--filled .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.ac-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.ac-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.ac-modal-batch-assignment-btn--display .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-batch-assignment-btn--display.ac-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ac-modal-batch-assignment-btn--display.ac-modal-batch-assignment-btn--filled .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.ac-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.ac-modal-secured-qty-btn.ac-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.ac-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.ac-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.ac-modal-secured-qty-btn--grey .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.ac-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ac-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.ac-modal-batch-assignment-btn--partial .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.ac-modal-batch-assignment-btn--display.ac-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ac-modal-batch-assignment-btn--display.ac-modal-batch-assignment-btn--partial .ac-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.ac-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.ac-modal-secured-qty-modal .ac-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.ac-modal-secured-qty-modal .ac-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ac-modal-secured-qty-modal.ac-modal-batch-assignment-modal--display .ac-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.ac-modal-secured-qty-modal .ac-modal-item-text-content {
  overflow-x: hidden;
}

.ac-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.ac-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.ac-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ac-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.ac-modal-batch-assignment-modal--display .ac-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ac-modal-batch-assignment-modal--display .ac-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.ac-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.ac-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.ac-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.ac-modal-secured-qty-lock-btn--open .ac-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.ac-modal-secured-qty-lock-btn--locked .ac-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.ac-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.ac-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.ac-modal-batch-assignment-modal .ac-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.ac-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.ac-modal-batch-assignment-modal .ac-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.ac-modal-batch-assignment-modal .ac-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.ac-modal-batch-assignment-modal.ac-modal-batch-assignment-modal--display .ac-modal-item-text-info {
  background-color: #F2F8EA;
}

.ac-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ac-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.ac-modal-batch-assignment-info-group {
  flex: 1 1;
}

.ac-modal-batch-assignment-info-group .ac-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ac-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.ac-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ac-modal-batch-assignment-table-section .ac-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ac-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.ac-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ac-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ac-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ac-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.ac-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.ac-modal-batch-assignment-table th,
.ac-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.ac-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.ac-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.ac-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ac-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.ac-modal-batch-assignment-table tbody td:has(.ac-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.ac-modal-batch-assignment-table tbody td:has(.ac-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.ac-modal-batch-assignment-table tbody td:nth-child(2),
.ac-modal-batch-assignment-table tbody td:nth-child(3),
.ac-modal-batch-assignment-table tbody td:nth-child(4),
.ac-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.ac-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.ac-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ac-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ac-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.ac-modal-batch-assignment-modal--display .ac-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.ac-modal-batch-assignment-modal--display .ac-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ac-modal-batch-assignment-modal--display .ac-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-batch-assignment-modal--display .ac-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.ac-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.ac-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.ac-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.ac-modal-batch-assignment-table .ac-modal-placeholder-text {
  color: #CCCCCC;
}

.ac-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ac-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.ac-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ac-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.ac-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.ac-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.ac-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.ac-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.ac-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ac-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.ac-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.ac-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.ac-modal-batch-assignment-table td.batch-table-frozen-batch,
table.ac-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.ac-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ac-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.ac-modal-batch-assignment-table th.batch-table-frozen-assign,
table.ac-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.ac-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.ac-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.ac-modal-item-text-info {
  margin-bottom: 1rem;
}

.ac-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ac-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.ac-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ac-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.ac-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.ac-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ac-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.ac-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-item-text-modal .modal-header .modal-title,
.ac-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.ac-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.ac-modal-item-text-label--display {
  color: #333333;
}

.ac-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.ac-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.ac-modal-item-text-modal .ac-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.ac-modal-item-text-modal .ac-modal-item-text-textarea-wrapper .ac-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.ac-modal-item-text-textarea {
  overflow-y: auto !important;
}

.ac-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.ac-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ac-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.ac-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.ac-modal-add-do-item-modal .ac-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.ac-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ac-modal-add-do-item-dropdown-section .ac-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ac-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ac-modal-add-do-item-table-section .ac-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.ac-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.ac-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.ac-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ac-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ac-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.ac-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ac-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.ac-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.ac-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.ac-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.ac-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.ac-modal-detail-table td:first-child .ac-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.ac-modal-detail-table td:first-child .ac-modal-partner-type-input {
  padding-left: 0.625rem;
}

.ac-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ac-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ac-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ac-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ac-modal-partner-type-dropdown--display .ac-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ac-modal-partner-type-dropdown-content--display .ac-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-partner-type-dropdown-content--display .ac-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.ac-modal-partner-type-dropdown-content--display .ac-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-partner-type-dropdown-content--display .ac-modal-partner-type-check {
  color: #999999 !important;
}

.ac-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ac-modal-partner-type-dropdown--display .ac-modal-partner-type-value {
  color: #555555;
}

.ac-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ac-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.ac-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.ac-modal-partner-type-item--placeholder {
  cursor: default;
}

.ac-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.ac-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ac-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.ac-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.ac-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ac-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ac-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ac-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ac-modal-partner-id-dropdown--display .ac-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-code,
.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-name,
.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-separator {
  color: #999999 !important;
}

.ac-modal-partner-id-dropdown-content--display .ac-modal-partner-id-check {
  color: #999999 !important;
}

.ac-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ac-modal-partner-id-dropdown--display .ac-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.ac-modal-detail-table tbody tr:hover .ac-modal-partner-type-dropdown--display .ac-modal-partner-type-input-wrapper,
.ac-modal-detail-table tbody tr:hover .ac-modal-partner-id-dropdown--display .ac-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .ac-modal-partner-type-dropdown--display .ac-modal-partner-type-input-wrapper,
.ac-modal-detail-table-container--external .ac-modal-detail-table tbody tr:hover .ac-modal-partner-id-dropdown--display .ac-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.ac-modal-partner-type-arrow--external {
  visibility: hidden;
}

.ac-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.ac-modal-partner-type-dropdown--external .ac-modal-partner-type-value {
  color: #555555;
}

.ac-modal-partner-id-dropdown--external .ac-modal-partner-id-value {
  color: #555555;
}

.ac-modal-detail-table-container--external .ac-modal-detail-table td.ac-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.ac-modal-partner-header-section--external .ac-modal-form-input--display {
  color: #555555;
}

.ac-modal-detail-table td.ac-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.ac-modal-tab-content--display .ac-modal-detail-table td.ac-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.ac-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ac-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ac-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ac-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.ac-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.ac-modal-partner-id-item--placeholder {
  cursor: default;
}

.ac-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.ac-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.ac-modal-partner-id-separator {
  color: #999999;
}

.ac-modal-partner-id-name {
  color: #666666;
}

.ac-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ac-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.ac-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.ac-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ac-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ac-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ac-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ac-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ac-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ac-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.ac-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.ac-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.ac-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.ac-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.ac-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ac-modal-data-flow-stage--completed .ac-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ac-modal-data-flow-stage--active .ac-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ac-modal-data-flow-stage--completed .ac-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-data-flow-stage--active .ac-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.ac-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.ac-modal-data-flow-stage--completed .ac-modal-data-flow-stage-label {
  color: #138B4C;
}

.ac-modal-data-flow-stage--active .ac-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.ac-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.ac-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.ac-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.ac-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.ac-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.ac-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ac-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.ac-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ac-modal-data-flow-document--active .ac-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.ac-modal-data-flow-document-fold {
  display: none;
}

.ac-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.ac-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.ac-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.ac-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.ac-modal-data-flow-document-icon-wrapper--active .ac-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.ac-modal-data-flow-document--active .ac-modal-data-flow-document-title {
  color: #138B4C;
}

.ac-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.ac-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.ac-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.ac-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.ac-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.ac-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.ac-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.ac-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.ac-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ac-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.ac-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.ac-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.ac-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.ac-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.ac-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.ac-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.ac-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.ac-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.ac-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ac-modal-terms-area-button .ac-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.ac-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.ac-modal-tab-content--display .ac-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.ac-modal-tab-content--display .ac-modal-terms-area-button .ac-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.ac-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ac-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ac-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.ac-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ac-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ac-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ac-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.ac-modal-data-flow-2-row {
  display: flex;
}

.ac-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ac-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.ac-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.ac-modal-data-flow-2-row--content .ac-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.ac-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.ac-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.ac-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ac-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-label {
  color: #333333;
}

.ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage-label {
  color: #999999;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--completed .ac-modal-data-flow-2-stage-label {
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--active .ac-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.ac-modal-tab-content--display .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.ac-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.ac-modal-data-flow-2-row--content .ac-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.ac-modal-data-flow-2-row--content .ac-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ac-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ac-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.ac-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.ac-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.ac-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ac-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.ac-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.ac-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ac-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-title,
.ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-title {
  color: #333333;
}

.ac-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.ac-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ac-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.ac-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-title {
  color: #888888;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-title,
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-title {
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--completed .ac-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--active .ac-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-date {
  color: #333333;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.ac-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.ac-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.ac-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.ac-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.ac-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.ac-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.ac-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ac-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ac-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ac-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.ac-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.ac-modal-data-flow-2-grid--external .ac-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.ac-modal-data-flow-2-grid--external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell {
  border-bottom: none;
}

.ac-modal-data-flow-2-grid--external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.ac-modal-data-flow-2-grid--external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell--label::after {
  display: none;
}

.ac-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.ac-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.ac-modal-data-flow-2-row--content-top .ac-modal-data-flow-2-document--buyer.ac-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.ac-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.ac-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ac-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ac-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.ac-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.ac-modal-data-flow-2-stage--external-completed .ac-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.ac-modal-data-flow-2-stage--external-active .ac-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.ac-modal-data-flow-2-stage--external-completed .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.ac-modal-data-flow-2-stage--external-active .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.ac-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.ac-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ac-modal-data-flow-2-document--external .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.ac-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.ac-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.ac-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ac-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.ac-modal-data-flow-2-document--external .ac-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.ac-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.ac-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ac-modal-data-flow-2-document--supplier .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.ac-modal-data-flow-2-document--supplier .ac-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.ac-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.ac-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.ac-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ac-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier .ac-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier .ac-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-completed .ac-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--supplier-active .ac-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.ac-modal-tab-content--data-flow-2-external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.ac-modal-tab-content--data-flow-2-external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external .ac-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external .ac-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.ac-modal-tab-content--display.ac-modal-tab-content--data-flow-2-external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.ac-modal-tab-content--display.ac-modal-tab-content--data-flow-2-external .ac-modal-data-flow-2-row--header .ac-modal-data-flow-2-cell:has(.ac-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-circle,
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external-completed .ac-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external-active .ac-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-icon,
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external-completed .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external-active .ac-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-stage--external .ac-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-completed .ac-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.ac-modal-tab-content--display .ac-modal-data-flow-2-document--external-active .ac-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.ac-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.ac-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.ac-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ac-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.ac-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.ac-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ac-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ac-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ac-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.ac-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.ac-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.ac-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.ac-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.ac-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ac-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.ac-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.ac-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.ac-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.ac-modal-milestone-date-value {
  color: #666666;
}

.ac-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.ac-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.ac-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.ac-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.ac-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.ac-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ac-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.ac-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ac-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.ac-modal-activity-item--display .ac-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.ac-modal-calendar-milestones .ac-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.ac-modal-calendar-milestones .ac-modal-activity-user:hover {
  text-decoration: none;
}

.ac-modal-calendar-milestones .ac-modal-activity-item--display .ac-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.ac-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.ac-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ac-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ac-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ac-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-calendar-nav-btn:hover .ac-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.ac-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.ac-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.ac-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.ac-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.ac-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.ac-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.ac-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.ac-modal-calendar-view-mode-btn--active + .ac-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.ac-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ac-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ac-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.ac-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.ac-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ac-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ac-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.ac-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.ac-modal-calendar-grid-cell:nth-child(7n-1),
.ac-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.ac-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.ac-modal-calendar-grid-day-name:nth-child(6),
.ac-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.ac-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ac-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ac-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.ac-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.ac-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.ac-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.ac-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.ac-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.ac-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ac-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.ac-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ac-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.ac-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ac-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.ac-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ac-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ac-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.ac-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.ac-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ac-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.ac-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ac-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ac-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.ac-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.ac-modal-calendar-weekly-day-column:nth-child(6),
.ac-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.ac-modal-calendar-weekly-day-header:nth-child(6),
.ac-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.ac-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ac-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ac-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ac-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ac-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ac-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ac-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ac-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.ac-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ac-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.ac-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ac-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.ac-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ac-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ac-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.ac-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.ac-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.ac-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ac-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ac-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ac-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ac-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ac-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ac-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ac-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-view {
  border-color: #D0D0D0;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-view-mode-btn--active + .ac-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-milestones-header {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-view-title {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-grid-day-name {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-grid-cell-day {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-weekly-day-name {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-weekly-day-date {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-weekly-event-title {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-daily-header {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-daily-hour-label {
  color: #666666;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-daily-event-title {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar .ac-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.ac-modal-calendar-milestones-header--external {
  color: #333333;
}

.ac-modal-calendar-nav-btn--external .ac-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ac-modal-calendar-nav-btn--external:hover .ac-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.ac-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.ac-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.ac-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ac-modal-calendar-view-mode-btn--active-external + .ac-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ac-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.ac-modal-tab-content--calendar-external .ac-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.ac-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.ac-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.ac-modal-activity-type--external {
  color: #333333;
}

.ac-modal-activity-user--external {
  color: #E67E22;
}

.ac-modal-activity-user--external:hover {
  color: #D35400;
}

.ac-modal-calendar-milestones .ac-modal-activity-user--external {
  color: #E67E22;
}

.ac-modal-calendar-milestones .ac-modal-activity-user--external:hover {
  color: #D35400;
}

.ac-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.ac-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ac-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ac-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ac-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.ac-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ac-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ac-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ac-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.ac-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ac-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ac-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ac-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-milestones-header--external {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-view-mode-btn--active-external + .ac-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-calendar-nav-btn--external .ac-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-activity-type--external {
  color: #333333;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-activity-user--external {
  color: #E67E22;
}

.ac-modal-tab-content--display.ac-modal-tab-content--calendar-external .ac-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.ac-modal-input--error,
.ac-modal-form-input.ac-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.ac-modal-dropdown--error .ac-modal-delivery-type-input,
.ac-modal-dropdown--error .ac-modal-organization-input,
.ac-modal-dropdown--error .ac-modal-sales-structure-input,
.ac-modal-dropdown--error .ac-modal-sales-channel-input,
.ac-modal-dropdown--error .ac-modal-sales-unit-input,
.ac-modal-dropdown--error .ac-modal-territory-input,
.ac-modal-dropdown--error .ac-modal-sales-office-input,
.ac-modal-dropdown--error .ac-modal-sold-to-party-input,
.ac-modal-dropdown--error .ac-modal-deliver-to-party-input,
.ac-modal-dropdown--error .ac-modal-attention-to-deliver-input,
.ac-modal-dropdown--error .ac-modal-incoterm-input,
.ac-modal-dropdown--error .ac-modal-delivery-point-input,
.ac-modal-dropdown--error .ac-modal-shipping-point-input,
.ac-modal-dropdown--error .ac-modal-sales-order-input,
.ac-modal-dropdown--error .ac-modal-sales-team-input,
.ac-modal-dropdown--error .ac-modal-sales-person-input,
.ac-modal-dropdown--error .ac-modal-delivery-priority-input,
.ac-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.ac-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.ac-modal-date-picker-wrapper.ac-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.ac-modal-custom-dropdown {
  position: relative;
}

.ac-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ac-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ac-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ac-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-check {
  color: #999999 !important;
}

.ac-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ac-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ac-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.ac-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ac-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ac-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.ac-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.ac-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.ac-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ac-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ac-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ac-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.ac-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ac-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.ac-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ac-modal-setting-form-label--display {
  color: #333333;
}

.ac-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ac-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-setting-dropdown--active .ac-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.ac-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.ac-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.ac-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ac-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.ac-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.ac-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.ac-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-setting-dropdown-icon.ac-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ac-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ac-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.ac-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.ac-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.ac-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.ac-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.ac-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ac-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ac-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ac-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.ac-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.ac-modal-setting-dropdown-item-separator {
  color: #999999;
}

.ac-modal-setting-dropdown-item-name {
  color: #333333;
}

.ac-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ac-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.ac-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ac-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ac-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ac-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.ac-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.ac-modal-setting-tab-content--print .ac-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ac-modal-setting-tab-content--print .ac-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ac-modal-setting-tab-content--print .ac-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.ac-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.ac-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ac-modal-setting-table thead tr {
  height: 2.25rem;
}

.ac-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.ac-modal-setting-table tbody tr {
  height: 2.25rem;
}

.ac-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.ac-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.ac-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.ac-modal-setting-table--display thead th:nth-child(2),
.ac-modal-setting-table--display thead th:nth-child(3),
.ac-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.ac-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.ac-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.ac-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.ac-modal-setting-table--transfer.ac-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.ac-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.ac-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ac-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.ac-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.ac-modal-setting-table--transfer:not(.ac-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.ac-modal-setting-table--transfer:not(.ac-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.ac-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.ac-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.ac-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.ac-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.ac-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ac-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ac-modal-tab-content--display .ac-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.ac-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.ac-modal-tab-content--display .ac-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.ac-modal-attribute-header-section--external .ac-modal-form-input:focus {
  border-color: #F5B041;
}

.ac-modal-attribute-header-section--external .ac-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.ac-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.ac-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.ac-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.ac-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.ac-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ac-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ac-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.ac-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.ac-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.ac-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ac-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ac-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.ac-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.ac-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ac-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ac-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.ac-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.ac-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.ac-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.ac-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.ac-modal-available-qty-tree-level {
  position: relative;
}

.ac-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.ac-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ac-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ac-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.ac-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.ac-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.ac-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.ac-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.ac-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.ac-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.ac-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.ac-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.ac-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ac-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.ac-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.ac-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.ac-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.ac-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.ac-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.ac-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.ac-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.ac-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.ac-modal-available-qty-tree-batch-header .ac-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.ac-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.ac-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.ac-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ac-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.ac-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.ac-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ac-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ac-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.ac-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ac-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ac-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ac-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.ac-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ac-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ac-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ac-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ac-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.ac-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.ac-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.ac-modal-activity-type--clickable.ac-modal-activity-type--display:hover {
  color: #138B4C;
}

.ac-modal-activity-type--clickable.ac-modal-activity-type--external:hover {
  color: #E67E00;
}

.ac-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ac-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.ac-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ac-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.ac-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ac-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.ac-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ac-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.ac-modal-activity-detail-content .ac-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.ac-modal-activity-detail-modal .ac-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.ac-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.ac-modal-activity-detail-modal .ac-modal-tabs--display .ac-modal-tab {
  color: #333333;
}

.ac-modal-activity-detail-modal .ac-modal-tabs--display .ac-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.ac-modal-activity-detail-modal .ac-modal-tabs--external.ac-modal-tabs--display .ac-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.ac-modal-activity-detail-tab-content--general .ac-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.ac-modal-activity-detail-content .ac-modal-milestone-status {
  margin: 0;
}

.ac-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.ac-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.ac-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ac-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.ac-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.ac-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.ac-modal-activity-detail-pic-chat-wrapper:hover .ac-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.ac-modal-activity-detail-pic-chat-wrapper:hover .ac-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.ac-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.ac-modal-activity-detail-pic--clickable:hover .ac-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.ac-modal-activity-detail-content--external .ac-modal-activity-detail-pic {
  color: #E67E22;
}

.ac-modal-activity-detail-content--external .ac-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.ac-modal-activity-detail-content--external .ac-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.ac-modal-activity-detail-content--external .ac-modal-activity-detail-pic--clickable:hover .ac-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.ac-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.ac-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ac-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ac-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.ac-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.ac-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.ac-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ac-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.ac-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ac-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.ac-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ac-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ac-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ac-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.ac-modal-activity-detail-content--external .ac-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.ac-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.ac-modal-activity-detail-content--external .ac-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ac-modal-activity-detail-content--external .ac-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ac-modal-activity-detail-content--external .ac-modal-activity-detail-document-name {
  color: #E67E22;
}

.ac-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.ac-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.ac-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.ac-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.ac-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.ac-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.ac-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.ac-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.ac-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.ac-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.ac-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.ac-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ac-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.ac-modal-activity-detail-tab-content--general {
  padding: 0;
}

.ac-modal-activity-detail-tab-content--general .ac-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.ac-modal-activity-detail-tab-content--general > div:not(.ac-modal-item-text-info) {
  padding: 0 1.5rem;
}

.ac-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.ac-modal-activity-detail-tab-content--attachment,
.ac-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.ac-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.ac-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.ac-modal-activity-detail-tab-content--attachment .ac-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.ac-modal-activity-detail-tab-content--attachment .ac-modal-batch-assignment-table-section > .ac-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ac-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.ac-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.ac-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ac-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.ac-modal-activity-detail-content--external .ac-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.ac-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.ac-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.ac-modal-activity-detail-content--external .ac-modal-item-text-info {
  background-color: #FEF5E7;
}

.ac-modal-activity-detail-content--external .ac-modal-task-notes-section {
  background-color: #FEF5E7;
}

.ac-modal-task-notes-section .ac-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ac-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.ac-modal-task-notes-textarea.ac-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.ac-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.ac-modal-task-chat-section > .ac-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ac-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.ac-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ac-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ac-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ac-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ac-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.ac-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.ac-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.ac-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.ac-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.ac-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ac-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.ac-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.ac-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.ac-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.ac-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.ac-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ac-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ac-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.ac-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.ac-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.ac-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ac-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.ac-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.ac-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ac-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.ac-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.ac-modal-activity-detail-content--external .ac-modal-task-chat-avatar {
  background-color: #F5B041;
}

.ac-modal-activity-detail-content--external .ac-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.ac-modal-activity-detail-content--external .ac-modal-task-chat-reply-btn {
  color: #E67E22;
}

.ac-modal-activity-detail-content--external .ac-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.ac-modal-dropdown--display .ac-modal-dropdown-item,
.ac-modal-dropdown--display [class*="-item"],
.ac-modal-tags-dropdown--display .ac-modal-tags-dropdown-item,
.ac-modal-baseline-date-dropdown--display .ac-modal-baseline-date-item,
.ac-modal-reference-type-dropdown--display .ac-modal-reference-type-item,
.ac-modal-delivery-priority-dropdown--display .ac-modal-delivery-priority-item,
.ac-modal-organization-dropdown--display .ac-modal-organization-item,
.ac-modal-sales-structure-dropdown--display .ac-modal-sales-structure-item,
.ac-modal-delivery-type-dropdown--display .ac-modal-delivery-type-item,
.ac-modal-sales-channel-dropdown--display .ac-modal-sales-channel-item,
.ac-modal-sales-unit-dropdown--display .ac-modal-sales-unit-item,
.ac-modal-sold-to-party-dropdown--display .ac-modal-sold-to-party-item,
.ac-modal-deliver-to-party-dropdown--display .ac-modal-deliver-to-party-item,
.ac-modal-attention-to-deliver-dropdown--display .ac-modal-attention-to-deliver-item,
.ac-modal-incoterm-dropdown--display .ac-modal-incoterm-item,
.ac-modal-delivery-point-dropdown--display .ac-modal-delivery-point-item,
.ac-modal-shipping-point-dropdown--display .ac-modal-shipping-point-item,
.ac-modal-sales-order-dropdown--display .ac-modal-sales-order-item,
.ac-modal-sales-person-dropdown--display .ac-modal-sales-person-item,
.ac-modal-sales-team-dropdown--display .ac-modal-sales-team-item,
.ac-modal-territory-dropdown--display .ac-modal-territory-item,
.ac-modal-sales-office-dropdown--display .ac-modal-sales-office-item,
.ac-modal-status-dropdown--display .ac-modal-status-item,
.ac-modal-handling-product-dropdown--display .ac-modal-handling-product-item,
.ac-modal-child-uom-dropdown--display .ac-modal-child-uom-item,
.ac-modal-partner-type-dropdown--display .ac-modal-partner-type-item,
.ac-modal-partner-id-dropdown--display .ac-modal-partner-id-item,
.ac-modal-custom-dropdown--display .ac-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.ac-modal-dropdown--display .ac-modal-dropdown-item:hover,
.ac-modal-dropdown--display [class*="-item"]:hover,
.ac-modal-tags-dropdown--display .ac-modal-tags-dropdown-item:hover,
.ac-modal-baseline-date-dropdown--display .ac-modal-baseline-date-item:hover,
.ac-modal-reference-type-dropdown--display .ac-modal-reference-type-item:hover,
.ac-modal-delivery-priority-dropdown--display .ac-modal-delivery-priority-item:hover,
.ac-modal-organization-dropdown--display .ac-modal-organization-item:hover,
.ac-modal-sales-structure-dropdown--display .ac-modal-sales-structure-item:hover,
.ac-modal-delivery-type-dropdown--display .ac-modal-delivery-type-item:hover,
.ac-modal-sales-channel-dropdown--display .ac-modal-sales-channel-item:hover,
.ac-modal-sales-unit-dropdown--display .ac-modal-sales-unit-item:hover,
.ac-modal-sold-to-party-dropdown--display .ac-modal-sold-to-party-item:hover,
.ac-modal-deliver-to-party-dropdown--display .ac-modal-deliver-to-party-item:hover,
.ac-modal-attention-to-deliver-dropdown--display .ac-modal-attention-to-deliver-item:hover,
.ac-modal-incoterm-dropdown--display .ac-modal-incoterm-item:hover,
.ac-modal-delivery-point-dropdown--display .ac-modal-delivery-point-item:hover,
.ac-modal-shipping-point-dropdown--display .ac-modal-shipping-point-item:hover,
.ac-modal-sales-order-dropdown--display .ac-modal-sales-order-item:hover,
.ac-modal-sales-person-dropdown--display .ac-modal-sales-person-item:hover,
.ac-modal-sales-team-dropdown--display .ac-modal-sales-team-item:hover,
.ac-modal-territory-dropdown--display .ac-modal-territory-item:hover,
.ac-modal-sales-office-dropdown--display .ac-modal-sales-office-item:hover,
.ac-modal-status-dropdown--display .ac-modal-status-item:hover,
.ac-modal-handling-product-dropdown--display .ac-modal-handling-product-item:hover,
.ac-modal-child-uom-dropdown--display .ac-modal-child-uom-item:hover,
.ac-modal-partner-type-dropdown--display .ac-modal-partner-type-item:hover,
.ac-modal-partner-id-dropdown--display .ac-modal-partner-id-item:hover,
.ac-modal-custom-dropdown--display .ac-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.ac-modal-dropdown--display [class*="-item--selected"],
.ac-modal-tags-dropdown--display .ac-modal-tags-dropdown-item--selected,
.ac-modal-baseline-date-dropdown--display .ac-modal-baseline-date-item--selected,
.ac-modal-reference-type-dropdown--display .ac-modal-reference-type-item--selected,
.ac-modal-delivery-priority-dropdown--display .ac-modal-delivery-priority-item--selected,
.ac-modal-organization-dropdown--display .ac-modal-organization-item--selected,
.ac-modal-sales-structure-dropdown--display .ac-modal-sales-structure-item--selected,
.ac-modal-delivery-type-dropdown--display .ac-modal-delivery-type-item--selected,
.ac-modal-sales-channel-dropdown--display .ac-modal-sales-channel-item--selected,
.ac-modal-sales-unit-dropdown--display .ac-modal-sales-unit-item--selected,
.ac-modal-sold-to-party-dropdown--display .ac-modal-sold-to-party-item--selected,
.ac-modal-deliver-to-party-dropdown--display .ac-modal-deliver-to-party-item--selected,
.ac-modal-attention-to-deliver-dropdown--display .ac-modal-attention-to-deliver-item--selected,
.ac-modal-incoterm-dropdown--display .ac-modal-incoterm-item--selected,
.ac-modal-delivery-point-dropdown--display .ac-modal-delivery-point-item--selected,
.ac-modal-shipping-point-dropdown--display .ac-modal-shipping-point-item--selected,
.ac-modal-sales-order-dropdown--display .ac-modal-sales-order-item--selected,
.ac-modal-sales-person-dropdown--display .ac-modal-sales-person-item--selected,
.ac-modal-sales-team-dropdown--display .ac-modal-sales-team-item--selected,
.ac-modal-territory-dropdown--display .ac-modal-territory-item--selected,
.ac-modal-sales-office-dropdown--display .ac-modal-sales-office-item--selected,
.ac-modal-status-dropdown--display .ac-modal-status-item--selected,
.ac-modal-handling-product-dropdown--display .ac-modal-handling-product-item--selected,
.ac-modal-child-uom-dropdown--display .ac-modal-child-uom-item--selected,
.ac-modal-partner-type-dropdown--display .ac-modal-partner-type-item--selected,
.ac-modal-partner-id-dropdown--display .ac-modal-partner-id-item--selected,
.ac-modal-custom-dropdown--display .ac-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.ac-modal-dropdown--display [class*="-check"],
.ac-modal-dropdown--display .ac-modal-dropdown-check,
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.ac-modal-dropdown--display [class*="-item-code"],
.ac-modal-dropdown--display [class*="-item-name"],
.ac-modal-dropdown--display [class*="-item-content"],
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-code,
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-name,
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-item,
.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.ac-modal-sold-to-party-dropdown-content--display .ac-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.ac-modal-tags-dropdown--display .ac-modal-tags-item,
.ac-modal-tags-dropdown--display .ac-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-tags-dropdown--display .ac-modal-tags-item:hover {
  background-color: transparent !important;
}

.ac-modal-tags-dropdown--display .ac-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ac-modal-tags-dropdown--display .ac-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item,
.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ac-modal-custom-dropdown-list--display .ac-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/AfterSalesServiceOrder/AfterSalesServiceOrder.css ===== */
/* Service Order Wrapper - prevent page scroll */
.service-order-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Service Order Container */
.service-order-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.service-order-header {
  margin-bottom: 0;
}

.service-order-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Service Order Control - Exact copy of third-nav-control */
.service-order-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.service-order-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.service-order-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.service-order-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.service-order-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.service-order-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.service-order-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.service-order-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.service-order-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.service-order-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.service-order-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.service-order-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.service-order-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-order-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-order-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.service-order-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.service-order-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.service-order-layout-dropdown-item:last-child {
  border-bottom: none;
}

.service-order-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.service-order-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.service-order-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.service-order-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.service-order-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.service-order-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.service-order-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.service-order-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-order-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-order-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.service-order-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.service-order-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.service-order-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.service-order-filter-parameter-wrapper {
  position: relative;
}

.service-order-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.service-order-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-order-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.service-order-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.service-order-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.service-order-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.service-order-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.service-order-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.service-order-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-order-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.service-order-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.service-order-filter-close:hover {
  background-color: #f0f0f0;
}

.service-order-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.service-order-filter-group {
  margin-bottom: 1rem;
}

.service-order-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.service-order-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-order-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.service-order-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.service-order-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.service-order-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.service-order-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.service-order-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.service-order-filter-org-container {
  flex: 1 1;
  position: relative;
}

.service-order-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.service-order-filter-org-input:hover {
  border-color: #C2DE54;
}

.service-order-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.service-order-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.service-order-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.service-order-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.service-order-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.service-order-filter-tag-remove:hover {
  color: #000;
}

.service-order-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.service-order-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.service-order-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.service-order-filter-org-item:hover {
  background-color: #f5f5f5;
}

.service-order-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.service-order-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.service-order-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.service-order-filter-org-code {
  font-weight: 600;
  color: #333;
}

.service-order-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.service-order-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.service-order-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.service-order-type-dropdown-item:last-child {
  border-bottom: none;
}

.service-order-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.service-order-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.service-order-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.service-order-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Service Order Table */
.service-order-table {
  animation: serviceOrderFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes serviceOrderFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .service-order-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .service-order-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .service-order-type-dropdown {
    min-width: 11.25rem;
  }

  .service-order-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/AfterSalesServiceOrder/AfterSalesServiceOrderModal.css ===== */
/* Delivery Order Modal Specific Styles */
.service-order-modal {
  overscroll-behavior: contain;
}

.service-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.wo-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.wo-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.wo-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.wo-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.wo-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.wo-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.wo-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.wo-modal-pov-button--external.wo-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.wo-modal-pov-button--external .wo-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-pov-button--external .wo-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.wo-modal-pov-caret--open {
  transform: rotate(180deg);
}

.wo-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.wo-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.wo-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.wo-modal-pov-dropdown-item span {
  flex: 1 1;
}

.wo-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.wo-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.wo-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.wo-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.wo-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.wo-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.wo-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.wo-modal-tabs--display .wo-modal-tab {
  color: #666666;
}

.wo-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.wo-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.wo-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.wo-modal-tabs--display .wo-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.wo-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.wo-modal-tabs--external .wo-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wo-modal-tabs--external.wo-modal-tabs--display .wo-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wo-modal-tabs--external .wo-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.wo-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.wo-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.wo-modal-action-button span {
  white-space: nowrap;
}

.wo-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.wo-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.wo-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wo-modal-action-button--disabled .wo-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.wo-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.wo-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.wo-modal-left-area--full .wo-modal-back-button {
  transition: width 300ms ease;
}

.wo-modal-left-area--full .wo-modal-back-button:hover {
  width: 3.5rem;
}

.wo-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.wo-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.wo-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wo-modal-content--item {
  padding-bottom: 1rem;
}

.wo-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.wo-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.wo-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.wo-modal-attachment-table-container .wo-modal-detail-table thead,
.wo-modal-attachment-table-container .wo-modal-attachment-table thead {
  box-shadow: none !important;
}

.wo-modal-attachment-table-container .wo-modal-detail-table tr,
.wo-modal-attachment-table-container .wo-modal-attachment-table tr {
  box-shadow: none !important;
}

.wo-modal-attachment-table-container .wo-modal-detail-table tbody tr:last-child,
.wo-modal-attachment-table-container .wo-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.wo-modal-attachment-table-container .wo-modal-detail-table tbody tr:last-child td,
.wo-modal-attachment-table-container .wo-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.wo-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.wo-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.wo-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.wo-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.wo-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.wo-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.wo-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.wo-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.wo-modal-attachment-filename--external {
  color: #E67E22;
}

.wo-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.wo-modal-tab-content--display .wo-modal-attachment-filename--external {
  color: #E67E22;
}

.wo-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.wo-modal-attachment-size {
  color: #666666;
}

.wo-modal-attachment-date {
  color: #666666;
}

.wo-modal-attachment-uploadedby {
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.wo-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.wo-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wo-modal-attachment-browse-btn:focus {
  outline: none;
}

.wo-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.wo-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.wo-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-attachment-browse-btn--disabled .wo-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.wo-modal-tab-content--display .wo-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.wo-modal-tab-content--display .wo-modal-attachment-filename.wo-modal-attachment-filename--external {
  color: #E67E22;
}

.wo-modal-tab-content--display .wo-modal-attachment-type {
  color: #666666;
}

.wo-modal-tab-content--display .wo-modal-attachment-size {
  color: #666666;
}

.wo-modal-tab-content--display .wo-modal-attachment-date {
  color: #666666;
}

.wo-modal-tab-content--display .wo-modal-attachment-uploadedby {
  color: #333333;
}

.wo-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.wo-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.wo-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.wo-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.wo-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.wo-modal-tab-content--display .wo-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.wo-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.wo-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.wo-modal-tab-content--display .wo-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.wo-modal-basic-section--external .wo-modal-form-input:focus {
  border-color: #F5B041;
}

.wo-modal-basic-section--external .wo-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.wo-modal-tab-content--external .wo-modal-form-input:focus,
.wo-modal-tab-content--external .wo-modal-form-textarea:focus,
.wo-modal-tab-content--external .wo-modal-custom-dropdown-input:focus,
.wo-modal-tab-content--external .wo-modal-date-input:focus,
.wo-modal-tab-content--external .wo-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.wo-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.wo-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.wo-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.wo-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.wo-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wo-modal-tab-content--display .wo-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.wo-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.wo-modal-tab-content--display .wo-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.wo-modal-partner-header-section--external .wo-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.wo-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wo-modal-tab-content--display .wo-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.wo-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.wo-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.wo-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.wo-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wo-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.wo-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.wo-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.wo-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.wo-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.wo-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.wo-modal-chat-section {
  padding: 1.5rem 0;
}

.wo-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.wo-modal-chat-header h3 {
  margin: 0;
}

.wo-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.wo-modal-chat-new-thread .wo-modal-form-textarea {
  min-height: 5rem;
}

.wo-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.wo-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wo-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wo-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.wo-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wo-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.wo-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.wo-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.wo-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.wo-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.wo-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.wo-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.wo-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.wo-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.wo-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-chat-user-name {
  color: #333333 !important;
}

.wo-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.wo-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.wo-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.wo-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.wo-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.wo-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.wo-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.wo-modal-chat-reply-btn:hover .wo-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.wo-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.wo-modal-chat-replies .wo-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.wo-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.wo-modal-chat-reply-input .wo-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.wo-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.wo-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.wo-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.wo-modal-tab-content--display .wo-modal-chat-thread {
  border-color: #E5E5E5;
}

.wo-modal-tab-content--display .wo-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display .wo-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-chat-user-position {
  background-color: #E8F5E9;
}

.wo-modal-tab-content--display .wo-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.wo-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.wo-modal-tab-content--display .wo-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.wo-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.wo-modal-notes-header-section--external .wo-modal-form-textarea:focus {
  border-color: #F5B041;
}

.wo-modal-chat-section--external .wo-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.wo-modal-chat-avatar--external {
  background-color: #F5B041;
}

.wo-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.wo-modal-tab-content--display .wo-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-thread {
  border-color: #E5E5E5;
}

.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-user-name {
  color: #333333 !important;
}

.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-user-position {
  background-color: #FDE8D0;
}

.wo-modal-tab-content--display.wo-modal-tab-content--external .wo-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.wo-modal-chat-reply-btn--external {
  color: #E67E22;
}

.wo-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.wo-modal-chat-reply-btn--external .wo-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wo-modal-chat-reply-btn--external:hover .wo-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.wo-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.wo-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.wo-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.wo-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.wo-modal-chat-textarea-wrapper {
  position: relative;
}

.wo-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.wo-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wo-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.wo-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.wo-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.wo-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.wo-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wo-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.wo-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.wo-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.wo-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.wo-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.wo-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.wo-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.wo-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.wo-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.wo-modal-tab-content--display .wo-modal-table-empty-state-title {
  color: #666666;
}

.wo-modal-tab-content--display .wo-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.wo-modal-partner-header-section + .wo-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.wo-modal-partner-header-section + .wo-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.wo-modal-partner-header-section + .wo-modal-item-content-section .wo-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.wo-modal-partner-header-section + .wo-modal-item-content-section .wo-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.wo-modal-partner-header-section + .wo-modal-item-content-section .wo-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.wo-modal-partner-header-section + .wo-modal-item-content-section .wo-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.wo-modal-partner-header-section + .wo-modal-item-content-section .wo-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.wo-modal-partner-table-container .wo-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.wo-modal-partner-table-container .wo-modal-partner-table th:last-child,
.wo-modal-partner-table-container .wo-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.wo-modal-detail-table-container--external.wo-modal-partner-table-container .wo-modal-partner-table th:last-child,
.wo-modal-detail-table-container--external.wo-modal-partner-table-container .wo-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.wo-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wo-modal-item-header-section .wo-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-tab-content--display .wo-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.wo-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.wo-modal-tab-content--display .wo-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.wo-modal-item-header-section--external .wo-modal-form-input:focus {
  border-color: #F5B041;
}

.wo-modal-item-header-section--external .wo-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.wo-modal-detail-subtabs--external .wo-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.wo-modal-detail-subtabs--external .wo-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.wo-modal-detail-subtabs--external .wo-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.wo-modal-tab-content--display .wo-modal-detail-subtabs--external .wo-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wo-modal-tab-content--display .wo-modal-detail-subtabs--external .wo-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.wo-modal-tab-content.wo-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.wo-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.wo-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.wo-modal-item-table-wrapper .wo-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.wo-modal-item-table-wrapper .wo-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.wo-modal-item-table-wrapper--terms .wo-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.wo-modal-tab-content--external.wo-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.wo-modal-tab-content--external .wo-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-tab-content--external .wo-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-tab-content--external .wo-modal-item-table-wrapper--terms .wo-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.wo-modal-tab-content--external .wo-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.wo-modal-item-table-wrapper--terms .wo-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.wo-modal-item-table-wrapper--terms .wo-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wo-modal-item-table-wrapper--terms .wo-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.wo-modal-item-table-wrapper--terms .wo-modal-detail-table tr {
  height: auto;
}

.wo-modal-item-table-wrapper--terms .wo-modal-detail-table-container .wo-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.wo-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.wo-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.wo-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.wo-modal-volume-input-group .wo-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.wo-modal-volume-input-group .wo-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.wo-modal-volume-input-group .wo-modal-sla-input-wrapper .wo-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.wo-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.wo-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.wo-modal-volume-uom-list--display .wo-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-volume-uom-list--display .wo-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.wo-modal-volume-uom-list--display .wo-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-volume-uom-list--display .wo-modal-volume-uom-check {
  color: #999999 !important;
}

.wo-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.wo-modal-volume-uom-dropdown--display .wo-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wo-modal-volume-uom-dropdown--display .wo-modal-volume-uom-item:hover {
  background-color: transparent;
}

.wo-modal-volume-uom-dropdown--display .wo-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.wo-modal-volume-uom-dropdown--display .wo-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.wo-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.wo-modal-weight-input-group .wo-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.wo-modal-weight-input-group .wo-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.wo-modal-weight-input-group .wo-modal-sla-input-wrapper .wo-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.wo-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.wo-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-weight-uom-input::placeholder {
  color: #999999;
}

.wo-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.wo-modal-weight-uom-dropdown--display .wo-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wo-modal-weight-uom-dropdown--display .wo-modal-weight-uom-item:hover {
  background-color: transparent;
}

.wo-modal-weight-uom-dropdown--display .wo-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.wo-modal-weight-uom-dropdown--display .wo-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.wo-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.wo-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.wo-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.wo-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.wo-modal-form-input--display ~ .wo-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.wo-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.wo-modal-form-input--display {
  cursor: default;
}

.wo-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.wo-modal-form-label--display {
  color: #333333 !important;
}

.wo-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.wo-modal-form-label--display .wo-modal-required {
  color: #FF4D4F;
}

.wo-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.wo-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.wo-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.wo-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.wo-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.wo-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.wo-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wo-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.wo-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.wo-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.wo-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.wo-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.wo-modal-sla-spinner-btn:disabled .wo-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wo-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sla-spinner-btn:hover .wo-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.wo-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.wo-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.wo-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.wo-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.wo-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.wo-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.wo-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.wo-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.wo-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.wo-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.wo-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.wo-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.wo-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.wo-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.wo-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.wo-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.wo-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.wo-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.wo-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.wo-modal-stage-dropdown-input--display .wo-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.wo-modal-stage-dropdown-input--display .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.wo-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.wo-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.wo-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.wo-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.wo-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wo-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.wo-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.wo-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.wo-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.wo-modal-accordion-header--display {
  color: #333333;
}

.wo-modal-accordion-header--display.wo-modal-accordion-header--active {
  color: #333333;
}

.wo-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.wo-modal-accordion-header--display .wo-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.wo-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.wo-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.wo-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.wo-modal-stage-main-title--display {
  color: #138B4C;
}

.wo-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-stage-title--display {
  color: #333333;
}

.wo-modal-stage-current {
  margin-bottom: 1.875rem;
}

.wo-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.wo-modal-stage-label--display {
  color: #666666;
}

.wo-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-stage-subtitle--display {
  color: #333333;
}

.wo-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.wo-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.wo-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.wo-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.wo-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.wo-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.wo-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.wo-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.wo-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wo-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.wo-modal-download-button:active {
  background-color: #E0E0E0;
}

.wo-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-download-button--display .wo-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.wo-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.wo-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.wo-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.wo-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.wo-modal-timeline-item--display .wo-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.wo-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.wo-modal-timeline-badge--inactive .wo-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.wo-modal-timeline-item--display .wo-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.wo-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.wo-modal-timeline-item--display .wo-modal-timeline-line {
  background-color: #138B4C;
}

.wo-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wo-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.wo-modal-timeline-status--display {
  color: #333333;
}

.wo-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.wo-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.wo-modal-timeline-date--display {
  color: #666666;
}

.wo-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.wo-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.wo-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.wo-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.wo-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.wo-modal-timeline-document--display {
  color: #138B4C;
}

.wo-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.wo-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.wo-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.wo-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.wo-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.wo-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.wo-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.wo-modal-activity-item--display .wo-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.wo-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.wo-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.wo-modal-activity-item--display .wo-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.wo-modal-activity-item--display .wo-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.wo-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.wo-modal-activity-item--display .wo-modal-activity-line {
  background-color: #138B4C;
}

.wo-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.wo-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.wo-modal-activity-type--display {
  color: #333333;
}

.wo-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.wo-modal-activity-header--display {
  color: #666666;
}

.wo-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.wo-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.wo-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.wo-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.wo-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.wo-modal-activity-change--display .wo-modal-activity-field {
  color: #333333;
}

.wo-modal-activity-change--display .wo-modal-activity-new {
  color: #138B4C;
}

.wo-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.wo-modal-activity-date--display {
  color: #666666;
}

.wo-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.wo-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.wo-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.wo-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.wo-modal-activity-more--display {
  color: #138B4C;
}

.wo-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-activity-more--display .wo-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.wo-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.wo-modal-reference-table thead {
  background-color: #F9F9F9;
}

.wo-modal-tab-content--display .wo-modal-reference-table thead {
  background-color: #FAFAFA;
}

.wo-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.wo-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.wo-modal-tab-content--display .wo-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.wo-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.wo-modal-tab-content--display .wo-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.wo-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.wo-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.wo-modal-detail-subtab:hover {
  color: #138B4C;
}

.wo-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.wo-modal-tab-content--display .wo-modal-detail-subtab {
  color: #666666;
}

.wo-modal-tab-content--display .wo-modal-detail-subtab:hover {
  color: #138B4C;
}

.wo-modal-tab-content--display .wo-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.wo-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.wo-modal-tab-content.wo-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.wo-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-detail-delivery-wrapper .wo-modal-form-label {
  flex-shrink: 0;
}

.wo-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.wo-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.wo-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.wo-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wo-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wo-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wo-modal-detail-table-container .wo-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wo-modal-detail-table-container .wo-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wo-modal-detail-table-container .wo-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.wo-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.wo-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.wo-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.wo-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.wo-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.wo-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.wo-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-detail-table th,
.wo-modal-tab-content--display .wo-modal-packaging-table th,
.wo-modal-tab-content--display .wo-modal-partner-table th,
.wo-modal-tab-content--display .wo-modal-attachment-table th {
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-detail-table td,
.wo-modal-tab-content--display .wo-modal-packaging-table td,
.wo-modal-tab-content--display .wo-modal-partner-table td,
.wo-modal-tab-content--display .wo-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-description,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-text,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-batch,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-serial,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-after-sales/service-order,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-so-item,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-package-no,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-product-type,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-product-group,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-product-category,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wo-modal-tab-content--display .wo-modal-detail-table tbody tr:hover .wo-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-description,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-text,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-batch,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-serial,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-after-sales/service-order,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-so-item,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-package-no,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-type,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-group,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-category,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .wo-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.wo-modal-detail-table-container .wo-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.wo-modal-detail-table-container .wo-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.wo-modal-detail-table-container--external .wo-modal-detail-table td {
  color: #555555 !important;
}

.wo-modal-detail-table-container .wo-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.wo-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.wo-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.wo-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.wo-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.wo-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.wo-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.wo-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Service Order No. column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-after-sales/service-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.wo-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.wo-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wo-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wo-modal-detail-table tbody tr:hover .detail-table-description,
.wo-modal-detail-table tbody tr:hover .detail-table-text,
.wo-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wo-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wo-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wo-modal-detail-table tbody tr:hover .detail-table-batch,
.wo-modal-detail-table tbody tr:hover .detail-table-serial,
.wo-modal-detail-table tbody tr:hover .detail-table-after-sales/service-order,
.wo-modal-detail-table tbody tr:hover .detail-table-so-item,
.wo-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wo-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wo-modal-detail-table tbody tr:hover .detail-table-package-no,
.wo-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wo-modal-detail-table tbody tr:hover .detail-table-product-type,
.wo-modal-detail-table tbody tr:hover .detail-table-product-group,
.wo-modal-detail-table tbody tr:hover .detail-table-product-category,
.wo-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wo-modal-detail-table tbody tr:hover .wo-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-description,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-text,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-batch,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-serial,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-after-sales/service-order,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-so-item,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-package-no,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-type,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-group,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-category,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .wo-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.wo-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.wo-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.wo-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.wo-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.wo-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.wo-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wo-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.wo-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.wo-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.wo-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.wo-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.wo-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.wo-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.wo-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.wo-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.wo-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.wo-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.wo-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.wo-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.wo-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.wo-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.wo-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wo-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.wo-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wo-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.wo-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.wo-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wo-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.wo-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.wo-modal-add-item-btn--disabled .wo-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.wo-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Service Order Table - Same style as Detail Delivery Table */
.wo-modal-service-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.wo-modal-service-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.wo-modal-service-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wo-modal-service-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wo-modal-service-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table tbody {
  background-color: #FFFFFF;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table tbody tr:last-child {
  border-bottom: none;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.wo-modal-service-order-table-container .wo-modal-service-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.wo-modal-service-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.wo-modal-service-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wo-modal-service-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.wo-modal-service-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.wo-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.wo-modal-table-input:focus {
  outline: none;
}

.wo-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.wo-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.wo-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.wo-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.wo-modal-tags-container {
  position: relative;
  width: 100%;
}

.wo-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wo-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wo-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.wo-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.wo-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.wo-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.wo-modal-tags-input--display .wo-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.wo-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.wo-modal-tag-remove:hover {
  color: #333333;
}

.wo-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.wo-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wo-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.wo-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.wo-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.wo-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.wo-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.wo-modal-status-container {
  position: relative;
  width: 100%;
}

.wo-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wo-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wo-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.wo-modal-status-placeholder {
  color: #999999;
}

.wo-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.wo-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wo-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.wo-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-status-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-status-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.wo-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.wo-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.wo-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.wo-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.wo-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.wo-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.wo-modal-status-input--display .wo-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.wo-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.wo-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wo-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wo-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.wo-modal-stage-dropdown-placeholder {
  color: #999999;
}

.wo-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.wo-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wo-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.wo-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.wo-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.wo-modal-stage--created .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.wo-modal-stage--approved .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.wo-modal-stage--processed .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.wo-modal-stage--picked .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.wo-modal-stage--packed .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.wo-modal-stage--planned .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.wo-modal-stage--loaded .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.wo-modal-stage--issued .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.wo-modal-stage--departed .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.wo-modal-stage--arrived .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.wo-modal-stage--unloaded .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.wo-modal-stage--delivered .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.wo-modal-stage--confirmed .wo-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.wo-modal-stage--billed .wo-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.wo-modal-stage-dropdown-input .wo-modal-stage,
.wo-modal-stage-dropdown-item .wo-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.wo-modal-baseline-date-dropdown {
  position: relative;
}

.wo-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wo-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.wo-modal-reference-type-dropdown {
  position: relative;
}

.wo-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wo-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.wo-modal-delivery-priority-dropdown {
  position: relative;
}

.wo-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wo-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.wo-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.wo-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.wo-modal-delivery-priority-separator {
  color: #666666;
}

.wo-modal-delivery-priority-name {
  color: #333333;
}

.wo-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.wo-modal-organization-dropdown {
  position: relative;
}

.wo-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.wo-modal-organization-dropdown-content--display .wo-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-organization-dropdown-content--display .wo-modal-organization-item:hover {
  background-color: transparent !important;
}

.wo-modal-organization-dropdown-content--display .wo-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-organization-dropdown-content--display .wo-modal-organization-code,
.wo-modal-organization-dropdown-content--display .wo-modal-organization-name,
.wo-modal-organization-dropdown-content--display .wo-modal-organization-separator {
  color: #999999 !important;
}

.wo-modal-organization-dropdown-content--display .wo-modal-organization-check {
  color: #999999 !important;
}

.wo-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-organization-separator {
  color: #999999;
}

.wo-modal-organization-name {
  color: #333333;
}

.wo-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.wo-modal-sales-structure-dropdown {
  position: relative;
}

.wo-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.wo-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.wo-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-sales-structure-separator {
  color: #999999;
}

.wo-modal-sales-structure-name {
  color: #333333;
}

.wo-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.wo-modal-delivery-type-dropdown {
  position: relative;
}

.wo-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.wo-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wo-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wo-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wo-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.wo-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.wo-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.wo-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-delivery-type-separator {
  color: #999999;
}

.wo-modal-delivery-type-description {
  color: #333333;
}

.wo-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.wo-modal-content::-webkit-scrollbar,
.wo-modal-stage-content::-webkit-scrollbar,


.wo-modal-content::-webkit-scrollbar-track,
.wo-modal-stage-content::-webkit-scrollbar-track,


.wo-modal-content::-webkit-scrollbar-thumb,
.wo-modal-stage-content::-webkit-scrollbar-thumb,


.wo-modal-content::-webkit-scrollbar-thumb:hover,
.wo-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.wo-modal-sales-channel-dropdown {
  position: relative;
}

.wo-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wo-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-sales-channel-separator {
  color: #999999;
}

.wo-modal-sales-channel-name {
  color: #333333;
}

.wo-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.wo-modal-sales-unit-dropdown {
  position: relative;
}

.wo-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wo-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-sales-unit-separator {
  color: #999999;
}

.wo-modal-sales-unit-name {
  color: #333333;
}

.wo-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.wo-modal-organization-item--placeholder,
.wo-modal-sales-structure-item--placeholder,
.wo-modal-sales-channel-item--placeholder,
.wo-modal-sales-unit-item--placeholder,
.wo-modal-territory-item--placeholder,
.wo-modal-sales-office-item--placeholder,
.wo-modal-sold-to-party-item--placeholder,
.wo-modal-deliver-to-party-item--placeholder,
.wo-modal-attention-to-deliver-item--placeholder,
.wo-modal-incoterm-item--placeholder,
.wo-modal-delivery-point-item--placeholder,
.wo-modal-shipping-point-item--placeholder,
.wo-modal-service-order-item--placeholder,
.wo-modal-sales-team-item--placeholder,
.wo-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.wo-modal-organization-item--placeholder:hover,
.wo-modal-sales-structure-item--placeholder:hover,
.wo-modal-sales-channel-item--placeholder:hover,
.wo-modal-sales-unit-item--placeholder:hover,
.wo-modal-territory-item--placeholder:hover,
.wo-modal-sales-office-item--placeholder:hover,
.wo-modal-sold-to-party-item--placeholder:hover,
.wo-modal-deliver-to-party-item--placeholder:hover,
.wo-modal-attention-to-deliver-item--placeholder:hover,
.wo-modal-incoterm-item--placeholder:hover,
.wo-modal-delivery-point-item--placeholder:hover,
.wo-modal-shipping-point-item--placeholder:hover,
.wo-modal-service-order-item--placeholder:hover,
.wo-modal-sales-team-item--placeholder:hover,
.wo-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.wo-modal-sold-to-party-dropdown {
  position: relative;
}

.wo-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-sold-to-party-input:focus,
.wo-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.wo-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.wo-modal-sold-to-party-separator {
  color: #999999;
}

.wo-modal-sold-to-party-name {
  color: #333333;
}

.wo-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.wo-modal-deliver-to-party-dropdown {
  position: relative;
}

.wo-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wo-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.wo-modal-deliver-to-party-separator {
  color: #999999;
}

.wo-modal-deliver-to-party-name {
  color: #333333;
}

.wo-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.wo-modal-attention-to-deliver-dropdown {
  position: relative;
}
.wo-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.wo-modal-attention-to-deliver-separator {
  color: #999999;
}
.wo-modal-attention-to-deliver-name {
  color: #333333;
}
.wo-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.wo-modal-incoterm-dropdown {
  position: relative;
}
.wo-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.wo-modal-incoterm-separator {
  color: #999999;
}
.wo-modal-incoterm-name {
  color: #333333;
}
.wo-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.wo-modal-delivery-point-dropdown {
  position: relative;
}
.wo-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wo-modal-delivery-point-separator {
  color: #999999;
}
.wo-modal-delivery-point-name {
  color: #333333;
}
.wo-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.wo-modal-shipping-point-dropdown {
  position: relative;
}
.wo-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wo-modal-shipping-point-separator {
  color: #999999;
}
.wo-modal-shipping-point-name {
  color: #333333;
}
.wo-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Service Order Dropdown Styles */
.wo-modal-service-order-dropdown {
  position: relative;
}
.wo-modal-service-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-service-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-service-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-service-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-service-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-service-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-service-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-service-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-service-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-service-order-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-service-order-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-service-order-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-service-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-service-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.wo-modal-service-order-separator {
  color: #999999;
}
.wo-modal-service-order-name {
  color: #333333;
}
.wo-modal-service-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-service-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.wo-modal-date-picker {
  position: relative;
}
.wo-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.wo-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.wo-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.wo-modal-date-input::-webkit-datetime-edit-text,
.wo-modal-date-input::-webkit-datetime-edit-month-field,
.wo-modal-date-input::-webkit-datetime-edit-day-field,
.wo-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.wo-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.wo-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.wo-modal-sales-person-dropdown {
  position: relative;
}
.wo-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.wo-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.wo-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.wo-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wo-modal-sales-person-separator {
  color: #999999;
}
.wo-modal-sales-person-name {
  color: #333333;
}
.wo-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.wo-modal-sales-team-dropdown {
  position: relative;
}
.wo-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wo-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wo-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wo-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wo-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wo-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wo-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wo-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.wo-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.wo-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.wo-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wo-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.wo-modal-sales-team-separator {
  color: #999999;
}
.wo-modal-sales-team-name {
  color: #333333;
}
.wo-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wo-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.wo-modal-territory-dropdown {
  position: relative;
}

.wo-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wo-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-territory-separator {
  color: #999999;
}

.wo-modal-territory-name {
  color: #333333;
}

.wo-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.wo-modal-sales-office-dropdown {
  position: relative;
}

.wo-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wo-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wo-modal-sales-office-separator {
  color: #999999;
}

.wo-modal-sales-office-name {
  color: #333333;
}

.wo-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Service Order Section */
.wo-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wo-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.wo-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.wo-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.wo-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wo-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wo-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-table-dropdown-input:focus {
  outline: none;
}

.wo-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.wo-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.wo-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.wo-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.wo-modal-delivery-type-list::-webkit-scrollbar,
.wo-modal-stage-dropdown-list::-webkit-scrollbar,
.wo-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wo-modal-delivery-type-list::-webkit-scrollbar-track,
.wo-modal-stage-dropdown-list::-webkit-scrollbar-track,
.wo-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-delivery-type-list::-webkit-scrollbar-thumb,
.wo-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.wo-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wo-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.wo-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.wo-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.wo-modal-wrapper,
.wo-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.service-order-modal,
.wo-modal-wrapper,
.wo-modal-wrapper *,
.wo-modal-content,
.wo-modal-data-flow-2-container,
.wo-modal-data-flow-container,
.wo-modal-calendar-container,
.wo-modal-calendar-milestones-list,
.wo-modal-calendar-view,
.wo-modal-calendar-yearly,
.wo-modal-calendar-monthly,
.wo-modal-calendar-weekly,
.wo-modal-calendar-weekly-body,
.wo-modal-calendar-daily,
.wo-modal-calendar-daily-timeline,
.wo-modal-calendar-grid,
.wo-modal-calendar-grid-body,
.wo-modal-detail-table-container,
.wo-modal-item-table-wrapper,
.wo-modal-attachment-table-container,
.wo-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.wo-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wo-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wo-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.wo-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.wo-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.wo-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.wo-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.wo-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.wo-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-tab-content--display .wo-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.wo-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-tab-content--display .wo-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.wo-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.wo-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.wo-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) {
  font-weight: 600;
}

.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) .wo-modal-packaging-input,
.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) .wo-modal-packaging-input--display,
.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) .wo-modal-handling-product-input,
.wo-modal-packaging-row--unassigned:not(.wo-modal-packaging-row--expanded) .wo-modal-handling-product-input--display {
  font-weight: 600;
}

.wo-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.wo-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row td.wo-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row td.wo-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row td.wo-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td.wo-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded td.wo-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row--expanded:hover td.wo-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display,
.wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display,
.wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.wo-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.wo-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-tab-content--display .wo-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.wo-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-tab-content--display .wo-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.wo-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.wo-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.wo-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.wo-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.wo-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.wo-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.wo-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.wo-modal-packaging-detail-table th:first-child,
.wo-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.wo-modal-packaging-detail-table th:nth-child(2),
.wo-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.wo-modal-packaging-detail-table th:nth-child(3),
.wo-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.wo-modal-packaging-detail-table td:nth-child(4),
.wo-modal-packaging-detail-table td:nth-child(6),
.wo-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.wo-modal-packaging-detail-table td:nth-child(5),
.wo-modal-packaging-detail-table td:nth-child(7),
.wo-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.wo-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.wo-modal-tab-content--display .wo-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display .wo-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.wo-modal-tab-content--display .wo-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.wo-modal-tab-content--display .wo-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.wo-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.wo-modal-packaging-table td:last-child,
.wo-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.wo-modal-packaging-table td:last-child .wo-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.wo-modal-detail-table-container--external .wo-modal-packaging-table th:last-child,
.wo-modal-detail-table-container--external .wo-modal-packaging-table td.wo-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.wo-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.wo-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wo-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wo-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.wo-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.wo-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.wo-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.wo-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.wo-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.wo-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.wo-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.wo-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.wo-modal-packaging-child-table tr {
  border: none !important;
}

.wo-modal-packaging-child-table thead,
.wo-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.wo-modal-packaging-child-table th:first-child,
.wo-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.wo-modal-packaging-child-table th:nth-child(2),
.wo-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.wo-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.wo-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.wo-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.wo-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.wo-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.wo-modal-packaging-child-table th:nth-child(3),
.wo-modal-packaging-child-table td:nth-child(3),
.wo-modal-packaging-child-table th:nth-child(4),
.wo-modal-packaging-child-table td:nth-child(4),
.wo-modal-packaging-child-table th:nth-child(5),
.wo-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.wo-modal-packaging-child-table th:nth-child(6),
.wo-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.wo-modal-packaging-child-table th:nth-child(7),
.wo-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.wo-modal-detail-table-container--external .wo-modal-packaging-child-table th:last-child,
.wo-modal-detail-table-container--external .wo-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.wo-modal-packaging-child-table td:last-child .wo-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.wo-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.wo-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wo-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.wo-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.wo-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row {
  transition: none !important;
}

.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display,
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display:focus,
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display,
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display:focus,
.wo-modal-tab-content--display .wo-modal-detail-table-container .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display:focus,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display:focus,
.wo-modal-tab-content--display .wo-modal-detail-table-container--external .wo-modal-packaging-table tbody tr.wo-modal-packaging-row:hover td .wo-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.wo-modal-detail-table-container--external .wo-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.wo-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wo-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.wo-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.wo-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.wo-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.wo-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.wo-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.wo-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.wo-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.wo-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.wo-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.wo-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.wo-modal-detail-table-container--external .wo-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.wo-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-item--display {
  color: #999999 !important;
}

.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-code,
.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-name,
.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-separator {
  color: #999999 !important;
}

.wo-modal-handling-product-dropdown-content--display .wo-modal-handling-product-check {
  color: #999999 !important;
}

.wo-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.wo-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.wo-modal-handling-product-dropdown-content--narrow .wo-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.wo-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.wo-modal-packaging-detail-table .wo-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.wo-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.wo-modal-detail-table-container--dropdown-open .wo-modal-detail-table {
  overflow: visible;
}

.wo-modal-detail-table-container--dropdown-open .wo-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.wo-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wo-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wo-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.wo-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.wo-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.wo-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.wo-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.wo-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.wo-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.wo-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wo-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.wo-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.wo-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.wo-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.wo-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.wo-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.wo-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.wo-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wo-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.wo-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.wo-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-item:hover {
  background-color: transparent;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-item--placeholder {
  display: none;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-code,
.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-name,
.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-separator {
  color: #555555;
}

.wo-modal-handling-product-dropdown-content--view-only .wo-modal-handling-product-check {
  color: #888888;
}

.wo-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.wo-modal-handling-product-separator {
  color: #999999;
}

.wo-modal-handling-product-name {
  color: #333333;
}

.wo-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wo-modal-handling-product-item--placeholder {
  cursor: default;
}

.wo-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.wo-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.wo-modal-detail-table td:has(.wo-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.wo-modal-detail-table td .wo-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.wo-modal-detail-table td .wo-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.wo-modal-detail-table td .wo-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.wo-modal-detail-table td .wo-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.wo-modal-detail-table td .wo-modal-handling-product-input--display,
.wo-modal-detail-table td .wo-modal-handling-product-input--display:focus,
.wo-modal-detail-table td .wo-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display,
.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display:focus,
.wo-modal-detail-table-container .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display:focus,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover td .wo-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.wo-modal-detail-table td .wo-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.wo-modal-detail-table td .wo-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.wo-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.wo-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.wo-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.wo-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-table-text-icon-btn--filled:not(.wo-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.wo-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.wo-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wo-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.wo-modal-table-text-icon-btn--display.wo-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.wo-modal-table-text-icon-btn--display.wo-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-table-text-icon-btn--display.wo-modal-table-text-icon-btn--external.wo-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.wo-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.wo-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.wo-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.wo-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.wo-modal-serial-assignment-btn {
  width: 10.625rem;
}

.wo-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.wo-modal-batch-assignment-btn--filled .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.wo-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.wo-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.wo-modal-batch-assignment-btn--display .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-batch-assignment-btn--display.wo-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.wo-modal-batch-assignment-btn--display.wo-modal-batch-assignment-btn--filled .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.wo-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.wo-modal-secured-qty-btn.wo-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.wo-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.wo-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.wo-modal-secured-qty-btn--grey .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.wo-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.wo-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.wo-modal-batch-assignment-btn--partial .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.wo-modal-batch-assignment-btn--display.wo-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.wo-modal-batch-assignment-btn--display.wo-modal-batch-assignment-btn--partial .wo-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.wo-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.wo-modal-secured-qty-modal .wo-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.wo-modal-secured-qty-modal .wo-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.wo-modal-secured-qty-modal.wo-modal-batch-assignment-modal--display .wo-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.wo-modal-secured-qty-modal .wo-modal-item-text-content {
  overflow-x: hidden;
}

.wo-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.wo-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.wo-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.wo-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.wo-modal-batch-assignment-modal--display .wo-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.wo-modal-batch-assignment-modal--display .wo-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.wo-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.wo-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.wo-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.wo-modal-secured-qty-lock-btn--open .wo-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.wo-modal-secured-qty-lock-btn--locked .wo-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.wo-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.wo-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.wo-modal-batch-assignment-modal .wo-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.wo-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.wo-modal-batch-assignment-modal .wo-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.wo-modal-batch-assignment-modal .wo-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.wo-modal-batch-assignment-modal.wo-modal-batch-assignment-modal--display .wo-modal-item-text-info {
  background-color: #F2F8EA;
}

.wo-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wo-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.wo-modal-batch-assignment-info-group {
  flex: 1 1;
}

.wo-modal-batch-assignment-info-group .wo-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wo-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.wo-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wo-modal-batch-assignment-table-section .wo-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wo-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.wo-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wo-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wo-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.wo-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.wo-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.wo-modal-batch-assignment-table th,
.wo-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.wo-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.wo-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.wo-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.wo-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.wo-modal-batch-assignment-table tbody td:has(.wo-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.wo-modal-batch-assignment-table tbody td:has(.wo-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.wo-modal-batch-assignment-table tbody td:nth-child(2),
.wo-modal-batch-assignment-table tbody td:nth-child(3),
.wo-modal-batch-assignment-table tbody td:nth-child(4),
.wo-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.wo-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.wo-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.wo-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wo-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.wo-modal-batch-assignment-modal--display .wo-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.wo-modal-batch-assignment-modal--display .wo-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.wo-modal-batch-assignment-modal--display .wo-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-batch-assignment-modal--display .wo-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.wo-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.wo-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.wo-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.wo-modal-batch-assignment-table .wo-modal-placeholder-text {
  color: #CCCCCC;
}

.wo-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.wo-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.wo-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.wo-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.wo-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.wo-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.wo-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.wo-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.wo-modal-batch-assignment-table th.batch-table-frozen-batch,
table.wo-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.wo-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.wo-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.wo-modal-batch-assignment-table td.batch-table-frozen-batch,
table.wo-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.wo-modal-batch-assignment-table th.batch-table-frozen-batch,
table.wo-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.wo-modal-batch-assignment-table th.batch-table-frozen-assign,
table.wo-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.wo-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.wo-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.wo-modal-item-text-info {
  margin-bottom: 1rem;
}

.wo-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.wo-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.wo-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.wo-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.wo-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.wo-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.wo-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.wo-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-item-text-modal .modal-header .modal-title,
.wo-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.wo-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.wo-modal-item-text-label--display {
  color: #333333;
}

.wo-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.wo-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.wo-modal-item-text-modal .wo-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.wo-modal-item-text-modal .wo-modal-item-text-textarea-wrapper .wo-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.wo-modal-item-text-textarea {
  overflow-y: auto !important;
}

.wo-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.wo-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wo-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.wo-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.wo-modal-add-do-item-modal .wo-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.wo-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wo-modal-add-do-item-dropdown-section .wo-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wo-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wo-modal-add-do-item-table-section .wo-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.wo-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.wo-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.wo-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wo-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.wo-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.wo-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.wo-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.wo-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.wo-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.wo-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.wo-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.wo-modal-detail-table td:first-child .wo-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.wo-modal-detail-table td:first-child .wo-modal-partner-type-input {
  padding-left: 0.625rem;
}

.wo-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.wo-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.wo-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wo-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.wo-modal-partner-type-dropdown--display .wo-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.wo-modal-partner-type-dropdown-content--display .wo-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-partner-type-dropdown-content--display .wo-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.wo-modal-partner-type-dropdown-content--display .wo-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-partner-type-dropdown-content--display .wo-modal-partner-type-check {
  color: #999999 !important;
}

.wo-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.wo-modal-partner-type-dropdown--display .wo-modal-partner-type-value {
  color: #555555;
}

.wo-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.wo-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.wo-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.wo-modal-partner-type-item--placeholder {
  cursor: default;
}

.wo-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.wo-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wo-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.wo-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.wo-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.wo-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.wo-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wo-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.wo-modal-partner-id-dropdown--display .wo-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-code,
.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-name,
.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-separator {
  color: #999999 !important;
}

.wo-modal-partner-id-dropdown-content--display .wo-modal-partner-id-check {
  color: #999999 !important;
}

.wo-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.wo-modal-partner-id-dropdown--display .wo-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.wo-modal-detail-table tbody tr:hover .wo-modal-partner-type-dropdown--display .wo-modal-partner-type-input-wrapper,
.wo-modal-detail-table tbody tr:hover .wo-modal-partner-id-dropdown--display .wo-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .wo-modal-partner-type-dropdown--display .wo-modal-partner-type-input-wrapper,
.wo-modal-detail-table-container--external .wo-modal-detail-table tbody tr:hover .wo-modal-partner-id-dropdown--display .wo-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.wo-modal-partner-type-arrow--external {
  visibility: hidden;
}

.wo-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.wo-modal-partner-type-dropdown--external .wo-modal-partner-type-value {
  color: #555555;
}

.wo-modal-partner-id-dropdown--external .wo-modal-partner-id-value {
  color: #555555;
}

.wo-modal-detail-table-container--external .wo-modal-detail-table td.wo-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.wo-modal-partner-header-section--external .wo-modal-form-input--display {
  color: #555555;
}

.wo-modal-detail-table td.wo-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.wo-modal-tab-content--display .wo-modal-detail-table td.wo-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.wo-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wo-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wo-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.wo-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.wo-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.wo-modal-partner-id-item--placeholder {
  cursor: default;
}

.wo-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.wo-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.wo-modal-partner-id-separator {
  color: #999999;
}

.wo-modal-partner-id-name {
  color: #666666;
}

.wo-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wo-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.wo-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.wo-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wo-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wo-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wo-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.wo-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wo-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wo-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.wo-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.wo-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.wo-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.wo-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.wo-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.wo-modal-data-flow-stage--completed .wo-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wo-modal-data-flow-stage--active .wo-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wo-modal-data-flow-stage--completed .wo-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-data-flow-stage--active .wo-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.wo-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.wo-modal-data-flow-stage--completed .wo-modal-data-flow-stage-label {
  color: #138B4C;
}

.wo-modal-data-flow-stage--active .wo-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.wo-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.wo-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.wo-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.wo-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.wo-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.wo-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wo-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.wo-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.wo-modal-data-flow-document--active .wo-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.wo-modal-data-flow-document-fold {
  display: none;
}

.wo-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.wo-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.wo-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.wo-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.wo-modal-data-flow-document-icon-wrapper--active .wo-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.wo-modal-data-flow-document--active .wo-modal-data-flow-document-title {
  color: #138B4C;
}

.wo-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.wo-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.wo-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.wo-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.wo-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.wo-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.wo-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.wo-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.wo-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wo-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.wo-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.wo-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.wo-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.wo-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.wo-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.wo-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.wo-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.wo-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.wo-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wo-modal-terms-area-button .wo-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.wo-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.wo-modal-tab-content--display .wo-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.wo-modal-tab-content--display .wo-modal-terms-area-button .wo-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.wo-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wo-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.wo-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.wo-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wo-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wo-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wo-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.wo-modal-data-flow-2-row {
  display: flex;
}

.wo-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wo-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.wo-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.wo-modal-data-flow-2-row--content .wo-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.wo-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.wo-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.wo-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.wo-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-label {
  color: #333333;
}

.wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage-label {
  color: #999999;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--completed .wo-modal-data-flow-2-stage-label {
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--active .wo-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.wo-modal-tab-content--display .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.wo-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.wo-modal-data-flow-2-row--content .wo-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.wo-modal-data-flow-2-row--content .wo-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.wo-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wo-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.wo-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.wo-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.wo-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wo-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.wo-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.wo-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.wo-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-title,
.wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-title {
  color: #333333;
}

.wo-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.wo-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.wo-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.wo-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-title {
  color: #888888;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-title,
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-title {
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--completed .wo-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--active .wo-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-date {
  color: #333333;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.wo-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.wo-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.wo-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.wo-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.wo-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.wo-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.wo-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wo-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wo-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wo-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.wo-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.wo-modal-data-flow-2-grid--external .wo-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.wo-modal-data-flow-2-grid--external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell {
  border-bottom: none;
}

.wo-modal-data-flow-2-grid--external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.wo-modal-data-flow-2-grid--external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell--label::after {
  display: none;
}

.wo-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.wo-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.wo-modal-data-flow-2-row--content-top .wo-modal-data-flow-2-document--buyer.wo-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.wo-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.wo-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.wo-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.wo-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.wo-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.wo-modal-data-flow-2-stage--external-completed .wo-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.wo-modal-data-flow-2-stage--external-active .wo-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.wo-modal-data-flow-2-stage--external-completed .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.wo-modal-data-flow-2-stage--external-active .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.wo-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.wo-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wo-modal-data-flow-2-document--external .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.wo-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.wo-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.wo-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.wo-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.wo-modal-data-flow-2-document--external .wo-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.wo-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.wo-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wo-modal-data-flow-2-document--supplier .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.wo-modal-data-flow-2-document--supplier .wo-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.wo-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.wo-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.wo-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wo-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier .wo-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier .wo-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-completed .wo-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--supplier-active .wo-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.wo-modal-tab-content--data-flow-2-external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.wo-modal-tab-content--data-flow-2-external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external .wo-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external .wo-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.wo-modal-tab-content--display.wo-modal-tab-content--data-flow-2-external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.wo-modal-tab-content--display.wo-modal-tab-content--data-flow-2-external .wo-modal-data-flow-2-row--header .wo-modal-data-flow-2-cell:has(.wo-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-circle,
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external-completed .wo-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external-active .wo-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-icon,
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external-completed .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external-active .wo-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-stage--external .wo-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-completed .wo-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.wo-modal-tab-content--display .wo-modal-data-flow-2-document--external-active .wo-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.wo-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.wo-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.wo-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.wo-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.wo-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.wo-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wo-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wo-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wo-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.wo-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.wo-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.wo-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.wo-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.wo-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wo-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.wo-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.wo-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.wo-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.wo-modal-milestone-date-value {
  color: #666666;
}

.wo-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.wo-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.wo-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.wo-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.wo-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.wo-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wo-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.wo-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wo-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.wo-modal-activity-item--display .wo-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.wo-modal-calendar-milestones .wo-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.wo-modal-calendar-milestones .wo-modal-activity-user:hover {
  text-decoration: none;
}

.wo-modal-calendar-milestones .wo-modal-activity-item--display .wo-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.wo-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.wo-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wo-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.wo-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.wo-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-calendar-nav-btn:hover .wo-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.wo-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.wo-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.wo-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.wo-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.wo-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.wo-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.wo-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.wo-modal-calendar-view-mode-btn--active + .wo-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.wo-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wo-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.wo-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.wo-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.wo-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wo-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wo-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.wo-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.wo-modal-calendar-grid-cell:nth-child(7n-1),
.wo-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.wo-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.wo-modal-calendar-grid-day-name:nth-child(6),
.wo-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.wo-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.wo-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wo-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.wo-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.wo-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.wo-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.wo-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.wo-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wo-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.wo-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wo-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.wo-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wo-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.wo-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.wo-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.wo-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wo-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.wo-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.wo-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.wo-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wo-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.wo-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wo-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wo-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.wo-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.wo-modal-calendar-weekly-day-column:nth-child(6),
.wo-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.wo-modal-calendar-weekly-day-header:nth-child(6),
.wo-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.wo-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.wo-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wo-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wo-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.wo-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wo-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wo-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.wo-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.wo-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wo-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.wo-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wo-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.wo-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wo-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wo-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.wo-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.wo-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.wo-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.wo-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wo-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wo-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.wo-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wo-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wo-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.wo-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-view {
  border-color: #D0D0D0;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-view-mode-btn--active + .wo-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-milestones-header {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-view-title {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-grid-day-name {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-grid-cell-day {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-weekly-day-name {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-weekly-day-date {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-weekly-event-title {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-daily-header {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-daily-hour-label {
  color: #666666;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-daily-event-title {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar .wo-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.wo-modal-calendar-milestones-header--external {
  color: #333333;
}

.wo-modal-calendar-nav-btn--external .wo-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wo-modal-calendar-nav-btn--external:hover .wo-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.wo-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.wo-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.wo-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.wo-modal-calendar-view-mode-btn--active-external + .wo-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.wo-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.wo-modal-tab-content--calendar-external .wo-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.wo-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.wo-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.wo-modal-activity-type--external {
  color: #333333;
}

.wo-modal-activity-user--external {
  color: #E67E22;
}

.wo-modal-activity-user--external:hover {
  color: #D35400;
}

.wo-modal-calendar-milestones .wo-modal-activity-user--external {
  color: #E67E22;
}

.wo-modal-calendar-milestones .wo-modal-activity-user--external:hover {
  color: #D35400;
}

.wo-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.wo-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wo-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wo-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wo-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.wo-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wo-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wo-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wo-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.wo-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wo-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wo-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wo-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-milestones-header--external {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-view-mode-btn--active-external + .wo-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-calendar-nav-btn--external .wo-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-activity-type--external {
  color: #333333;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-activity-user--external {
  color: #E67E22;
}

.wo-modal-tab-content--display.wo-modal-tab-content--calendar-external .wo-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.wo-modal-input--error,
.wo-modal-form-input.wo-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.wo-modal-dropdown--error .wo-modal-delivery-type-input,
.wo-modal-dropdown--error .wo-modal-organization-input,
.wo-modal-dropdown--error .wo-modal-sales-structure-input,
.wo-modal-dropdown--error .wo-modal-sales-channel-input,
.wo-modal-dropdown--error .wo-modal-sales-unit-input,
.wo-modal-dropdown--error .wo-modal-territory-input,
.wo-modal-dropdown--error .wo-modal-sales-office-input,
.wo-modal-dropdown--error .wo-modal-sold-to-party-input,
.wo-modal-dropdown--error .wo-modal-deliver-to-party-input,
.wo-modal-dropdown--error .wo-modal-attention-to-deliver-input,
.wo-modal-dropdown--error .wo-modal-incoterm-input,
.wo-modal-dropdown--error .wo-modal-delivery-point-input,
.wo-modal-dropdown--error .wo-modal-shipping-point-input,
.wo-modal-dropdown--error .wo-modal-service-order-input,
.wo-modal-dropdown--error .wo-modal-sales-team-input,
.wo-modal-dropdown--error .wo-modal-sales-person-input,
.wo-modal-dropdown--error .wo-modal-delivery-priority-input,
.wo-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.wo-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.wo-modal-date-picker-wrapper.wo-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.wo-modal-custom-dropdown {
  position: relative;
}

.wo-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wo-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wo-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wo-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wo-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-check {
  color: #999999 !important;
}

.wo-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wo-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wo-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.wo-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.wo-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wo-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.wo-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.wo-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.wo-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wo-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wo-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wo-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.wo-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.wo-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.wo-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wo-modal-setting-form-label--display {
  color: #333333;
}

.wo-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wo-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-setting-dropdown--active .wo-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.wo-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.wo-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.wo-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wo-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.wo-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.wo-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.wo-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-setting-dropdown-icon.wo-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wo-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.wo-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.wo-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.wo-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.wo-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.wo-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.wo-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wo-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wo-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wo-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.wo-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.wo-modal-setting-dropdown-item-separator {
  color: #999999;
}

.wo-modal-setting-dropdown-item-name {
  color: #333333;
}

.wo-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wo-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.wo-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.wo-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wo-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wo-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.wo-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.wo-modal-setting-tab-content--print .wo-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.wo-modal-setting-tab-content--print .wo-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wo-modal-setting-tab-content--print .wo-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.wo-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.wo-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.wo-modal-setting-table thead tr {
  height: 2.25rem;
}

.wo-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.wo-modal-setting-table tbody tr {
  height: 2.25rem;
}

.wo-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.wo-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.wo-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.wo-modal-setting-table--display thead th:nth-child(2),
.wo-modal-setting-table--display thead th:nth-child(3),
.wo-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.wo-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.wo-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.wo-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.wo-modal-setting-table--transfer.wo-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.wo-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.wo-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wo-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.wo-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.wo-modal-setting-table--transfer:not(.wo-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.wo-modal-setting-table--transfer:not(.wo-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.wo-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.wo-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.wo-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.wo-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.wo-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wo-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wo-modal-tab-content--display .wo-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.wo-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.wo-modal-tab-content--display .wo-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.wo-modal-attribute-header-section--external .wo-modal-form-input:focus {
  border-color: #F5B041;
}

.wo-modal-attribute-header-section--external .wo-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.wo-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.wo-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.wo-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.wo-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.wo-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.wo-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.wo-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.wo-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.wo-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.wo-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.wo-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.wo-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.wo-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.wo-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.wo-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.wo-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.wo-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.wo-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.wo-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.wo-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.wo-modal-available-qty-tree-level {
  position: relative;
}

.wo-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.wo-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.wo-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.wo-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.wo-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.wo-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.wo-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.wo-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.wo-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.wo-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.wo-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.wo-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.wo-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.wo-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.wo-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.wo-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.wo-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.wo-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.wo-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.wo-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.wo-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.wo-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.wo-modal-available-qty-tree-batch-header .wo-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.wo-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.wo-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.wo-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wo-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.wo-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.wo-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.wo-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.wo-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.wo-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.wo-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.wo-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.wo-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.wo-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.wo-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wo-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.wo-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.wo-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.wo-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.wo-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.wo-modal-activity-type--clickable.wo-modal-activity-type--display:hover {
  color: #138B4C;
}

.wo-modal-activity-type--clickable.wo-modal-activity-type--external:hover {
  color: #E67E00;
}

.wo-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wo-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.wo-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wo-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.wo-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wo-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.wo-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wo-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to wo-modal-form-label */
.wo-modal-activity-detail-content .wo-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.wo-modal-activity-detail-modal .wo-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.wo-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.wo-modal-activity-detail-modal .wo-modal-tabs--display .wo-modal-tab {
  color: #333333;
}

.wo-modal-activity-detail-modal .wo-modal-tabs--display .wo-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.wo-modal-activity-detail-modal .wo-modal-tabs--external.wo-modal-tabs--display .wo-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.wo-modal-activity-detail-tab-content--general .wo-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.wo-modal-activity-detail-content .wo-modal-milestone-status {
  margin: 0;
}

.wo-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.wo-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.wo-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.wo-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.wo-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.wo-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.wo-modal-activity-detail-pic-chat-wrapper:hover .wo-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.wo-modal-activity-detail-pic-chat-wrapper:hover .wo-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.wo-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.wo-modal-activity-detail-pic--clickable:hover .wo-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.wo-modal-activity-detail-content--external .wo-modal-activity-detail-pic {
  color: #E67E22;
}

.wo-modal-activity-detail-content--external .wo-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.wo-modal-activity-detail-content--external .wo-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.wo-modal-activity-detail-content--external .wo-modal-activity-detail-pic--clickable:hover .wo-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.wo-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.wo-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wo-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wo-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.wo-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.wo-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.wo-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.wo-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.wo-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.wo-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.wo-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wo-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wo-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.wo-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.wo-modal-activity-detail-content--external .wo-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.wo-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.wo-modal-activity-detail-content--external .wo-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wo-modal-activity-detail-content--external .wo-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wo-modal-activity-detail-content--external .wo-modal-activity-detail-document-name {
  color: #E67E22;
}

.wo-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.wo-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.wo-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.wo-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.wo-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.wo-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.wo-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wo-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.wo-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.wo-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.wo-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.wo-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.wo-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.wo-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.wo-modal-activity-detail-tab-content--general {
  padding: 0;
}

.wo-modal-activity-detail-tab-content--general .wo-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.wo-modal-activity-detail-tab-content--general > div:not(.wo-modal-item-text-info) {
  padding: 0 1.5rem;
}

.wo-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.wo-modal-activity-detail-tab-content--attachment,
.wo-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.wo-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.wo-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.wo-modal-activity-detail-tab-content--attachment .wo-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.wo-modal-activity-detail-tab-content--attachment .wo-modal-batch-assignment-table-section > .wo-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wo-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.wo-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.wo-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.wo-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.wo-modal-activity-detail-content--external .wo-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.wo-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.wo-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.wo-modal-activity-detail-content--external .wo-modal-item-text-info {
  background-color: #FEF5E7;
}

.wo-modal-activity-detail-content--external .wo-modal-task-notes-section {
  background-color: #FEF5E7;
}

.wo-modal-task-notes-section .wo-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wo-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.wo-modal-task-notes-textarea.wo-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.wo-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.wo-modal-task-chat-section > .wo-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wo-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.wo-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.wo-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.wo-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wo-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wo-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.wo-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.wo-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.wo-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.wo-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.wo-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.wo-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.wo-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.wo-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.wo-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.wo-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.wo-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.wo-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.wo-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.wo-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.wo-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.wo-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wo-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.wo-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.wo-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.wo-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.wo-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.wo-modal-activity-detail-content--external .wo-modal-task-chat-avatar {
  background-color: #F5B041;
}

.wo-modal-activity-detail-content--external .wo-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.wo-modal-activity-detail-content--external .wo-modal-task-chat-reply-btn {
  color: #E67E22;
}

.wo-modal-activity-detail-content--external .wo-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.wo-modal-dropdown--display .wo-modal-dropdown-item,
.wo-modal-dropdown--display [class*="-item"],
.wo-modal-tags-dropdown--display .wo-modal-tags-dropdown-item,
.wo-modal-baseline-date-dropdown--display .wo-modal-baseline-date-item,
.wo-modal-reference-type-dropdown--display .wo-modal-reference-type-item,
.wo-modal-delivery-priority-dropdown--display .wo-modal-delivery-priority-item,
.wo-modal-organization-dropdown--display .wo-modal-organization-item,
.wo-modal-sales-structure-dropdown--display .wo-modal-sales-structure-item,
.wo-modal-delivery-type-dropdown--display .wo-modal-delivery-type-item,
.wo-modal-sales-channel-dropdown--display .wo-modal-sales-channel-item,
.wo-modal-sales-unit-dropdown--display .wo-modal-sales-unit-item,
.wo-modal-sold-to-party-dropdown--display .wo-modal-sold-to-party-item,
.wo-modal-deliver-to-party-dropdown--display .wo-modal-deliver-to-party-item,
.wo-modal-attention-to-deliver-dropdown--display .wo-modal-attention-to-deliver-item,
.wo-modal-incoterm-dropdown--display .wo-modal-incoterm-item,
.wo-modal-delivery-point-dropdown--display .wo-modal-delivery-point-item,
.wo-modal-shipping-point-dropdown--display .wo-modal-shipping-point-item,
.wo-modal-service-order-dropdown--display .wo-modal-service-order-item,
.wo-modal-sales-person-dropdown--display .wo-modal-sales-person-item,
.wo-modal-sales-team-dropdown--display .wo-modal-sales-team-item,
.wo-modal-territory-dropdown--display .wo-modal-territory-item,
.wo-modal-sales-office-dropdown--display .wo-modal-sales-office-item,
.wo-modal-status-dropdown--display .wo-modal-status-item,
.wo-modal-handling-product-dropdown--display .wo-modal-handling-product-item,
.wo-modal-child-uom-dropdown--display .wo-modal-child-uom-item,
.wo-modal-partner-type-dropdown--display .wo-modal-partner-type-item,
.wo-modal-partner-id-dropdown--display .wo-modal-partner-id-item,
.wo-modal-custom-dropdown--display .wo-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.wo-modal-dropdown--display .wo-modal-dropdown-item:hover,
.wo-modal-dropdown--display [class*="-item"]:hover,
.wo-modal-tags-dropdown--display .wo-modal-tags-dropdown-item:hover,
.wo-modal-baseline-date-dropdown--display .wo-modal-baseline-date-item:hover,
.wo-modal-reference-type-dropdown--display .wo-modal-reference-type-item:hover,
.wo-modal-delivery-priority-dropdown--display .wo-modal-delivery-priority-item:hover,
.wo-modal-organization-dropdown--display .wo-modal-organization-item:hover,
.wo-modal-sales-structure-dropdown--display .wo-modal-sales-structure-item:hover,
.wo-modal-delivery-type-dropdown--display .wo-modal-delivery-type-item:hover,
.wo-modal-sales-channel-dropdown--display .wo-modal-sales-channel-item:hover,
.wo-modal-sales-unit-dropdown--display .wo-modal-sales-unit-item:hover,
.wo-modal-sold-to-party-dropdown--display .wo-modal-sold-to-party-item:hover,
.wo-modal-deliver-to-party-dropdown--display .wo-modal-deliver-to-party-item:hover,
.wo-modal-attention-to-deliver-dropdown--display .wo-modal-attention-to-deliver-item:hover,
.wo-modal-incoterm-dropdown--display .wo-modal-incoterm-item:hover,
.wo-modal-delivery-point-dropdown--display .wo-modal-delivery-point-item:hover,
.wo-modal-shipping-point-dropdown--display .wo-modal-shipping-point-item:hover,
.wo-modal-service-order-dropdown--display .wo-modal-service-order-item:hover,
.wo-modal-sales-person-dropdown--display .wo-modal-sales-person-item:hover,
.wo-modal-sales-team-dropdown--display .wo-modal-sales-team-item:hover,
.wo-modal-territory-dropdown--display .wo-modal-territory-item:hover,
.wo-modal-sales-office-dropdown--display .wo-modal-sales-office-item:hover,
.wo-modal-status-dropdown--display .wo-modal-status-item:hover,
.wo-modal-handling-product-dropdown--display .wo-modal-handling-product-item:hover,
.wo-modal-child-uom-dropdown--display .wo-modal-child-uom-item:hover,
.wo-modal-partner-type-dropdown--display .wo-modal-partner-type-item:hover,
.wo-modal-partner-id-dropdown--display .wo-modal-partner-id-item:hover,
.wo-modal-custom-dropdown--display .wo-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.wo-modal-dropdown--display [class*="-item--selected"],
.wo-modal-tags-dropdown--display .wo-modal-tags-dropdown-item--selected,
.wo-modal-baseline-date-dropdown--display .wo-modal-baseline-date-item--selected,
.wo-modal-reference-type-dropdown--display .wo-modal-reference-type-item--selected,
.wo-modal-delivery-priority-dropdown--display .wo-modal-delivery-priority-item--selected,
.wo-modal-organization-dropdown--display .wo-modal-organization-item--selected,
.wo-modal-sales-structure-dropdown--display .wo-modal-sales-structure-item--selected,
.wo-modal-delivery-type-dropdown--display .wo-modal-delivery-type-item--selected,
.wo-modal-sales-channel-dropdown--display .wo-modal-sales-channel-item--selected,
.wo-modal-sales-unit-dropdown--display .wo-modal-sales-unit-item--selected,
.wo-modal-sold-to-party-dropdown--display .wo-modal-sold-to-party-item--selected,
.wo-modal-deliver-to-party-dropdown--display .wo-modal-deliver-to-party-item--selected,
.wo-modal-attention-to-deliver-dropdown--display .wo-modal-attention-to-deliver-item--selected,
.wo-modal-incoterm-dropdown--display .wo-modal-incoterm-item--selected,
.wo-modal-delivery-point-dropdown--display .wo-modal-delivery-point-item--selected,
.wo-modal-shipping-point-dropdown--display .wo-modal-shipping-point-item--selected,
.wo-modal-service-order-dropdown--display .wo-modal-service-order-item--selected,
.wo-modal-sales-person-dropdown--display .wo-modal-sales-person-item--selected,
.wo-modal-sales-team-dropdown--display .wo-modal-sales-team-item--selected,
.wo-modal-territory-dropdown--display .wo-modal-territory-item--selected,
.wo-modal-sales-office-dropdown--display .wo-modal-sales-office-item--selected,
.wo-modal-status-dropdown--display .wo-modal-status-item--selected,
.wo-modal-handling-product-dropdown--display .wo-modal-handling-product-item--selected,
.wo-modal-child-uom-dropdown--display .wo-modal-child-uom-item--selected,
.wo-modal-partner-type-dropdown--display .wo-modal-partner-type-item--selected,
.wo-modal-partner-id-dropdown--display .wo-modal-partner-id-item--selected,
.wo-modal-custom-dropdown--display .wo-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.wo-modal-dropdown--display [class*="-check"],
.wo-modal-dropdown--display .wo-modal-dropdown-check,
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.wo-modal-dropdown--display [class*="-item-code"],
.wo-modal-dropdown--display [class*="-item-name"],
.wo-modal-dropdown--display [class*="-item-content"],
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-code,
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-name,
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-item,
.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.wo-modal-sold-to-party-dropdown-content--display .wo-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.wo-modal-tags-dropdown--display .wo-modal-tags-item,
.wo-modal-tags-dropdown--display .wo-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-tags-dropdown--display .wo-modal-tags-item:hover {
  background-color: transparent !important;
}

.wo-modal-tags-dropdown--display .wo-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.wo-modal-tags-dropdown--display .wo-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item,
.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.wo-modal-custom-dropdown-list--display .wo-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/BillingCollection/BillingCollection.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.billing-collection-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.billing-collection-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.billing-collection-header {
  margin-bottom: 0;
}

.billing-collection-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.billing-collection-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.billing-collection-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.billing-collection-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.billing-collection-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.billing-collection-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.billing-collection-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.billing-collection-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.billing-collection-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.billing-collection-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.billing-collection-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.billing-collection-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.billing-collection-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.billing-collection-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.billing-collection-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.billing-collection-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.billing-collection-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.billing-collection-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.billing-collection-layout-dropdown-item:last-child {
  border-bottom: none;
}

.billing-collection-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.billing-collection-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.billing-collection-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.billing-collection-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.billing-collection-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.billing-collection-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.billing-collection-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.billing-collection-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.billing-collection-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.billing-collection-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.billing-collection-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.billing-collection-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.billing-collection-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.billing-collection-filter-parameter-wrapper {
  position: relative;
}

.billing-collection-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.billing-collection-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.billing-collection-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.billing-collection-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.billing-collection-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.billing-collection-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.billing-collection-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.billing-collection-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.billing-collection-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.billing-collection-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.billing-collection-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.billing-collection-filter-close:hover {
  background-color: #f0f0f0;
}

.billing-collection-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.billing-collection-filter-group {
  margin-bottom: 1rem;
}

.billing-collection-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.billing-collection-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.billing-collection-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.billing-collection-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.billing-collection-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.billing-collection-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.billing-collection-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.billing-collection-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.billing-collection-filter-org-container {
  flex: 1 1;
  position: relative;
}

.billing-collection-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.billing-collection-filter-org-input:hover {
  border-color: #C2DE54;
}

.billing-collection-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.billing-collection-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.billing-collection-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.billing-collection-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.billing-collection-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.billing-collection-filter-tag-remove:hover {
  color: #000;
}

.billing-collection-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.billing-collection-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.billing-collection-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.billing-collection-filter-org-item:hover {
  background-color: #f5f5f5;
}

.billing-collection-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.billing-collection-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.billing-collection-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.billing-collection-filter-org-code {
  font-weight: 600;
  color: #333;
}

.billing-collection-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.billing-collection-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.billing-collection-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.billing-collection-type-dropdown-item:last-child {
  border-bottom: none;
}

.billing-collection-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.billing-collection-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.billing-collection-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.billing-collection-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.billing-collection-table {
  animation: billingCollectionFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes billingCollectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .billing-collection-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .billing-collection-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .billing-collection-type-dropdown {
    min-width: 11.25rem;
  }

  .billing-collection-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/BillingCollection/BillingCollectionModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.bc-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.bc-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.bc-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.bc-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.bc-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.bc-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.bc-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.bc-modal-pov-button--external.bc-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.bc-modal-pov-button--external .bc-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-pov-button--external .bc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.bc-modal-pov-caret--open {
  transform: rotate(180deg);
}

.bc-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.bc-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.bc-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.bc-modal-pov-dropdown-item span {
  flex: 1 1;
}

.bc-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.bc-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.bc-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.bc-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.bc-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.bc-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.bc-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.bc-modal-tabs--display .bc-modal-tab {
  color: #666666;
}

.bc-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.bc-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.bc-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.bc-modal-tabs--display .bc-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.bc-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.bc-modal-tabs--external .bc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.bc-modal-tabs--external.bc-modal-tabs--display .bc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.bc-modal-tabs--external .bc-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.bc-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.bc-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.bc-modal-action-button span {
  white-space: nowrap;
}

.bc-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.bc-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.bc-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.bc-modal-action-button--disabled .bc-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.bc-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.bc-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.bc-modal-left-area--full .bc-modal-back-button {
  transition: width 300ms ease;
}

.bc-modal-left-area--full .bc-modal-back-button:hover {
  width: 3.5rem;
}

.bc-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.bc-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.bc-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bc-modal-content--item {
  padding-bottom: 1rem;
}

.bc-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.bc-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.bc-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.bc-modal-attachment-table-container .bc-modal-detail-table thead,
.bc-modal-attachment-table-container .bc-modal-attachment-table thead {
  box-shadow: none !important;
}

.bc-modal-attachment-table-container .bc-modal-detail-table tr,
.bc-modal-attachment-table-container .bc-modal-attachment-table tr {
  box-shadow: none !important;
}

.bc-modal-attachment-table-container .bc-modal-detail-table tbody tr:last-child,
.bc-modal-attachment-table-container .bc-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.bc-modal-attachment-table-container .bc-modal-detail-table tbody tr:last-child td,
.bc-modal-attachment-table-container .bc-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.bc-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.bc-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.bc-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.bc-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.bc-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.bc-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.bc-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.bc-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.bc-modal-attachment-filename--external {
  color: #E67E22;
}

.bc-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.bc-modal-tab-content--display .bc-modal-attachment-filename--external {
  color: #E67E22;
}

.bc-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.bc-modal-attachment-size {
  color: #666666;
}

.bc-modal-attachment-date {
  color: #666666;
}

.bc-modal-attachment-uploadedby {
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.bc-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.bc-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.bc-modal-attachment-browse-btn:focus {
  outline: none;
}

.bc-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.bc-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.bc-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-attachment-browse-btn--disabled .bc-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.bc-modal-tab-content--display .bc-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.bc-modal-tab-content--display .bc-modal-attachment-filename.bc-modal-attachment-filename--external {
  color: #E67E22;
}

.bc-modal-tab-content--display .bc-modal-attachment-type {
  color: #666666;
}

.bc-modal-tab-content--display .bc-modal-attachment-size {
  color: #666666;
}

.bc-modal-tab-content--display .bc-modal-attachment-date {
  color: #666666;
}

.bc-modal-tab-content--display .bc-modal-attachment-uploadedby {
  color: #333333;
}

.bc-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.bc-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.bc-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.bc-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.bc-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.bc-modal-tab-content--display .bc-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.bc-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.bc-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.bc-modal-tab-content--display .bc-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.bc-modal-basic-section--external .bc-modal-form-input:focus {
  border-color: #F5B041;
}

.bc-modal-basic-section--external .bc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.bc-modal-tab-content--external .bc-modal-form-input:focus,
.bc-modal-tab-content--external .bc-modal-form-textarea:focus,
.bc-modal-tab-content--external .bc-modal-custom-dropdown-input:focus,
.bc-modal-tab-content--external .bc-modal-date-input:focus,
.bc-modal-tab-content--external .bc-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.bc-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.bc-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.bc-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.bc-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.bc-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.bc-modal-tab-content--display .bc-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.bc-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.bc-modal-tab-content--display .bc-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.bc-modal-partner-header-section--external .bc-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.bc-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.bc-modal-tab-content--display .bc-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.bc-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.bc-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.bc-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.bc-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bc-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.bc-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.bc-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.bc-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.bc-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.bc-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.bc-modal-chat-section {
  padding: 1.5rem 0;
}

.bc-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bc-modal-chat-header h3 {
  margin: 0;
}

.bc-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.bc-modal-chat-new-thread .bc-modal-form-textarea {
  min-height: 5rem;
}

.bc-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.bc-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bc-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.bc-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.bc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.bc-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.bc-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.bc-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.bc-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.bc-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.bc-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.bc-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.bc-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.bc-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.bc-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-chat-user-name {
  color: #333333 !important;
}

.bc-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.bc-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.bc-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.bc-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.bc-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.bc-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.bc-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.bc-modal-chat-reply-btn:hover .bc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.bc-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.bc-modal-chat-replies .bc-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.bc-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.bc-modal-chat-reply-input .bc-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.bc-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.bc-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.bc-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.bc-modal-tab-content--display .bc-modal-chat-thread {
  border-color: #E5E5E5;
}

.bc-modal-tab-content--display .bc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display .bc-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-chat-user-position {
  background-color: #E8F5E9;
}

.bc-modal-tab-content--display .bc-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.bc-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.bc-modal-tab-content--display .bc-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.bc-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.bc-modal-notes-header-section--external .bc-modal-form-textarea:focus {
  border-color: #F5B041;
}

.bc-modal-chat-section--external .bc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.bc-modal-chat-avatar--external {
  background-color: #F5B041;
}

.bc-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.bc-modal-tab-content--display .bc-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-thread {
  border-color: #E5E5E5;
}

.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-user-name {
  color: #333333 !important;
}

.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-user-position {
  background-color: #FDE8D0;
}

.bc-modal-tab-content--display.bc-modal-tab-content--external .bc-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.bc-modal-chat-reply-btn--external {
  color: #E67E22;
}

.bc-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.bc-modal-chat-reply-btn--external .bc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.bc-modal-chat-reply-btn--external:hover .bc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.bc-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.bc-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.bc-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.bc-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.bc-modal-chat-textarea-wrapper {
  position: relative;
}

.bc-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.bc-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.bc-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.bc-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.bc-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.bc-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.bc-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bc-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.bc-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.bc-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.bc-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.bc-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.bc-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.bc-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.bc-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.bc-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.bc-modal-tab-content--display .bc-modal-table-empty-state-title {
  color: #666666;
}

.bc-modal-tab-content--display .bc-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.bc-modal-partner-header-section + .bc-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.bc-modal-partner-header-section + .bc-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.bc-modal-partner-header-section + .bc-modal-item-content-section .bc-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.bc-modal-partner-header-section + .bc-modal-item-content-section .bc-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.bc-modal-partner-header-section + .bc-modal-item-content-section .bc-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.bc-modal-partner-header-section + .bc-modal-item-content-section .bc-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.bc-modal-partner-header-section + .bc-modal-item-content-section .bc-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.bc-modal-partner-table-container .bc-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.bc-modal-partner-table-container .bc-modal-partner-table th:last-child,
.bc-modal-partner-table-container .bc-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.bc-modal-detail-table-container--external.bc-modal-partner-table-container .bc-modal-partner-table th:last-child,
.bc-modal-detail-table-container--external.bc-modal-partner-table-container .bc-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.bc-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.bc-modal-item-header-section .bc-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-tab-content--display .bc-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.bc-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.bc-modal-tab-content--display .bc-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.bc-modal-item-header-section--external .bc-modal-form-input:focus {
  border-color: #F5B041;
}

.bc-modal-item-header-section--external .bc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.bc-modal-detail-subtabs--external .bc-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.bc-modal-detail-subtabs--external .bc-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.bc-modal-detail-subtabs--external .bc-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.bc-modal-tab-content--display .bc-modal-detail-subtabs--external .bc-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.bc-modal-tab-content--display .bc-modal-detail-subtabs--external .bc-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.bc-modal-tab-content.bc-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.bc-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.bc-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.bc-modal-item-table-wrapper .bc-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.bc-modal-item-table-wrapper .bc-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.bc-modal-item-table-wrapper--terms .bc-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.bc-modal-tab-content--external.bc-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.bc-modal-tab-content--external .bc-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-tab-content--external .bc-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-tab-content--external .bc-modal-item-table-wrapper--terms .bc-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.bc-modal-tab-content--external .bc-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.bc-modal-item-table-wrapper--terms .bc-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.bc-modal-item-table-wrapper--terms .bc-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bc-modal-item-table-wrapper--terms .bc-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.bc-modal-item-table-wrapper--terms .bc-modal-detail-table tr {
  height: auto;
}

.bc-modal-item-table-wrapper--terms .bc-modal-detail-table-container .bc-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.bc-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.bc-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.bc-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.bc-modal-volume-input-group .bc-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.bc-modal-volume-input-group .bc-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.bc-modal-volume-input-group .bc-modal-sla-input-wrapper .bc-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.bc-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.bc-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.bc-modal-volume-uom-list--display .bc-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-volume-uom-list--display .bc-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.bc-modal-volume-uom-list--display .bc-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-volume-uom-list--display .bc-modal-volume-uom-check {
  color: #999999 !important;
}

.bc-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.bc-modal-volume-uom-dropdown--display .bc-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.bc-modal-volume-uom-dropdown--display .bc-modal-volume-uom-item:hover {
  background-color: transparent;
}

.bc-modal-volume-uom-dropdown--display .bc-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.bc-modal-volume-uom-dropdown--display .bc-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.bc-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.bc-modal-weight-input-group .bc-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.bc-modal-weight-input-group .bc-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.bc-modal-weight-input-group .bc-modal-sla-input-wrapper .bc-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.bc-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.bc-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-weight-uom-input::placeholder {
  color: #999999;
}

.bc-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.bc-modal-weight-uom-dropdown--display .bc-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.bc-modal-weight-uom-dropdown--display .bc-modal-weight-uom-item:hover {
  background-color: transparent;
}

.bc-modal-weight-uom-dropdown--display .bc-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.bc-modal-weight-uom-dropdown--display .bc-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.bc-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.bc-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.bc-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.bc-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.bc-modal-form-input--display ~ .bc-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.bc-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.bc-modal-form-input--display {
  cursor: default;
}

.bc-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.bc-modal-form-label--display {
  color: #333333 !important;
}

.bc-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.bc-modal-form-label--display .bc-modal-required {
  color: #FF4D4F;
}

.bc-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.bc-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.bc-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.bc-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.bc-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.bc-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.bc-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bc-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.bc-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.bc-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.bc-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.bc-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.bc-modal-sla-spinner-btn:disabled .bc-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.bc-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sla-spinner-btn:hover .bc-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.bc-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.bc-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.bc-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.bc-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.bc-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.bc-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.bc-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.bc-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.bc-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.bc-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.bc-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.bc-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.bc-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.bc-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.bc-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.bc-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.bc-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.bc-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.bc-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.bc-modal-stage-dropdown-input--display .bc-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.bc-modal-stage-dropdown-input--display .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.bc-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.bc-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.bc-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.bc-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.bc-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.bc-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.bc-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.bc-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.bc-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.bc-modal-accordion-header--display {
  color: #333333;
}

.bc-modal-accordion-header--display.bc-modal-accordion-header--active {
  color: #333333;
}

.bc-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.bc-modal-accordion-header--display .bc-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.bc-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.bc-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.bc-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.bc-modal-stage-main-title--display {
  color: #138B4C;
}

.bc-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-stage-title--display {
  color: #333333;
}

.bc-modal-stage-current {
  margin-bottom: 1.875rem;
}

.bc-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.bc-modal-stage-label--display {
  color: #666666;
}

.bc-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-stage-subtitle--display {
  color: #333333;
}

.bc-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.bc-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.bc-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.bc-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.bc-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.bc-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bc-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.bc-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.bc-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bc-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.bc-modal-download-button:active {
  background-color: #E0E0E0;
}

.bc-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-download-button--display .bc-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.bc-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.bc-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.bc-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.bc-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.bc-modal-timeline-item--display .bc-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.bc-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.bc-modal-timeline-badge--inactive .bc-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.bc-modal-timeline-item--display .bc-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.bc-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.bc-modal-timeline-item--display .bc-modal-timeline-line {
  background-color: #138B4C;
}

.bc-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bc-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.bc-modal-timeline-status--display {
  color: #333333;
}

.bc-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.bc-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.bc-modal-timeline-date--display {
  color: #666666;
}

.bc-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.bc-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.bc-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.bc-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.bc-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.bc-modal-timeline-document--display {
  color: #138B4C;
}

.bc-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.bc-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.bc-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.bc-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.bc-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.bc-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.bc-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.bc-modal-activity-item--display .bc-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.bc-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.bc-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.bc-modal-activity-item--display .bc-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.bc-modal-activity-item--display .bc-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.bc-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.bc-modal-activity-item--display .bc-modal-activity-line {
  background-color: #138B4C;
}

.bc-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.bc-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.bc-modal-activity-type--display {
  color: #333333;
}

.bc-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.bc-modal-activity-header--display {
  color: #666666;
}

.bc-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.bc-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.bc-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.bc-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.bc-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.bc-modal-activity-change--display .bc-modal-activity-field {
  color: #333333;
}

.bc-modal-activity-change--display .bc-modal-activity-new {
  color: #138B4C;
}

.bc-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.bc-modal-activity-date--display {
  color: #666666;
}

.bc-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.bc-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.bc-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.bc-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.bc-modal-activity-more--display {
  color: #138B4C;
}

.bc-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-activity-more--display .bc-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.bc-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.bc-modal-reference-table thead {
  background-color: #F9F9F9;
}

.bc-modal-tab-content--display .bc-modal-reference-table thead {
  background-color: #FAFAFA;
}

.bc-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.bc-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.bc-modal-tab-content--display .bc-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.bc-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.bc-modal-tab-content--display .bc-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.bc-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.bc-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.bc-modal-detail-subtab:hover {
  color: #138B4C;
}

.bc-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.bc-modal-tab-content--display .bc-modal-detail-subtab {
  color: #666666;
}

.bc-modal-tab-content--display .bc-modal-detail-subtab:hover {
  color: #138B4C;
}

.bc-modal-tab-content--display .bc-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.bc-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.bc-modal-tab-content.bc-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.bc-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-detail-delivery-wrapper .bc-modal-form-label {
  flex-shrink: 0;
}

.bc-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.bc-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.bc-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.bc-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.bc-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.bc-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.bc-modal-detail-table-container .bc-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bc-modal-detail-table-container .bc-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bc-modal-detail-table-container .bc-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.bc-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.bc-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.bc-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.bc-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.bc-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.bc-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.bc-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-detail-table th,
.bc-modal-tab-content--display .bc-modal-packaging-table th,
.bc-modal-tab-content--display .bc-modal-partner-table th,
.bc-modal-tab-content--display .bc-modal-attachment-table th {
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-detail-table td,
.bc-modal-tab-content--display .bc-modal-packaging-table td,
.bc-modal-tab-content--display .bc-modal-partner-table td,
.bc-modal-tab-content--display .bc-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-description,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-text,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-batch,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-serial,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-sales-order,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-so-item,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-package-no,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-product-type,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-product-group,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-product-category,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.bc-modal-tab-content--display .bc-modal-detail-table tbody tr:hover .bc-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-description,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-text,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-batch,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-serial,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-sales-order,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-so-item,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-package-no,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-type,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-group,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-category,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .bc-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.bc-modal-detail-table-container .bc-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.bc-modal-detail-table-container .bc-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.bc-modal-detail-table-container--external .bc-modal-detail-table td {
  color: #555555 !important;
}

.bc-modal-detail-table-container .bc-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.bc-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.bc-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.bc-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.bc-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.bc-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.bc-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.bc-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.bc-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.bc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.bc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.bc-modal-detail-table tbody tr:hover .detail-table-description,
.bc-modal-detail-table tbody tr:hover .detail-table-text,
.bc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.bc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.bc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.bc-modal-detail-table tbody tr:hover .detail-table-batch,
.bc-modal-detail-table tbody tr:hover .detail-table-serial,
.bc-modal-detail-table tbody tr:hover .detail-table-sales-order,
.bc-modal-detail-table tbody tr:hover .detail-table-so-item,
.bc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.bc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.bc-modal-detail-table tbody tr:hover .detail-table-package-no,
.bc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.bc-modal-detail-table tbody tr:hover .detail-table-product-type,
.bc-modal-detail-table tbody tr:hover .detail-table-product-group,
.bc-modal-detail-table tbody tr:hover .detail-table-product-category,
.bc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.bc-modal-detail-table tbody tr:hover .bc-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-description,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-text,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-batch,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-serial,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-sales-order,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-so-item,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-package-no,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-type,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-group,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-category,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .bc-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.bc-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.bc-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.bc-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.bc-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.bc-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.bc-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.bc-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.bc-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.bc-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.bc-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.bc-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.bc-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.bc-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.bc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.bc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.bc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.bc-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.bc-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.bc-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.bc-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.bc-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.bc-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bc-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.bc-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.bc-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.bc-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.bc-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.bc-modal-add-item-btn--disabled .bc-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.bc-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.bc-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.bc-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.bc-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.bc-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.bc-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.bc-modal-sales-order-table-container .bc-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.bc-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.bc-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.bc-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.bc-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.bc-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.bc-modal-table-input:focus {
  outline: none;
}

.bc-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.bc-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.bc-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.bc-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.bc-modal-tags-container {
  position: relative;
  width: 100%;
}

.bc-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.bc-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.bc-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.bc-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.bc-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.bc-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.bc-modal-tags-input--display .bc-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.bc-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.bc-modal-tag-remove:hover {
  color: #333333;
}

.bc-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.bc-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.bc-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.bc-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.bc-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.bc-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.bc-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.bc-modal-status-container {
  position: relative;
  width: 100%;
}

.bc-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.bc-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.bc-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.bc-modal-status-placeholder {
  color: #999999;
}

.bc-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.bc-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.bc-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.bc-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-status-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-status-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.bc-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.bc-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.bc-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.bc-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.bc-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.bc-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.bc-modal-status-input--display .bc-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.bc-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.bc-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.bc-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.bc-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.bc-modal-stage-dropdown-placeholder {
  color: #999999;
}

.bc-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.bc-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.bc-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.bc-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.bc-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.bc-modal-stage--created .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.bc-modal-stage--approved .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.bc-modal-stage--processed .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.bc-modal-stage--picked .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.bc-modal-stage--packed .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.bc-modal-stage--planned .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.bc-modal-stage--loaded .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.bc-modal-stage--issued .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.bc-modal-stage--departed .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.bc-modal-stage--arrived .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.bc-modal-stage--unloaded .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.bc-modal-stage--delivered .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.bc-modal-stage--confirmed .bc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.bc-modal-stage--billed .bc-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.bc-modal-stage-dropdown-input .bc-modal-stage,
.bc-modal-stage-dropdown-item .bc-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.bc-modal-baseline-date-dropdown {
  position: relative;
}

.bc-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.bc-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.bc-modal-reference-type-dropdown {
  position: relative;
}

.bc-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.bc-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.bc-modal-delivery-priority-dropdown {
  position: relative;
}

.bc-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.bc-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.bc-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.bc-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.bc-modal-delivery-priority-separator {
  color: #666666;
}

.bc-modal-delivery-priority-name {
  color: #333333;
}

.bc-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.bc-modal-organization-dropdown {
  position: relative;
}

.bc-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.bc-modal-organization-dropdown-content--display .bc-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-organization-dropdown-content--display .bc-modal-organization-item:hover {
  background-color: transparent !important;
}

.bc-modal-organization-dropdown-content--display .bc-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-organization-dropdown-content--display .bc-modal-organization-code,
.bc-modal-organization-dropdown-content--display .bc-modal-organization-name,
.bc-modal-organization-dropdown-content--display .bc-modal-organization-separator {
  color: #999999 !important;
}

.bc-modal-organization-dropdown-content--display .bc-modal-organization-check {
  color: #999999 !important;
}

.bc-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-organization-separator {
  color: #999999;
}

.bc-modal-organization-name {
  color: #333333;
}

.bc-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.bc-modal-sales-structure-dropdown {
  position: relative;
}

.bc-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.bc-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.bc-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-sales-structure-separator {
  color: #999999;
}

.bc-modal-sales-structure-name {
  color: #333333;
}

.bc-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.bc-modal-delivery-type-dropdown {
  position: relative;
}

.bc-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.bc-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.bc-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.bc-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.bc-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.bc-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.bc-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.bc-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-delivery-type-separator {
  color: #999999;
}

.bc-modal-delivery-type-description {
  color: #333333;
}

.bc-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.bc-modal-content::-webkit-scrollbar,
.bc-modal-stage-content::-webkit-scrollbar,


.bc-modal-content::-webkit-scrollbar-track,
.bc-modal-stage-content::-webkit-scrollbar-track,


.bc-modal-content::-webkit-scrollbar-thumb,
.bc-modal-stage-content::-webkit-scrollbar-thumb,


.bc-modal-content::-webkit-scrollbar-thumb:hover,
.bc-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.bc-modal-sales-channel-dropdown {
  position: relative;
}

.bc-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.bc-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-sales-channel-separator {
  color: #999999;
}

.bc-modal-sales-channel-name {
  color: #333333;
}

.bc-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.bc-modal-sales-unit-dropdown {
  position: relative;
}

.bc-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.bc-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-sales-unit-separator {
  color: #999999;
}

.bc-modal-sales-unit-name {
  color: #333333;
}

.bc-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.bc-modal-organization-item--placeholder,
.bc-modal-sales-structure-item--placeholder,
.bc-modal-sales-channel-item--placeholder,
.bc-modal-sales-unit-item--placeholder,
.bc-modal-territory-item--placeholder,
.bc-modal-sales-office-item--placeholder,
.bc-modal-sold-to-party-item--placeholder,
.bc-modal-deliver-to-party-item--placeholder,
.bc-modal-attention-to-deliver-item--placeholder,
.bc-modal-incoterm-item--placeholder,
.bc-modal-delivery-point-item--placeholder,
.bc-modal-shipping-point-item--placeholder,
.bc-modal-sales-order-item--placeholder,
.bc-modal-sales-team-item--placeholder,
.bc-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.bc-modal-organization-item--placeholder:hover,
.bc-modal-sales-structure-item--placeholder:hover,
.bc-modal-sales-channel-item--placeholder:hover,
.bc-modal-sales-unit-item--placeholder:hover,
.bc-modal-territory-item--placeholder:hover,
.bc-modal-sales-office-item--placeholder:hover,
.bc-modal-sold-to-party-item--placeholder:hover,
.bc-modal-deliver-to-party-item--placeholder:hover,
.bc-modal-attention-to-deliver-item--placeholder:hover,
.bc-modal-incoterm-item--placeholder:hover,
.bc-modal-delivery-point-item--placeholder:hover,
.bc-modal-shipping-point-item--placeholder:hover,
.bc-modal-sales-order-item--placeholder:hover,
.bc-modal-sales-team-item--placeholder:hover,
.bc-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.bc-modal-sold-to-party-dropdown {
  position: relative;
}

.bc-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-sold-to-party-input:focus,
.bc-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.bc-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.bc-modal-sold-to-party-separator {
  color: #999999;
}

.bc-modal-sold-to-party-name {
  color: #333333;
}

.bc-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.bc-modal-deliver-to-party-dropdown {
  position: relative;
}

.bc-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.bc-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.bc-modal-deliver-to-party-separator {
  color: #999999;
}

.bc-modal-deliver-to-party-name {
  color: #333333;
}

.bc-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.bc-modal-attention-to-deliver-dropdown {
  position: relative;
}
.bc-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.bc-modal-attention-to-deliver-separator {
  color: #999999;
}
.bc-modal-attention-to-deliver-name {
  color: #333333;
}
.bc-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.bc-modal-incoterm-dropdown {
  position: relative;
}
.bc-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.bc-modal-incoterm-separator {
  color: #999999;
}
.bc-modal-incoterm-name {
  color: #333333;
}
.bc-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.bc-modal-delivery-point-dropdown {
  position: relative;
}
.bc-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.bc-modal-delivery-point-separator {
  color: #999999;
}
.bc-modal-delivery-point-name {
  color: #333333;
}
.bc-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.bc-modal-shipping-point-dropdown {
  position: relative;
}
.bc-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.bc-modal-shipping-point-separator {
  color: #999999;
}
.bc-modal-shipping-point-name {
  color: #333333;
}
.bc-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.bc-modal-sales-order-dropdown {
  position: relative;
}
.bc-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.bc-modal-sales-order-separator {
  color: #999999;
}
.bc-modal-sales-order-name {
  color: #333333;
}
.bc-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.bc-modal-date-picker {
  position: relative;
}
.bc-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.bc-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.bc-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.bc-modal-date-input::-webkit-datetime-edit-text,
.bc-modal-date-input::-webkit-datetime-edit-month-field,
.bc-modal-date-input::-webkit-datetime-edit-day-field,
.bc-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.bc-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.bc-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.bc-modal-sales-person-dropdown {
  position: relative;
}
.bc-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.bc-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.bc-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.bc-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.bc-modal-sales-person-separator {
  color: #999999;
}
.bc-modal-sales-person-name {
  color: #333333;
}
.bc-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.bc-modal-sales-team-dropdown {
  position: relative;
}
.bc-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.bc-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.bc-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.bc-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.bc-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.bc-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.bc-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bc-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.bc-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.bc-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.bc-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.bc-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.bc-modal-sales-team-separator {
  color: #999999;
}
.bc-modal-sales-team-name {
  color: #333333;
}
.bc-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.bc-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.bc-modal-territory-dropdown {
  position: relative;
}

.bc-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.bc-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-territory-separator {
  color: #999999;
}

.bc-modal-territory-name {
  color: #333333;
}

.bc-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.bc-modal-sales-office-dropdown {
  position: relative;
}

.bc-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.bc-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.bc-modal-sales-office-separator {
  color: #999999;
}

.bc-modal-sales-office-name {
  color: #333333;
}

.bc-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.bc-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.bc-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.bc-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.bc-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.bc-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.bc-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-table-dropdown-input:focus {
  outline: none;
}

.bc-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.bc-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.bc-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.bc-modal-delivery-type-list::-webkit-scrollbar,
.bc-modal-stage-dropdown-list::-webkit-scrollbar,
.bc-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.bc-modal-delivery-type-list::-webkit-scrollbar-track,
.bc-modal-stage-dropdown-list::-webkit-scrollbar-track,
.bc-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-delivery-type-list::-webkit-scrollbar-thumb,
.bc-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.bc-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.bc-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.bc-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.bc-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.bc-modal-wrapper,
.bc-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.bc-modal-wrapper,
.bc-modal-wrapper *,
.bc-modal-content,
.bc-modal-data-flow-2-container,
.bc-modal-data-flow-container,
.bc-modal-calendar-container,
.bc-modal-calendar-milestones-list,
.bc-modal-calendar-view,
.bc-modal-calendar-yearly,
.bc-modal-calendar-monthly,
.bc-modal-calendar-weekly,
.bc-modal-calendar-weekly-body,
.bc-modal-calendar-daily,
.bc-modal-calendar-daily-timeline,
.bc-modal-calendar-grid,
.bc-modal-calendar-grid-body,
.bc-modal-detail-table-container,
.bc-modal-item-table-wrapper,
.bc-modal-attachment-table-container,
.bc-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.bc-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.bc-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.bc-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.bc-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.bc-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.bc-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.bc-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.bc-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.bc-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-tab-content--display .bc-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.bc-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-tab-content--display .bc-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.bc-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.bc-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.bc-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) {
  font-weight: 600;
}

.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) .bc-modal-packaging-input,
.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) .bc-modal-packaging-input--display,
.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) .bc-modal-handling-product-input,
.bc-modal-packaging-row--unassigned:not(.bc-modal-packaging-row--expanded) .bc-modal-handling-product-input--display {
  font-weight: 600;
}

.bc-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.bc-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row td.bc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row td.bc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row td.bc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td.bc-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded td.bc-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row--expanded:hover td.bc-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display,
.bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display,
.bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.bc-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.bc-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-tab-content--display .bc-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.bc-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-tab-content--display .bc-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.bc-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.bc-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.bc-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.bc-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.bc-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.bc-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.bc-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.bc-modal-packaging-detail-table th:first-child,
.bc-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.bc-modal-packaging-detail-table th:nth-child(2),
.bc-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.bc-modal-packaging-detail-table th:nth-child(3),
.bc-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.bc-modal-packaging-detail-table td:nth-child(4),
.bc-modal-packaging-detail-table td:nth-child(6),
.bc-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.bc-modal-packaging-detail-table td:nth-child(5),
.bc-modal-packaging-detail-table td:nth-child(7),
.bc-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.bc-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.bc-modal-tab-content--display .bc-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display .bc-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.bc-modal-tab-content--display .bc-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.bc-modal-tab-content--display .bc-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.bc-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.bc-modal-packaging-table td:last-child,
.bc-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.bc-modal-packaging-table td:last-child .bc-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.bc-modal-detail-table-container--external .bc-modal-packaging-table th:last-child,
.bc-modal-detail-table-container--external .bc-modal-packaging-table td.bc-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.bc-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.bc-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.bc-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.bc-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.bc-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.bc-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.bc-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.bc-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.bc-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.bc-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.bc-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.bc-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.bc-modal-packaging-child-table tr {
  border: none !important;
}

.bc-modal-packaging-child-table thead,
.bc-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.bc-modal-packaging-child-table th:first-child,
.bc-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.bc-modal-packaging-child-table th:nth-child(2),
.bc-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.bc-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.bc-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.bc-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.bc-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.bc-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.bc-modal-packaging-child-table th:nth-child(3),
.bc-modal-packaging-child-table td:nth-child(3),
.bc-modal-packaging-child-table th:nth-child(4),
.bc-modal-packaging-child-table td:nth-child(4),
.bc-modal-packaging-child-table th:nth-child(5),
.bc-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.bc-modal-packaging-child-table th:nth-child(6),
.bc-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.bc-modal-packaging-child-table th:nth-child(7),
.bc-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.bc-modal-detail-table-container--external .bc-modal-packaging-child-table th:last-child,
.bc-modal-detail-table-container--external .bc-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.bc-modal-packaging-child-table td:last-child .bc-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.bc-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.bc-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.bc-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.bc-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.bc-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row {
  transition: none !important;
}

.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display,
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display:focus,
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display,
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display:focus,
.bc-modal-tab-content--display .bc-modal-detail-table-container .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display:focus,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display:focus,
.bc-modal-tab-content--display .bc-modal-detail-table-container--external .bc-modal-packaging-table tbody tr.bc-modal-packaging-row:hover td .bc-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.bc-modal-detail-table-container--external .bc-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.bc-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bc-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.bc-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.bc-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.bc-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.bc-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.bc-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.bc-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.bc-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.bc-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.bc-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.bc-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.bc-modal-detail-table-container--external .bc-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.bc-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-item--display {
  color: #999999 !important;
}

.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-code,
.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-name,
.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-separator {
  color: #999999 !important;
}

.bc-modal-handling-product-dropdown-content--display .bc-modal-handling-product-check {
  color: #999999 !important;
}

.bc-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.bc-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.bc-modal-handling-product-dropdown-content--narrow .bc-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.bc-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.bc-modal-packaging-detail-table .bc-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.bc-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.bc-modal-detail-table-container--dropdown-open .bc-modal-detail-table {
  overflow: visible;
}

.bc-modal-detail-table-container--dropdown-open .bc-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.bc-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bc-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.bc-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.bc-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.bc-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.bc-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.bc-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.bc-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.bc-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.bc-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.bc-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.bc-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.bc-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.bc-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.bc-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.bc-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.bc-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.bc-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.bc-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.bc-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.bc-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-item:hover {
  background-color: transparent;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-item--placeholder {
  display: none;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-code,
.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-name,
.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-separator {
  color: #555555;
}

.bc-modal-handling-product-dropdown-content--view-only .bc-modal-handling-product-check {
  color: #888888;
}

.bc-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.bc-modal-handling-product-separator {
  color: #999999;
}

.bc-modal-handling-product-name {
  color: #333333;
}

.bc-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.bc-modal-handling-product-item--placeholder {
  cursor: default;
}

.bc-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.bc-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.bc-modal-detail-table td:has(.bc-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.bc-modal-detail-table td .bc-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.bc-modal-detail-table td .bc-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.bc-modal-detail-table td .bc-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.bc-modal-detail-table td .bc-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.bc-modal-detail-table td .bc-modal-handling-product-input--display,
.bc-modal-detail-table td .bc-modal-handling-product-input--display:focus,
.bc-modal-detail-table td .bc-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display,
.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display:focus,
.bc-modal-detail-table-container .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display:focus,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover td .bc-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.bc-modal-detail-table td .bc-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.bc-modal-detail-table td .bc-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.bc-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.bc-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.bc-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.bc-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-table-text-icon-btn--filled:not(.bc-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.bc-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.bc-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.bc-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.bc-modal-table-text-icon-btn--display.bc-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.bc-modal-table-text-icon-btn--display.bc-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-table-text-icon-btn--display.bc-modal-table-text-icon-btn--external.bc-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.bc-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.bc-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.bc-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.bc-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.bc-modal-serial-assignment-btn {
  width: 10.625rem;
}

.bc-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.bc-modal-batch-assignment-btn--filled .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.bc-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.bc-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.bc-modal-batch-assignment-btn--display .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-batch-assignment-btn--display.bc-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.bc-modal-batch-assignment-btn--display.bc-modal-batch-assignment-btn--filled .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.bc-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.bc-modal-secured-qty-btn.bc-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.bc-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.bc-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.bc-modal-secured-qty-btn--grey .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.bc-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.bc-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.bc-modal-batch-assignment-btn--partial .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.bc-modal-batch-assignment-btn--display.bc-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.bc-modal-batch-assignment-btn--display.bc-modal-batch-assignment-btn--partial .bc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.bc-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.bc-modal-secured-qty-modal .bc-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.bc-modal-secured-qty-modal .bc-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.bc-modal-secured-qty-modal.bc-modal-batch-assignment-modal--display .bc-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.bc-modal-secured-qty-modal .bc-modal-item-text-content {
  overflow-x: hidden;
}

.bc-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.bc-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.bc-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.bc-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.bc-modal-batch-assignment-modal--display .bc-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.bc-modal-batch-assignment-modal--display .bc-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.bc-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.bc-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.bc-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.bc-modal-secured-qty-lock-btn--open .bc-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.bc-modal-secured-qty-lock-btn--locked .bc-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.bc-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.bc-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.bc-modal-batch-assignment-modal .bc-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.bc-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.bc-modal-batch-assignment-modal .bc-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.bc-modal-batch-assignment-modal .bc-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.bc-modal-batch-assignment-modal.bc-modal-batch-assignment-modal--display .bc-modal-item-text-info {
  background-color: #F2F8EA;
}

.bc-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.bc-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.bc-modal-batch-assignment-info-group {
  flex: 1 1;
}

.bc-modal-batch-assignment-info-group .bc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.bc-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.bc-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bc-modal-batch-assignment-table-section .bc-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.bc-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.bc-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.bc-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.bc-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.bc-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.bc-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.bc-modal-batch-assignment-table th,
.bc-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.bc-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.bc-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.bc-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.bc-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.bc-modal-batch-assignment-table tbody td:has(.bc-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.bc-modal-batch-assignment-table tbody td:has(.bc-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.bc-modal-batch-assignment-table tbody td:nth-child(2),
.bc-modal-batch-assignment-table tbody td:nth-child(3),
.bc-modal-batch-assignment-table tbody td:nth-child(4),
.bc-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.bc-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.bc-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.bc-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bc-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.bc-modal-batch-assignment-modal--display .bc-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.bc-modal-batch-assignment-modal--display .bc-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.bc-modal-batch-assignment-modal--display .bc-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-batch-assignment-modal--display .bc-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.bc-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.bc-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.bc-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.bc-modal-batch-assignment-table .bc-modal-placeholder-text {
  color: #CCCCCC;
}

.bc-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.bc-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.bc-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.bc-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.bc-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.bc-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.bc-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.bc-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.bc-modal-batch-assignment-table th.batch-table-frozen-batch,
table.bc-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.bc-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.bc-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.bc-modal-batch-assignment-table td.batch-table-frozen-batch,
table.bc-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.bc-modal-batch-assignment-table th.batch-table-frozen-batch,
table.bc-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.bc-modal-batch-assignment-table th.batch-table-frozen-assign,
table.bc-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.bc-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.bc-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.bc-modal-item-text-info {
  margin-bottom: 1rem;
}

.bc-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.bc-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.bc-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.bc-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.bc-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.bc-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.bc-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.bc-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-item-text-modal .modal-header .modal-title,
.bc-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.bc-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.bc-modal-item-text-label--display {
  color: #333333;
}

.bc-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.bc-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.bc-modal-item-text-modal .bc-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.bc-modal-item-text-modal .bc-modal-item-text-textarea-wrapper .bc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.bc-modal-item-text-textarea {
  overflow-y: auto !important;
}

.bc-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.bc-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.bc-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.bc-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.bc-modal-add-do-item-modal .bc-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.bc-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.bc-modal-add-do-item-dropdown-section .bc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.bc-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bc-modal-add-do-item-table-section .bc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.bc-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.bc-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.bc-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.bc-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.bc-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.bc-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.bc-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.bc-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.bc-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.bc-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.bc-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.bc-modal-detail-table td:first-child .bc-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.bc-modal-detail-table td:first-child .bc-modal-partner-type-input {
  padding-left: 0.625rem;
}

.bc-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.bc-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.bc-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.bc-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.bc-modal-partner-type-dropdown--display .bc-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.bc-modal-partner-type-dropdown-content--display .bc-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-partner-type-dropdown-content--display .bc-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.bc-modal-partner-type-dropdown-content--display .bc-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-partner-type-dropdown-content--display .bc-modal-partner-type-check {
  color: #999999 !important;
}

.bc-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.bc-modal-partner-type-dropdown--display .bc-modal-partner-type-value {
  color: #555555;
}

.bc-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.bc-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.bc-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.bc-modal-partner-type-item--placeholder {
  cursor: default;
}

.bc-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.bc-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.bc-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.bc-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.bc-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.bc-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.bc-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.bc-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.bc-modal-partner-id-dropdown--display .bc-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-code,
.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-name,
.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-separator {
  color: #999999 !important;
}

.bc-modal-partner-id-dropdown-content--display .bc-modal-partner-id-check {
  color: #999999 !important;
}

.bc-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.bc-modal-partner-id-dropdown--display .bc-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.bc-modal-detail-table tbody tr:hover .bc-modal-partner-type-dropdown--display .bc-modal-partner-type-input-wrapper,
.bc-modal-detail-table tbody tr:hover .bc-modal-partner-id-dropdown--display .bc-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .bc-modal-partner-type-dropdown--display .bc-modal-partner-type-input-wrapper,
.bc-modal-detail-table-container--external .bc-modal-detail-table tbody tr:hover .bc-modal-partner-id-dropdown--display .bc-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.bc-modal-partner-type-arrow--external {
  visibility: hidden;
}

.bc-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.bc-modal-partner-type-dropdown--external .bc-modal-partner-type-value {
  color: #555555;
}

.bc-modal-partner-id-dropdown--external .bc-modal-partner-id-value {
  color: #555555;
}

.bc-modal-detail-table-container--external .bc-modal-detail-table td.bc-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.bc-modal-partner-header-section--external .bc-modal-form-input--display {
  color: #555555;
}

.bc-modal-detail-table td.bc-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.bc-modal-tab-content--display .bc-modal-detail-table td.bc-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.bc-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.bc-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.bc-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.bc-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.bc-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.bc-modal-partner-id-item--placeholder {
  cursor: default;
}

.bc-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.bc-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.bc-modal-partner-id-separator {
  color: #999999;
}

.bc-modal-partner-id-name {
  color: #666666;
}

.bc-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.bc-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.bc-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.bc-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.bc-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.bc-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.bc-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.bc-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.bc-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.bc-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.bc-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.bc-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.bc-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.bc-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.bc-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.bc-modal-data-flow-stage--completed .bc-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.bc-modal-data-flow-stage--active .bc-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.bc-modal-data-flow-stage--completed .bc-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-data-flow-stage--active .bc-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.bc-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.bc-modal-data-flow-stage--completed .bc-modal-data-flow-stage-label {
  color: #138B4C;
}

.bc-modal-data-flow-stage--active .bc-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.bc-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.bc-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.bc-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.bc-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.bc-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.bc-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.bc-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.bc-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.bc-modal-data-flow-document--active .bc-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.bc-modal-data-flow-document-fold {
  display: none;
}

.bc-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.bc-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.bc-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.bc-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.bc-modal-data-flow-document-icon-wrapper--active .bc-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.bc-modal-data-flow-document--active .bc-modal-data-flow-document-title {
  color: #138B4C;
}

.bc-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.bc-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.bc-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.bc-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.bc-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.bc-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.bc-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.bc-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.bc-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bc-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.bc-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.bc-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.bc-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.bc-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.bc-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.bc-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.bc-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.bc-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.bc-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.bc-modal-terms-area-button .bc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.bc-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.bc-modal-tab-content--display .bc-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.bc-modal-tab-content--display .bc-modal-terms-area-button .bc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.bc-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.bc-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.bc-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.bc-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.bc-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.bc-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.bc-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.bc-modal-data-flow-2-row {
  display: flex;
}

.bc-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bc-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.bc-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.bc-modal-data-flow-2-row--content .bc-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.bc-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.bc-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.bc-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.bc-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-label {
  color: #333333;
}

.bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage-label {
  color: #999999;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--completed .bc-modal-data-flow-2-stage-label {
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--active .bc-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.bc-modal-tab-content--display .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.bc-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.bc-modal-data-flow-2-row--content .bc-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.bc-modal-data-flow-2-row--content .bc-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.bc-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bc-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.bc-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.bc-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.bc-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.bc-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.bc-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.bc-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.bc-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-title,
.bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-title {
  color: #333333;
}

.bc-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.bc-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.bc-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.bc-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-title {
  color: #888888;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-title,
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-title {
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--completed .bc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--active .bc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-date {
  color: #333333;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.bc-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.bc-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.bc-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.bc-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.bc-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.bc-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.bc-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.bc-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.bc-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.bc-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.bc-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.bc-modal-data-flow-2-grid--external .bc-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.bc-modal-data-flow-2-grid--external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell {
  border-bottom: none;
}

.bc-modal-data-flow-2-grid--external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.bc-modal-data-flow-2-grid--external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell--label::after {
  display: none;
}

.bc-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.bc-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.bc-modal-data-flow-2-row--content-top .bc-modal-data-flow-2-document--buyer.bc-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.bc-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.bc-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.bc-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.bc-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.bc-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.bc-modal-data-flow-2-stage--external-completed .bc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.bc-modal-data-flow-2-stage--external-active .bc-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.bc-modal-data-flow-2-stage--external-completed .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.bc-modal-data-flow-2-stage--external-active .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.bc-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.bc-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.bc-modal-data-flow-2-document--external .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.bc-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.bc-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.bc-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.bc-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.bc-modal-data-flow-2-document--external .bc-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.bc-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.bc-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.bc-modal-data-flow-2-document--supplier .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.bc-modal-data-flow-2-document--supplier .bc-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.bc-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.bc-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.bc-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.bc-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier .bc-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier .bc-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-completed .bc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--supplier-active .bc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.bc-modal-tab-content--data-flow-2-external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.bc-modal-tab-content--data-flow-2-external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external .bc-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external .bc-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.bc-modal-tab-content--display.bc-modal-tab-content--data-flow-2-external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.bc-modal-tab-content--display.bc-modal-tab-content--data-flow-2-external .bc-modal-data-flow-2-row--header .bc-modal-data-flow-2-cell:has(.bc-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-circle,
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external-completed .bc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external-active .bc-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-icon,
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external-completed .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external-active .bc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-stage--external .bc-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-completed .bc-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.bc-modal-tab-content--display .bc-modal-data-flow-2-document--external-active .bc-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.bc-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.bc-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.bc-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.bc-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.bc-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.bc-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.bc-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.bc-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bc-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.bc-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.bc-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.bc-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.bc-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.bc-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.bc-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.bc-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.bc-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.bc-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.bc-modal-milestone-date-value {
  color: #666666;
}

.bc-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.bc-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.bc-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.bc-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.bc-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.bc-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.bc-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.bc-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.bc-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.bc-modal-activity-item--display .bc-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.bc-modal-calendar-milestones .bc-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.bc-modal-calendar-milestones .bc-modal-activity-user:hover {
  text-decoration: none;
}

.bc-modal-calendar-milestones .bc-modal-activity-item--display .bc-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.bc-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.bc-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bc-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.bc-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.bc-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-calendar-nav-btn:hover .bc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.bc-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.bc-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.bc-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.bc-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.bc-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.bc-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.bc-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.bc-modal-calendar-view-mode-btn--active + .bc-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.bc-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bc-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.bc-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.bc-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.bc-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.bc-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.bc-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.bc-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.bc-modal-calendar-grid-cell:nth-child(7n-1),
.bc-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.bc-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.bc-modal-calendar-grid-day-name:nth-child(6),
.bc-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.bc-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.bc-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.bc-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.bc-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.bc-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.bc-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.bc-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.bc-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.bc-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bc-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.bc-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bc-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.bc-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.bc-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.bc-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bc-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.bc-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.bc-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.bc-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.bc-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.bc-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.bc-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.bc-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.bc-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.bc-modal-calendar-weekly-day-column:nth-child(6),
.bc-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.bc-modal-calendar-weekly-day-header:nth-child(6),
.bc-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.bc-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.bc-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.bc-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.bc-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.bc-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.bc-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.bc-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.bc-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.bc-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bc-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.bc-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.bc-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.bc-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.bc-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.bc-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.bc-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.bc-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.bc-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.bc-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.bc-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.bc-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.bc-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.bc-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.bc-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.bc-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-view {
  border-color: #D0D0D0;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-view-mode-btn--active + .bc-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-milestones-header {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-view-title {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-grid-day-name {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-grid-cell-day {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-weekly-day-name {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-weekly-day-date {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-weekly-event-title {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-daily-header {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-daily-hour-label {
  color: #666666;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-daily-event-title {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar .bc-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.bc-modal-calendar-milestones-header--external {
  color: #333333;
}

.bc-modal-calendar-nav-btn--external .bc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.bc-modal-calendar-nav-btn--external:hover .bc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.bc-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.bc-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.bc-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.bc-modal-calendar-view-mode-btn--active-external + .bc-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.bc-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.bc-modal-tab-content--calendar-external .bc-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.bc-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.bc-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.bc-modal-activity-type--external {
  color: #333333;
}

.bc-modal-activity-user--external {
  color: #E67E22;
}

.bc-modal-activity-user--external:hover {
  color: #D35400;
}

.bc-modal-calendar-milestones .bc-modal-activity-user--external {
  color: #E67E22;
}

.bc-modal-calendar-milestones .bc-modal-activity-user--external:hover {
  color: #D35400;
}

.bc-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.bc-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.bc-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.bc-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.bc-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.bc-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.bc-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.bc-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.bc-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.bc-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.bc-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.bc-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.bc-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-milestones-header--external {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-view-mode-btn--active-external + .bc-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-calendar-nav-btn--external .bc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-activity-type--external {
  color: #333333;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-activity-user--external {
  color: #E67E22;
}

.bc-modal-tab-content--display.bc-modal-tab-content--calendar-external .bc-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.bc-modal-input--error,
.bc-modal-form-input.bc-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.bc-modal-dropdown--error .bc-modal-delivery-type-input,
.bc-modal-dropdown--error .bc-modal-organization-input,
.bc-modal-dropdown--error .bc-modal-sales-structure-input,
.bc-modal-dropdown--error .bc-modal-sales-channel-input,
.bc-modal-dropdown--error .bc-modal-sales-unit-input,
.bc-modal-dropdown--error .bc-modal-territory-input,
.bc-modal-dropdown--error .bc-modal-sales-office-input,
.bc-modal-dropdown--error .bc-modal-sold-to-party-input,
.bc-modal-dropdown--error .bc-modal-deliver-to-party-input,
.bc-modal-dropdown--error .bc-modal-attention-to-deliver-input,
.bc-modal-dropdown--error .bc-modal-incoterm-input,
.bc-modal-dropdown--error .bc-modal-delivery-point-input,
.bc-modal-dropdown--error .bc-modal-shipping-point-input,
.bc-modal-dropdown--error .bc-modal-sales-order-input,
.bc-modal-dropdown--error .bc-modal-sales-team-input,
.bc-modal-dropdown--error .bc-modal-sales-person-input,
.bc-modal-dropdown--error .bc-modal-delivery-priority-input,
.bc-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.bc-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.bc-modal-date-picker-wrapper.bc-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.bc-modal-custom-dropdown {
  position: relative;
}

.bc-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.bc-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.bc-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.bc-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-check {
  color: #999999 !important;
}

.bc-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.bc-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.bc-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.bc-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.bc-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bc-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.bc-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.bc-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.bc-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.bc-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.bc-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.bc-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.bc-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bc-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.bc-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.bc-modal-setting-form-label--display {
  color: #333333;
}

.bc-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.bc-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-setting-dropdown--active .bc-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.bc-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.bc-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.bc-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.bc-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.bc-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.bc-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.bc-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-setting-dropdown-icon.bc-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.bc-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.bc-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.bc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.bc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.bc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.bc-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.bc-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.bc-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.bc-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.bc-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.bc-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.bc-modal-setting-dropdown-item-separator {
  color: #999999;
}

.bc-modal-setting-dropdown-item-name {
  color: #333333;
}

.bc-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.bc-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.bc-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.bc-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.bc-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.bc-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.bc-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.bc-modal-setting-tab-content--print .bc-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.bc-modal-setting-tab-content--print .bc-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bc-modal-setting-tab-content--print .bc-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.bc-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.bc-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.bc-modal-setting-table thead tr {
  height: 2.25rem;
}

.bc-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.bc-modal-setting-table tbody tr {
  height: 2.25rem;
}

.bc-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.bc-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.bc-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.bc-modal-setting-table--display thead th:nth-child(2),
.bc-modal-setting-table--display thead th:nth-child(3),
.bc-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.bc-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.bc-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.bc-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.bc-modal-setting-table--transfer.bc-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.bc-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.bc-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bc-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.bc-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.bc-modal-setting-table--transfer:not(.bc-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.bc-modal-setting-table--transfer:not(.bc-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.bc-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.bc-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.bc-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.bc-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.bc-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.bc-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.bc-modal-tab-content--display .bc-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.bc-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.bc-modal-tab-content--display .bc-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.bc-modal-attribute-header-section--external .bc-modal-form-input:focus {
  border-color: #F5B041;
}

.bc-modal-attribute-header-section--external .bc-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.bc-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.bc-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.bc-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.bc-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.bc-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.bc-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.bc-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.bc-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.bc-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.bc-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.bc-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.bc-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.bc-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.bc-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.bc-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.bc-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.bc-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.bc-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.bc-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.bc-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.bc-modal-available-qty-tree-level {
  position: relative;
}

.bc-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.bc-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.bc-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.bc-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.bc-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.bc-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.bc-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.bc-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.bc-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.bc-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.bc-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.bc-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.bc-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.bc-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.bc-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.bc-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.bc-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.bc-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.bc-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.bc-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.bc-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.bc-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.bc-modal-available-qty-tree-batch-header .bc-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.bc-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.bc-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.bc-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.bc-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.bc-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.bc-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.bc-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.bc-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.bc-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.bc-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.bc-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.bc-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.bc-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.bc-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.bc-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.bc-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.bc-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.bc-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.bc-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.bc-modal-activity-type--clickable.bc-modal-activity-type--display:hover {
  color: #138B4C;
}

.bc-modal-activity-type--clickable.bc-modal-activity-type--external:hover {
  color: #E67E00;
}

.bc-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.bc-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.bc-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.bc-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.bc-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.bc-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.bc-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bc-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.bc-modal-activity-detail-content .bc-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.bc-modal-activity-detail-modal .bc-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.bc-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.bc-modal-activity-detail-modal .bc-modal-tabs--display .bc-modal-tab {
  color: #333333;
}

.bc-modal-activity-detail-modal .bc-modal-tabs--display .bc-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.bc-modal-activity-detail-modal .bc-modal-tabs--external.bc-modal-tabs--display .bc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.bc-modal-activity-detail-tab-content--general .bc-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.bc-modal-activity-detail-content .bc-modal-milestone-status {
  margin: 0;
}

.bc-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.bc-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.bc-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bc-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.bc-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.bc-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.bc-modal-activity-detail-pic-chat-wrapper:hover .bc-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.bc-modal-activity-detail-pic-chat-wrapper:hover .bc-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.bc-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.bc-modal-activity-detail-pic--clickable:hover .bc-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.bc-modal-activity-detail-content--external .bc-modal-activity-detail-pic {
  color: #E67E22;
}

.bc-modal-activity-detail-content--external .bc-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.bc-modal-activity-detail-content--external .bc-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.bc-modal-activity-detail-content--external .bc-modal-activity-detail-pic--clickable:hover .bc-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.bc-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.bc-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.bc-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.bc-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.bc-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.bc-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.bc-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.bc-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.bc-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.bc-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.bc-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bc-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.bc-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.bc-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.bc-modal-activity-detail-content--external .bc-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.bc-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.bc-modal-activity-detail-content--external .bc-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.bc-modal-activity-detail-content--external .bc-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.bc-modal-activity-detail-content--external .bc-modal-activity-detail-document-name {
  color: #E67E22;
}

.bc-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.bc-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.bc-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.bc-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.bc-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.bc-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.bc-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.bc-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.bc-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.bc-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.bc-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.bc-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.bc-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.bc-modal-activity-detail-tab-content--general {
  padding: 0;
}

.bc-modal-activity-detail-tab-content--general .bc-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.bc-modal-activity-detail-tab-content--general > div:not(.bc-modal-item-text-info) {
  padding: 0 1.5rem;
}

.bc-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.bc-modal-activity-detail-tab-content--attachment,
.bc-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.bc-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.bc-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.bc-modal-activity-detail-tab-content--attachment .bc-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.bc-modal-activity-detail-tab-content--attachment .bc-modal-batch-assignment-table-section > .bc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.bc-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.bc-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.bc-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.bc-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.bc-modal-activity-detail-content--external .bc-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.bc-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.bc-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.bc-modal-activity-detail-content--external .bc-modal-item-text-info {
  background-color: #FEF5E7;
}

.bc-modal-activity-detail-content--external .bc-modal-task-notes-section {
  background-color: #FEF5E7;
}

.bc-modal-task-notes-section .bc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.bc-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.bc-modal-task-notes-textarea.bc-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.bc-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.bc-modal-task-chat-section > .bc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.bc-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.bc-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.bc-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bc-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bc-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.bc-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.bc-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.bc-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.bc-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.bc-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.bc-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.bc-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.bc-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.bc-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.bc-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.bc-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.bc-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.bc-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.bc-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.bc-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.bc-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.bc-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.bc-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.bc-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.bc-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.bc-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.bc-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.bc-modal-activity-detail-content--external .bc-modal-task-chat-avatar {
  background-color: #F5B041;
}

.bc-modal-activity-detail-content--external .bc-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.bc-modal-activity-detail-content--external .bc-modal-task-chat-reply-btn {
  color: #E67E22;
}

.bc-modal-activity-detail-content--external .bc-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.bc-modal-dropdown--display .bc-modal-dropdown-item,
.bc-modal-dropdown--display [class*="-item"],
.bc-modal-tags-dropdown--display .bc-modal-tags-dropdown-item,
.bc-modal-baseline-date-dropdown--display .bc-modal-baseline-date-item,
.bc-modal-reference-type-dropdown--display .bc-modal-reference-type-item,
.bc-modal-delivery-priority-dropdown--display .bc-modal-delivery-priority-item,
.bc-modal-organization-dropdown--display .bc-modal-organization-item,
.bc-modal-sales-structure-dropdown--display .bc-modal-sales-structure-item,
.bc-modal-delivery-type-dropdown--display .bc-modal-delivery-type-item,
.bc-modal-sales-channel-dropdown--display .bc-modal-sales-channel-item,
.bc-modal-sales-unit-dropdown--display .bc-modal-sales-unit-item,
.bc-modal-sold-to-party-dropdown--display .bc-modal-sold-to-party-item,
.bc-modal-deliver-to-party-dropdown--display .bc-modal-deliver-to-party-item,
.bc-modal-attention-to-deliver-dropdown--display .bc-modal-attention-to-deliver-item,
.bc-modal-incoterm-dropdown--display .bc-modal-incoterm-item,
.bc-modal-delivery-point-dropdown--display .bc-modal-delivery-point-item,
.bc-modal-shipping-point-dropdown--display .bc-modal-shipping-point-item,
.bc-modal-sales-order-dropdown--display .bc-modal-sales-order-item,
.bc-modal-sales-person-dropdown--display .bc-modal-sales-person-item,
.bc-modal-sales-team-dropdown--display .bc-modal-sales-team-item,
.bc-modal-territory-dropdown--display .bc-modal-territory-item,
.bc-modal-sales-office-dropdown--display .bc-modal-sales-office-item,
.bc-modal-status-dropdown--display .bc-modal-status-item,
.bc-modal-handling-product-dropdown--display .bc-modal-handling-product-item,
.bc-modal-child-uom-dropdown--display .bc-modal-child-uom-item,
.bc-modal-partner-type-dropdown--display .bc-modal-partner-type-item,
.bc-modal-partner-id-dropdown--display .bc-modal-partner-id-item,
.bc-modal-custom-dropdown--display .bc-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.bc-modal-dropdown--display .bc-modal-dropdown-item:hover,
.bc-modal-dropdown--display [class*="-item"]:hover,
.bc-modal-tags-dropdown--display .bc-modal-tags-dropdown-item:hover,
.bc-modal-baseline-date-dropdown--display .bc-modal-baseline-date-item:hover,
.bc-modal-reference-type-dropdown--display .bc-modal-reference-type-item:hover,
.bc-modal-delivery-priority-dropdown--display .bc-modal-delivery-priority-item:hover,
.bc-modal-organization-dropdown--display .bc-modal-organization-item:hover,
.bc-modal-sales-structure-dropdown--display .bc-modal-sales-structure-item:hover,
.bc-modal-delivery-type-dropdown--display .bc-modal-delivery-type-item:hover,
.bc-modal-sales-channel-dropdown--display .bc-modal-sales-channel-item:hover,
.bc-modal-sales-unit-dropdown--display .bc-modal-sales-unit-item:hover,
.bc-modal-sold-to-party-dropdown--display .bc-modal-sold-to-party-item:hover,
.bc-modal-deliver-to-party-dropdown--display .bc-modal-deliver-to-party-item:hover,
.bc-modal-attention-to-deliver-dropdown--display .bc-modal-attention-to-deliver-item:hover,
.bc-modal-incoterm-dropdown--display .bc-modal-incoterm-item:hover,
.bc-modal-delivery-point-dropdown--display .bc-modal-delivery-point-item:hover,
.bc-modal-shipping-point-dropdown--display .bc-modal-shipping-point-item:hover,
.bc-modal-sales-order-dropdown--display .bc-modal-sales-order-item:hover,
.bc-modal-sales-person-dropdown--display .bc-modal-sales-person-item:hover,
.bc-modal-sales-team-dropdown--display .bc-modal-sales-team-item:hover,
.bc-modal-territory-dropdown--display .bc-modal-territory-item:hover,
.bc-modal-sales-office-dropdown--display .bc-modal-sales-office-item:hover,
.bc-modal-status-dropdown--display .bc-modal-status-item:hover,
.bc-modal-handling-product-dropdown--display .bc-modal-handling-product-item:hover,
.bc-modal-child-uom-dropdown--display .bc-modal-child-uom-item:hover,
.bc-modal-partner-type-dropdown--display .bc-modal-partner-type-item:hover,
.bc-modal-partner-id-dropdown--display .bc-modal-partner-id-item:hover,
.bc-modal-custom-dropdown--display .bc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.bc-modal-dropdown--display [class*="-item--selected"],
.bc-modal-tags-dropdown--display .bc-modal-tags-dropdown-item--selected,
.bc-modal-baseline-date-dropdown--display .bc-modal-baseline-date-item--selected,
.bc-modal-reference-type-dropdown--display .bc-modal-reference-type-item--selected,
.bc-modal-delivery-priority-dropdown--display .bc-modal-delivery-priority-item--selected,
.bc-modal-organization-dropdown--display .bc-modal-organization-item--selected,
.bc-modal-sales-structure-dropdown--display .bc-modal-sales-structure-item--selected,
.bc-modal-delivery-type-dropdown--display .bc-modal-delivery-type-item--selected,
.bc-modal-sales-channel-dropdown--display .bc-modal-sales-channel-item--selected,
.bc-modal-sales-unit-dropdown--display .bc-modal-sales-unit-item--selected,
.bc-modal-sold-to-party-dropdown--display .bc-modal-sold-to-party-item--selected,
.bc-modal-deliver-to-party-dropdown--display .bc-modal-deliver-to-party-item--selected,
.bc-modal-attention-to-deliver-dropdown--display .bc-modal-attention-to-deliver-item--selected,
.bc-modal-incoterm-dropdown--display .bc-modal-incoterm-item--selected,
.bc-modal-delivery-point-dropdown--display .bc-modal-delivery-point-item--selected,
.bc-modal-shipping-point-dropdown--display .bc-modal-shipping-point-item--selected,
.bc-modal-sales-order-dropdown--display .bc-modal-sales-order-item--selected,
.bc-modal-sales-person-dropdown--display .bc-modal-sales-person-item--selected,
.bc-modal-sales-team-dropdown--display .bc-modal-sales-team-item--selected,
.bc-modal-territory-dropdown--display .bc-modal-territory-item--selected,
.bc-modal-sales-office-dropdown--display .bc-modal-sales-office-item--selected,
.bc-modal-status-dropdown--display .bc-modal-status-item--selected,
.bc-modal-handling-product-dropdown--display .bc-modal-handling-product-item--selected,
.bc-modal-child-uom-dropdown--display .bc-modal-child-uom-item--selected,
.bc-modal-partner-type-dropdown--display .bc-modal-partner-type-item--selected,
.bc-modal-partner-id-dropdown--display .bc-modal-partner-id-item--selected,
.bc-modal-custom-dropdown--display .bc-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.bc-modal-dropdown--display [class*="-check"],
.bc-modal-dropdown--display .bc-modal-dropdown-check,
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.bc-modal-dropdown--display [class*="-item-code"],
.bc-modal-dropdown--display [class*="-item-name"],
.bc-modal-dropdown--display [class*="-item-content"],
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-code,
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-name,
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-item,
.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.bc-modal-sold-to-party-dropdown-content--display .bc-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.bc-modal-tags-dropdown--display .bc-modal-tags-item,
.bc-modal-tags-dropdown--display .bc-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-tags-dropdown--display .bc-modal-tags-item:hover {
  background-color: transparent !important;
}

.bc-modal-tags-dropdown--display .bc-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.bc-modal-tags-dropdown--display .bc-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item,
.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.bc-modal-custom-dropdown-list--display .bc-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* Allocation Tab Styles */
.bc-modal-allocation-container { padding: 1rem; }
.bc-modal-allocation-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.bc-modal-allocation-table th { background-color: #f0f4f8; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #d0d5dd; font-weight: 600; }
.bc-modal-allocation-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }
.bc-modal-allocation-table tr:hover { background-color: #f9fafb; }
.bc-modal-allocation-input { width: 6.25rem; padding: 0.25rem 0.5rem; border: 1px solid #d0d0d0; border-radius: 0.1875rem; font-size: 0.75rem; text-align: right; }
.bc-modal-allocation-input:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.2); }
.bc-modal-allocation-summary { display: flex; gap: 1.5rem; padding: 1rem; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 0.25rem; margin-bottom: 1rem; }
.bc-modal-allocation-summary-item { display: flex; flex-direction: column; align-items: center; flex: 1 1; }
.bc-modal-allocation-summary-label { font-size: 0.6875rem; color: #666; margin-bottom: 0.25rem; }
.bc-modal-allocation-summary-value { font-size: 1.25rem; font-weight: 700; }
.bc-modal-reconciliation-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 1rem; }
.bc-modal-reconciliation-table th { background-color: #fafafa; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
.bc-modal-reconciliation-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }
.bc-modal-reconciliation-status-badge { display: inline-block; padding: 2px 0.5rem; border-radius: 0.625rem; font-size: 0.6875rem; font-weight: 600; }
.bc-modal-collection-status-badge { display: inline-block; padding: 2px 0.5rem; border-radius: 0.625rem; font-size: 0.6875rem; font-weight: 600; }

/* ===== from pages/Sales/Campaign/Campaign.css ===== */
/* Campaign Wrapper - prevent page scroll */
.campaign-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Campaign Container */
.campaign-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.campaign-header {
  margin-bottom: 0;
}

.campaign-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Delivery Control - Exact copy of third-nav-control */
.campaign-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.campaign-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.campaign-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.campaign-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.campaign-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.campaign-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.campaign-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.campaign-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.campaign-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.campaign-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.campaign-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.campaign-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.campaign-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.campaign-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.campaign-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.campaign-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.campaign-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.campaign-layout-dropdown-item:last-child {
  border-bottom: none;
}

.campaign-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.campaign-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.campaign-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.campaign-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.campaign-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.campaign-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.campaign-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.campaign-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.campaign-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.campaign-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.campaign-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.campaign-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.campaign-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.campaign-filter-parameter-wrapper {
  position: relative;
}

.campaign-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.campaign-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.campaign-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.campaign-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.campaign-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.campaign-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.campaign-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.campaign-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.campaign-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.campaign-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.campaign-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.campaign-filter-close:hover {
  background-color: #f0f0f0;
}

.campaign-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.campaign-filter-group {
  margin-bottom: 1rem;
}

.campaign-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.campaign-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.campaign-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.campaign-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.campaign-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.campaign-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.campaign-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.campaign-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.campaign-filter-org-container {
  flex: 1 1;
  position: relative;
}

.campaign-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.campaign-filter-org-input:hover {
  border-color: #C2DE54;
}

.campaign-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.campaign-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.campaign-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.campaign-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.campaign-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.campaign-filter-tag-remove:hover {
  color: #000;
}

.campaign-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.campaign-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.campaign-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.campaign-filter-org-item:hover {
  background-color: #f5f5f5;
}

.campaign-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.campaign-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.campaign-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.campaign-filter-org-code {
  font-weight: 600;
  color: #333;
}

.campaign-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.campaign-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.campaign-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.campaign-type-dropdown-item:last-child {
  border-bottom: none;
}

.campaign-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.campaign-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.campaign-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.campaign-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Campaign Table */
.campaign-table {
  animation: fadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .campaign-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .campaign-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .campaign-type-dropdown {
    min-width: 11.25rem;
  }

  .campaign-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}
/* ===== from pages/Sales/Campaign/CampaignModal.css ===== */
/* Campaign Modal Specific Styles */
.campaign-modal {
  overscroll-behavior: contain;
}

.campaign-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.cp-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.cp-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.cp-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.cp-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.cp-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.cp-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.cp-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cp-modal-pov-button--external.cp-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cp-modal-pov-button--external .cp-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-pov-button--external .cp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.cp-modal-pov-caret--open {
  transform: rotate(180deg);
}

.cp-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.cp-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.cp-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.cp-modal-pov-dropdown-item span {
  flex: 1 1;
}

.cp-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.cp-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.cp-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.cp-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.cp-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.cp-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.cp-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.cp-modal-tabs--display .cp-modal-tab {
  color: #666666;
}

.cp-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.cp-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.cp-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.cp-modal-tabs--display .cp-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cp-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.cp-modal-tabs--external .cp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cp-modal-tabs--external.cp-modal-tabs--display .cp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cp-modal-tabs--external .cp-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.cp-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.cp-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.cp-modal-action-button span {
  white-space: nowrap;
}

.cp-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.cp-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.cp-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cp-modal-action-button--disabled .cp-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.cp-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.cp-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.cp-modal-left-area--full .cp-modal-back-button {
  transition: width 300ms ease;
}

.cp-modal-left-area--full .cp-modal-back-button:hover {
  width: 3.5rem;
}

.cp-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.cp-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.cp-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cp-modal-content--item {
  padding-bottom: 1rem;
}

.cp-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.cp-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.cp-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.cp-modal-attachment-table-container .cp-modal-detail-table thead,
.cp-modal-attachment-table-container .cp-modal-attachment-table thead {
  box-shadow: none !important;
}

.cp-modal-attachment-table-container .cp-modal-detail-table tr,
.cp-modal-attachment-table-container .cp-modal-attachment-table tr {
  box-shadow: none !important;
}

.cp-modal-attachment-table-container .cp-modal-detail-table tbody tr:last-child,
.cp-modal-attachment-table-container .cp-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cp-modal-attachment-table-container .cp-modal-detail-table tbody tr:last-child td,
.cp-modal-attachment-table-container .cp-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cp-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.cp-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.cp-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.cp-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.cp-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.cp-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.cp-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.cp-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.cp-modal-attachment-filename--external {
  color: #E67E22;
}

.cp-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.cp-modal-tab-content--display .cp-modal-attachment-filename--external {
  color: #E67E22;
}

.cp-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.cp-modal-attachment-size {
  color: #666666;
}

.cp-modal-attachment-date {
  color: #666666;
}

.cp-modal-attachment-uploadedby {
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.cp-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cp-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cp-modal-attachment-browse-btn:focus {
  outline: none;
}

.cp-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cp-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cp-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-attachment-browse-btn--disabled .cp-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cp-modal-tab-content--display .cp-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.cp-modal-tab-content--display .cp-modal-attachment-filename.cp-modal-attachment-filename--external {
  color: #E67E22;
}

.cp-modal-tab-content--display .cp-modal-attachment-type {
  color: #666666;
}

.cp-modal-tab-content--display .cp-modal-attachment-size {
  color: #666666;
}

.cp-modal-tab-content--display .cp-modal-attachment-date {
  color: #666666;
}

.cp-modal-tab-content--display .cp-modal-attachment-uploadedby {
  color: #333333;
}

.cp-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.cp-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.cp-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.cp-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cp-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.cp-modal-tab-content--display .cp-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.cp-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cp-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.cp-modal-tab-content--display .cp-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.cp-modal-basic-section--external .cp-modal-form-input:focus {
  border-color: #F5B041;
}

.cp-modal-basic-section--external .cp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.cp-modal-tab-content--external .cp-modal-form-input:focus,
.cp-modal-tab-content--external .cp-modal-form-textarea:focus,
.cp-modal-tab-content--external .cp-modal-custom-dropdown-input:focus,
.cp-modal-tab-content--external .cp-modal-date-input:focus,
.cp-modal-tab-content--external .cp-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.cp-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.cp-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.cp-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.cp-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.cp-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cp-modal-tab-content--display .cp-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.cp-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.cp-modal-tab-content--display .cp-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.cp-modal-partner-header-section--external .cp-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.cp-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cp-modal-tab-content--display .cp-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.cp-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.cp-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.cp-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.cp-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cp-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.cp-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.cp-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.cp-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.cp-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.cp-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.cp-modal-chat-section {
  padding: 1.5rem 0;
}

.cp-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cp-modal-chat-header h3 {
  margin: 0;
}

.cp-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.cp-modal-chat-new-thread .cp-modal-form-textarea {
  min-height: 5rem;
}

.cp-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cp-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cp-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.cp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cp-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.cp-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.cp-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.cp-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cp-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.cp-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.cp-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.cp-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cp-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cp-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-chat-user-name {
  color: #333333 !important;
}

.cp-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.cp-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.cp-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.cp-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.cp-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.cp-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.cp-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cp-modal-chat-reply-btn:hover .cp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cp-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.cp-modal-chat-replies .cp-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.cp-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.cp-modal-chat-reply-input .cp-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.cp-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cp-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.cp-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.cp-modal-tab-content--display .cp-modal-chat-thread {
  border-color: #E5E5E5;
}

.cp-modal-tab-content--display .cp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display .cp-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-chat-user-position {
  background-color: #E8F5E9;
}

.cp-modal-tab-content--display .cp-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.cp-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cp-modal-tab-content--display .cp-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cp-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.cp-modal-notes-header-section--external .cp-modal-form-textarea:focus {
  border-color: #F5B041;
}

.cp-modal-chat-section--external .cp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.cp-modal-chat-avatar--external {
  background-color: #F5B041;
}

.cp-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.cp-modal-tab-content--display .cp-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-thread {
  border-color: #E5E5E5;
}

.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-user-name {
  color: #333333 !important;
}

.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-user-position {
  background-color: #FDE8D0;
}

.cp-modal-tab-content--display.cp-modal-tab-content--external .cp-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.cp-modal-chat-reply-btn--external {
  color: #E67E22;
}

.cp-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.cp-modal-chat-reply-btn--external .cp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cp-modal-chat-reply-btn--external:hover .cp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.cp-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cp-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.cp-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.cp-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.cp-modal-chat-textarea-wrapper {
  position: relative;
}

.cp-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.cp-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cp-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.cp-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.cp-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.cp-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.cp-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cp-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.cp-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.cp-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.cp-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cp-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.cp-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.cp-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.cp-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.cp-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.cp-modal-tab-content--display .cp-modal-table-empty-state-title {
  color: #666666;
}

.cp-modal-tab-content--display .cp-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.cp-modal-partner-header-section + .cp-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.cp-modal-partner-header-section + .cp-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.cp-modal-partner-header-section + .cp-modal-item-content-section .cp-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.cp-modal-partner-header-section + .cp-modal-item-content-section .cp-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.cp-modal-partner-header-section + .cp-modal-item-content-section .cp-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.cp-modal-partner-header-section + .cp-modal-item-content-section .cp-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.cp-modal-partner-header-section + .cp-modal-item-content-section .cp-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.cp-modal-partner-table-container .cp-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.cp-modal-partner-table-container .cp-modal-partner-table th:last-child,
.cp-modal-partner-table-container .cp-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.cp-modal-detail-table-container--external.cp-modal-partner-table-container .cp-modal-partner-table th:last-child,
.cp-modal-detail-table-container--external.cp-modal-partner-table-container .cp-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.cp-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cp-modal-item-header-section .cp-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-tab-content--display .cp-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.cp-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.cp-modal-tab-content--display .cp-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.cp-modal-item-header-section--external .cp-modal-form-input:focus {
  border-color: #F5B041;
}

.cp-modal-item-header-section--external .cp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.cp-modal-detail-subtabs--external .cp-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.cp-modal-detail-subtabs--external .cp-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.cp-modal-detail-subtabs--external .cp-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.cp-modal-tab-content--display .cp-modal-detail-subtabs--external .cp-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cp-modal-tab-content--display .cp-modal-detail-subtabs--external .cp-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.cp-modal-tab-content.cp-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.cp-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.cp-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.cp-modal-item-table-wrapper .cp-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.cp-modal-item-table-wrapper .cp-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.cp-modal-item-table-wrapper--terms .cp-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.cp-modal-tab-content--external.cp-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.cp-modal-tab-content--external .cp-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-tab-content--external .cp-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-tab-content--external .cp-modal-item-table-wrapper--terms .cp-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.cp-modal-tab-content--external .cp-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.cp-modal-item-table-wrapper--terms .cp-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.cp-modal-item-table-wrapper--terms .cp-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cp-modal-item-table-wrapper--terms .cp-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.cp-modal-item-table-wrapper--terms .cp-modal-detail-table tr {
  height: auto;
}

.cp-modal-item-table-wrapper--terms .cp-modal-detail-table-container .cp-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.cp-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.cp-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.cp-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cp-modal-volume-input-group .cp-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cp-modal-volume-input-group .cp-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cp-modal-volume-input-group .cp-modal-sla-input-wrapper .cp-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.cp-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cp-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cp-modal-volume-uom-list--display .cp-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-volume-uom-list--display .cp-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.cp-modal-volume-uom-list--display .cp-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-volume-uom-list--display .cp-modal-volume-uom-check {
  color: #999999 !important;
}

.cp-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.cp-modal-volume-uom-dropdown--display .cp-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cp-modal-volume-uom-dropdown--display .cp-modal-volume-uom-item:hover {
  background-color: transparent;
}

.cp-modal-volume-uom-dropdown--display .cp-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cp-modal-volume-uom-dropdown--display .cp-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.cp-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cp-modal-weight-input-group .cp-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cp-modal-weight-input-group .cp-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cp-modal-weight-input-group .cp-modal-sla-input-wrapper .cp-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.cp-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cp-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-weight-uom-input::placeholder {
  color: #999999;
}

.cp-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.cp-modal-weight-uom-dropdown--display .cp-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cp-modal-weight-uom-dropdown--display .cp-modal-weight-uom-item:hover {
  background-color: transparent;
}

.cp-modal-weight-uom-dropdown--display .cp-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cp-modal-weight-uom-dropdown--display .cp-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.cp-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.cp-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.cp-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.cp-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.cp-modal-form-input--display ~ .cp-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.cp-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.cp-modal-form-input--display {
  cursor: default;
}

.cp-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.cp-modal-form-label--display {
  color: #333333 !important;
}

.cp-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.cp-modal-form-label--display .cp-modal-required {
  color: #FF4D4F;
}

.cp-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.cp-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.cp-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.cp-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.cp-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.cp-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.cp-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cp-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.cp-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.cp-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.cp-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.cp-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.cp-modal-sla-spinner-btn:disabled .cp-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cp-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sla-spinner-btn:hover .cp-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.cp-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.cp-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.cp-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.cp-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.cp-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.cp-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.cp-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.cp-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.cp-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.cp-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.cp-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.cp-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.cp-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.cp-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.cp-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.cp-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.cp-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.cp-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.cp-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.cp-modal-stage-dropdown-input--display .cp-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.cp-modal-stage-dropdown-input--display .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.cp-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.cp-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.cp-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.cp-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.cp-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cp-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.cp-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.cp-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.cp-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.cp-modal-accordion-header--display {
  color: #333333;
}

.cp-modal-accordion-header--display.cp-modal-accordion-header--active {
  color: #333333;
}

.cp-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.cp-modal-accordion-header--display .cp-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.cp-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.cp-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.cp-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.cp-modal-stage-main-title--display {
  color: #138B4C;
}

.cp-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-stage-title--display {
  color: #333333;
}

.cp-modal-stage-current {
  margin-bottom: 1.875rem;
}

.cp-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.cp-modal-stage-label--display {
  color: #666666;
}

.cp-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-stage-subtitle--display {
  color: #333333;
}

.cp-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.cp-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.cp-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.cp-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.cp-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.cp-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cp-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.cp-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.cp-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cp-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.cp-modal-download-button:active {
  background-color: #E0E0E0;
}

.cp-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-download-button--display .cp-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.cp-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.cp-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.cp-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.cp-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.cp-modal-timeline-item--display .cp-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.cp-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.cp-modal-timeline-badge--inactive .cp-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.cp-modal-timeline-item--display .cp-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.cp-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.cp-modal-timeline-item--display .cp-modal-timeline-line {
  background-color: #138B4C;
}

.cp-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cp-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.cp-modal-timeline-status--display {
  color: #333333;
}

.cp-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.cp-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.cp-modal-timeline-date--display {
  color: #666666;
}

.cp-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.cp-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.cp-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.cp-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cp-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cp-modal-timeline-document--display {
  color: #138B4C;
}

.cp-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.cp-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.cp-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.cp-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.cp-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.cp-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.cp-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.cp-modal-activity-item--display .cp-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.cp-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.cp-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.cp-modal-activity-item--display .cp-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.cp-modal-activity-item--display .cp-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.cp-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.cp-modal-activity-item--display .cp-modal-activity-line {
  background-color: #138B4C;
}

.cp-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.cp-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.cp-modal-activity-type--display {
  color: #333333;
}

.cp-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.cp-modal-activity-header--display {
  color: #666666;
}

.cp-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cp-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.cp-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.cp-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.cp-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.cp-modal-activity-change--display .cp-modal-activity-field {
  color: #333333;
}

.cp-modal-activity-change--display .cp-modal-activity-new {
  color: #138B4C;
}

.cp-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.cp-modal-activity-date--display {
  color: #666666;
}

.cp-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.cp-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.cp-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cp-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cp-modal-activity-more--display {
  color: #138B4C;
}

.cp-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-activity-more--display .cp-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.cp-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.cp-modal-reference-table thead {
  background-color: #F9F9F9;
}

.cp-modal-tab-content--display .cp-modal-reference-table thead {
  background-color: #FAFAFA;
}

.cp-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.cp-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.cp-modal-tab-content--display .cp-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.cp-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.cp-modal-tab-content--display .cp-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.cp-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.cp-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.cp-modal-detail-subtab:hover {
  color: #138B4C;
}

.cp-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.cp-modal-tab-content--display .cp-modal-detail-subtab {
  color: #666666;
}

.cp-modal-tab-content--display .cp-modal-detail-subtab:hover {
  color: #138B4C;
}

.cp-modal-tab-content--display .cp-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cp-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.cp-modal-tab-content.cp-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.cp-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-detail-delivery-wrapper .cp-modal-form-label {
  flex-shrink: 0;
}

.cp-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.cp-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.cp-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cp-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cp-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cp-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cp-modal-detail-table-container .cp-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cp-modal-detail-table-container .cp-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cp-modal-detail-table-container .cp-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-detail-table-container .cp-modal-detail-table th:not(.detail-table-frozen-item):not(.detail-table-frozen-product) {
  position: relative;
}

/* Column resize handle for detail tables */
.cp-modal-detail-table .cp-modal-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3125rem;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 20;
}

.cp-modal-detail-table .cp-modal-column-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.cp-modal-detail-table .cp-modal-column-resize-handle:hover::after {
  background-color: #408952;
}

.cp-modal-detail-table .cp-modal-column-resize-handle--active::after {
  background-color: #408952;
}

/* Sortable table header hover effect */
.cp-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.cp-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cp-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.cp-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.cp-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cp-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.cp-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-detail-table th,
.cp-modal-tab-content--display .cp-modal-packaging-table th,
.cp-modal-tab-content--display .cp-modal-partner-table th,
.cp-modal-tab-content--display .cp-modal-attachment-table th {
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-detail-table td,
.cp-modal-tab-content--display .cp-modal-packaging-table td,
.cp-modal-tab-content--display .cp-modal-partner-table td,
.cp-modal-tab-content--display .cp-modal-attachment-table td {
  color: #333333;
}

/* Campaign Item Table Display Mode - Grey background for all columns including Delete */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Campaign Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Campaign Item Table Display Mode - Override specific column hover transitions */
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-description,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-text,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-batch,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-serial,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-so-item,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-package-no,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-product-type,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-product-group,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-product-category,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cp-modal-tab-content--display .cp-modal-detail-table tbody tr:hover .cp-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Campaign Item Table Display Mode - Orange hover effect */
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Campaign Item Table Display Mode - Override specific column hover transitions */
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-description,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-text,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-batch,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-serial,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-so-item,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-package-no,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-type,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-group,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-category,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .cp-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.cp-modal-detail-table-container .cp-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.cp-modal-detail-table-container .cp-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.cp-modal-detail-table-container--external .cp-modal-detail-table td {
  color: #555555 !important;
}

.cp-modal-detail-table-container .cp-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.cp-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.cp-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cp-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.cp-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.cp-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.cp-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.cp-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.cp-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.cp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cp-modal-detail-table tbody tr:hover .detail-table-description,
.cp-modal-detail-table tbody tr:hover .detail-table-text,
.cp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cp-modal-detail-table tbody tr:hover .detail-table-batch,
.cp-modal-detail-table tbody tr:hover .detail-table-serial,
.cp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cp-modal-detail-table tbody tr:hover .detail-table-so-item,
.cp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cp-modal-detail-table tbody tr:hover .detail-table-package-no,
.cp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cp-modal-detail-table tbody tr:hover .detail-table-product-type,
.cp-modal-detail-table tbody tr:hover .detail-table-product-group,
.cp-modal-detail-table tbody tr:hover .detail-table-product-category,
.cp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cp-modal-detail-table tbody tr:hover .cp-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-description,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-text,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-batch,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-serial,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-so-item,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-package-no,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-type,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-group,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-category,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .cp-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.cp-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cp-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.cp-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.cp-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.cp-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.cp-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cp-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.cp-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cp-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.cp-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.cp-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.cp-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.cp-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.cp-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.cp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.cp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.cp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.cp-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cp-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.cp-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.cp-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.cp-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cp-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.cp-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cp-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.cp-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cp-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cp-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cp-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cp-modal-add-item-btn--disabled .cp-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cp-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.cp-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.cp-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.cp-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cp-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cp-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.cp-modal-sales-order-table-container .cp-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.cp-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cp-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cp-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.cp-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.cp-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.cp-modal-table-input:focus {
  outline: none;
}

.cp-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.cp-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.cp-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cp-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.cp-modal-tags-container {
  position: relative;
  width: 100%;
}

.cp-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cp-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cp-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.cp-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.cp-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.cp-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.cp-modal-tags-input--display .cp-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.cp-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.cp-modal-tag-remove:hover {
  color: #333333;
}

.cp-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.cp-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cp-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.cp-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.cp-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.cp-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.cp-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.cp-modal-status-container {
  position: relative;
  width: 100%;
}

.cp-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cp-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cp-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.cp-modal-status-placeholder {
  color: #999999;
}

.cp-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.cp-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cp-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cp-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-status-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-status-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.cp-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.cp-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.cp-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.cp-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.cp-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.cp-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.cp-modal-status-input--display .cp-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.cp-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.cp-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cp-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cp-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.cp-modal-stage-dropdown-placeholder {
  color: #999999;
}

.cp-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.cp-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cp-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cp-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.cp-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.cp-modal-stage--created .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.cp-modal-stage--approved .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.cp-modal-stage--processed .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.cp-modal-stage--picked .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.cp-modal-stage--packed .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.cp-modal-stage--planned .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.cp-modal-stage--loaded .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.cp-modal-stage--issued .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.cp-modal-stage--departed .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.cp-modal-stage--arrived .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.cp-modal-stage--unloaded .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.cp-modal-stage--delivered .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.cp-modal-stage--confirmed .cp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.cp-modal-stage--billed .cp-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.cp-modal-stage-dropdown-input .cp-modal-stage,
.cp-modal-stage-dropdown-item .cp-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.cp-modal-baseline-date-dropdown {
  position: relative;
}

.cp-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cp-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.cp-modal-reference-type-dropdown {
  position: relative;
}

.cp-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cp-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.cp-modal-delivery-priority-dropdown {
  position: relative;
}

.cp-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cp-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.cp-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.cp-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.cp-modal-delivery-priority-separator {
  color: #666666;
}

.cp-modal-delivery-priority-name {
  color: #333333;
}

.cp-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.cp-modal-organization-dropdown {
  position: relative;
}

.cp-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cp-modal-organization-dropdown-content--display .cp-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-organization-dropdown-content--display .cp-modal-organization-item:hover {
  background-color: transparent !important;
}

.cp-modal-organization-dropdown-content--display .cp-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-organization-dropdown-content--display .cp-modal-organization-code,
.cp-modal-organization-dropdown-content--display .cp-modal-organization-name,
.cp-modal-organization-dropdown-content--display .cp-modal-organization-separator {
  color: #999999 !important;
}

.cp-modal-organization-dropdown-content--display .cp-modal-organization-check {
  color: #999999 !important;
}

.cp-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-organization-separator {
  color: #999999;
}

.cp-modal-organization-name {
  color: #333333;
}

.cp-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.cp-modal-sales-structure-dropdown {
  position: relative;
}

.cp-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.cp-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cp-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-sales-structure-separator {
  color: #999999;
}

.cp-modal-sales-structure-name {
  color: #333333;
}

.cp-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Campaign Type Dropdown Styles */
.cp-modal-delivery-type-dropdown {
  position: relative;
}

.cp-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.cp-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cp-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cp-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cp-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cp-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.cp-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.cp-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-delivery-type-separator {
  color: #999999;
}

.cp-modal-delivery-type-description {
  color: #333333;
}

.cp-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.cp-modal-content::-webkit-scrollbar,
.cp-modal-stage-content::-webkit-scrollbar,


.cp-modal-content::-webkit-scrollbar-track,
.cp-modal-stage-content::-webkit-scrollbar-track,


.cp-modal-content::-webkit-scrollbar-thumb,
.cp-modal-stage-content::-webkit-scrollbar-thumb,


.cp-modal-content::-webkit-scrollbar-thumb:hover,
.cp-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.cp-modal-sales-channel-dropdown {
  position: relative;
}

.cp-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cp-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-sales-channel-separator {
  color: #999999;
}

.cp-modal-sales-channel-name {
  color: #333333;
}

.cp-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.cp-modal-sales-unit-dropdown {
  position: relative;
}

.cp-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cp-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-sales-unit-separator {
  color: #999999;
}

.cp-modal-sales-unit-name {
  color: #333333;
}

.cp-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.cp-modal-organization-item--placeholder,
.cp-modal-sales-structure-item--placeholder,
.cp-modal-sales-channel-item--placeholder,
.cp-modal-sales-unit-item--placeholder,
.cp-modal-territory-item--placeholder,
.cp-modal-sales-office-item--placeholder,
.cp-modal-sold-to-party-item--placeholder,
.cp-modal-deliver-to-party-item--placeholder,
.cp-modal-attention-to-deliver-item--placeholder,
.cp-modal-incoterm-item--placeholder,
.cp-modal-delivery-point-item--placeholder,
.cp-modal-shipping-point-item--placeholder,
.cp-modal-sales-order-item--placeholder,
.cp-modal-sales-team-item--placeholder,
.cp-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.cp-modal-organization-item--placeholder:hover,
.cp-modal-sales-structure-item--placeholder:hover,
.cp-modal-sales-channel-item--placeholder:hover,
.cp-modal-sales-unit-item--placeholder:hover,
.cp-modal-territory-item--placeholder:hover,
.cp-modal-sales-office-item--placeholder:hover,
.cp-modal-sold-to-party-item--placeholder:hover,
.cp-modal-deliver-to-party-item--placeholder:hover,
.cp-modal-attention-to-deliver-item--placeholder:hover,
.cp-modal-incoterm-item--placeholder:hover,
.cp-modal-delivery-point-item--placeholder:hover,
.cp-modal-shipping-point-item--placeholder:hover,
.cp-modal-sales-order-item--placeholder:hover,
.cp-modal-sales-team-item--placeholder:hover,
.cp-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.cp-modal-sold-to-party-dropdown {
  position: relative;
}

.cp-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-sold-to-party-input:focus,
.cp-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.cp-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cp-modal-sold-to-party-separator {
  color: #999999;
}

.cp-modal-sold-to-party-name {
  color: #333333;
}

.cp-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.cp-modal-deliver-to-party-dropdown {
  position: relative;
}

.cp-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cp-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cp-modal-deliver-to-party-separator {
  color: #999999;
}

.cp-modal-deliver-to-party-name {
  color: #333333;
}

.cp-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.cp-modal-attention-to-deliver-dropdown {
  position: relative;
}
.cp-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.cp-modal-attention-to-deliver-separator {
  color: #999999;
}
.cp-modal-attention-to-deliver-name {
  color: #333333;
}
.cp-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.cp-modal-incoterm-dropdown {
  position: relative;
}
.cp-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.cp-modal-incoterm-separator {
  color: #999999;
}
.cp-modal-incoterm-name {
  color: #333333;
}
.cp-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.cp-modal-delivery-point-dropdown {
  position: relative;
}
.cp-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cp-modal-delivery-point-separator {
  color: #999999;
}
.cp-modal-delivery-point-name {
  color: #333333;
}
.cp-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.cp-modal-shipping-point-dropdown {
  position: relative;
}
.cp-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cp-modal-shipping-point-separator {
  color: #999999;
}
.cp-modal-shipping-point-name {
  color: #333333;
}
.cp-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.cp-modal-sales-order-dropdown {
  position: relative;
}
.cp-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.cp-modal-sales-order-separator {
  color: #999999;
}
.cp-modal-sales-order-name {
  color: #333333;
}
.cp-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.cp-modal-date-picker {
  position: relative;
}
.cp-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.cp-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.cp-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.cp-modal-date-input::-webkit-datetime-edit-text,
.cp-modal-date-input::-webkit-datetime-edit-month-field,
.cp-modal-date-input::-webkit-datetime-edit-day-field,
.cp-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.cp-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.cp-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.cp-modal-sales-person-dropdown {
  position: relative;
}
.cp-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.cp-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.cp-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.cp-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cp-modal-sales-person-separator {
  color: #999999;
}
.cp-modal-sales-person-name {
  color: #333333;
}
.cp-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.cp-modal-sales-team-dropdown {
  position: relative;
}
.cp-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cp-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cp-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cp-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cp-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cp-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.cp-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.cp-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.cp-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cp-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.cp-modal-sales-team-separator {
  color: #999999;
}
.cp-modal-sales-team-name {
  color: #333333;
}
.cp-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cp-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.cp-modal-territory-dropdown {
  position: relative;
}

.cp-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cp-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-territory-separator {
  color: #999999;
}

.cp-modal-territory-name {
  color: #333333;
}

.cp-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.cp-modal-sales-office-dropdown {
  position: relative;
}

.cp-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cp-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cp-modal-sales-office-separator {
  color: #999999;
}

.cp-modal-sales-office-name {
  color: #333333;
}

.cp-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.cp-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cp-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.cp-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.cp-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cp-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cp-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cp-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-table-dropdown-input:focus {
  outline: none;
}

.cp-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cp-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cp-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.cp-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.cp-modal-delivery-type-list::-webkit-scrollbar,
.cp-modal-stage-dropdown-list::-webkit-scrollbar,
.cp-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cp-modal-delivery-type-list::-webkit-scrollbar-track,
.cp-modal-stage-dropdown-list::-webkit-scrollbar-track,
.cp-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-delivery-type-list::-webkit-scrollbar-thumb,
.cp-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.cp-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cp-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.cp-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.cp-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.cp-modal-wrapper,
.cp-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.campaign-modal,
.cp-modal-wrapper,
.cp-modal-wrapper *,
.cp-modal-content,
.cp-modal-data-flow-2-container,
.cp-modal-data-flow-container,
.cp-modal-calendar-container,
.cp-modal-calendar-milestones-list,
.cp-modal-calendar-view,
.cp-modal-calendar-yearly,
.cp-modal-calendar-monthly,
.cp-modal-calendar-weekly,
.cp-modal-calendar-weekly-body,
.cp-modal-calendar-daily,
.cp-modal-calendar-daily-timeline,
.cp-modal-calendar-grid,
.cp-modal-calendar-grid-body,
.cp-modal-detail-table-container,
.cp-modal-item-table-wrapper,
.cp-modal-attachment-table-container,
.cp-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.cp-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cp-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cp-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.cp-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.cp-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.cp-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.cp-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.cp-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.cp-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-tab-content--display .cp-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.cp-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-tab-content--display .cp-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cp-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cp-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.cp-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) {
  font-weight: 600;
}

.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) .cp-modal-packaging-input,
.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) .cp-modal-packaging-input--display,
.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) .cp-modal-handling-product-input,
.cp-modal-packaging-row--unassigned:not(.cp-modal-packaging-row--expanded) .cp-modal-handling-product-input--display {
  font-weight: 600;
}

.cp-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.cp-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row td.cp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row td.cp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row td.cp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td.cp-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded td.cp-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row--expanded:hover td.cp-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display,
.cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display,
.cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.cp-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.cp-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-tab-content--display .cp-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.cp-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-tab-content--display .cp-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cp-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.cp-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.cp-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.cp-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.cp-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.cp-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.cp-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.cp-modal-packaging-detail-table th:first-child,
.cp-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.cp-modal-packaging-detail-table th:nth-child(2),
.cp-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.cp-modal-packaging-detail-table th:nth-child(3),
.cp-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.cp-modal-packaging-detail-table td:nth-child(4),
.cp-modal-packaging-detail-table td:nth-child(6),
.cp-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.cp-modal-packaging-detail-table td:nth-child(5),
.cp-modal-packaging-detail-table td:nth-child(7),
.cp-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.cp-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.cp-modal-tab-content--display .cp-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display .cp-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.cp-modal-tab-content--display .cp-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.cp-modal-tab-content--display .cp-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.cp-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.cp-modal-packaging-table td:last-child,
.cp-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.cp-modal-packaging-table td:last-child .cp-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.cp-modal-detail-table-container--external .cp-modal-packaging-table th:last-child,
.cp-modal-detail-table-container--external .cp-modal-packaging-table td.cp-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.cp-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.cp-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cp-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cp-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.cp-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.cp-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.cp-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.cp-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.cp-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cp-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.cp-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.cp-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.cp-modal-packaging-child-table tr {
  border: none !important;
}

.cp-modal-packaging-child-table thead,
.cp-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.cp-modal-packaging-child-table th:first-child,
.cp-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.cp-modal-packaging-child-table th:nth-child(2),
.cp-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.cp-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.cp-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.cp-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.cp-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.cp-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.cp-modal-packaging-child-table th:nth-child(3),
.cp-modal-packaging-child-table td:nth-child(3),
.cp-modal-packaging-child-table th:nth-child(4),
.cp-modal-packaging-child-table td:nth-child(4),
.cp-modal-packaging-child-table th:nth-child(5),
.cp-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.cp-modal-packaging-child-table th:nth-child(6),
.cp-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.cp-modal-packaging-child-table th:nth-child(7),
.cp-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.cp-modal-detail-table-container--external .cp-modal-packaging-child-table th:last-child,
.cp-modal-detail-table-container--external .cp-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.cp-modal-packaging-child-table td:last-child .cp-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.cp-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.cp-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cp-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.cp-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.cp-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row {
  transition: none !important;
}

.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display,
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display:focus,
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display,
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display:focus,
.cp-modal-tab-content--display .cp-modal-detail-table-container .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display:focus,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display:focus,
.cp-modal-tab-content--display .cp-modal-detail-table-container--external .cp-modal-packaging-table tbody tr.cp-modal-packaging-row:hover td .cp-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.cp-modal-detail-table-container--external .cp-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.cp-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cp-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cp-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.cp-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cp-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.cp-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.cp-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.cp-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.cp-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.cp-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.cp-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.cp-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.cp-modal-detail-table-container--external .cp-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.cp-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-item--display {
  color: #999999 !important;
}

.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-code,
.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-name,
.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-separator {
  color: #999999 !important;
}

.cp-modal-handling-product-dropdown-content--display .cp-modal-handling-product-check {
  color: #999999 !important;
}

.cp-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.cp-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.cp-modal-handling-product-dropdown-content--narrow .cp-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.cp-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.cp-modal-packaging-detail-table .cp-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.cp-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.cp-modal-detail-table-container--dropdown-open .cp-modal-detail-table {
  overflow: visible;
}

.cp-modal-detail-table-container--dropdown-open .cp-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.cp-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cp-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cp-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.cp-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.cp-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.cp-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.cp-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.cp-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.cp-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.cp-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cp-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.cp-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.cp-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.cp-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.cp-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.cp-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.cp-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.cp-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cp-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.cp-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.cp-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-item:hover {
  background-color: transparent;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-item--placeholder {
  display: none;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-code,
.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-name,
.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-separator {
  color: #555555;
}

.cp-modal-handling-product-dropdown-content--view-only .cp-modal-handling-product-check {
  color: #888888;
}

.cp-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.cp-modal-handling-product-separator {
  color: #999999;
}

.cp-modal-handling-product-name {
  color: #333333;
}

.cp-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cp-modal-handling-product-item--placeholder {
  cursor: default;
}

.cp-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.cp-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Campaign Item table - match Package Description style */
.cp-modal-detail-table td:has(.cp-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.cp-modal-detail-table td .cp-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.cp-modal-detail-table td .cp-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.cp-modal-detail-table td .cp-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.cp-modal-detail-table td .cp-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.cp-modal-detail-table td .cp-modal-handling-product-input--display,
.cp-modal-detail-table td .cp-modal-handling-product-input--display:focus,
.cp-modal-detail-table td .cp-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display,
.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display:focus,
.cp-modal-detail-table-container .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display:focus,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover td .cp-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.cp-modal-detail-table td .cp-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.cp-modal-detail-table td .cp-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.cp-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cp-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cp-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.cp-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-table-text-icon-btn--filled:not(.cp-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.cp-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.cp-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cp-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.cp-modal-table-text-icon-btn--display.cp-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.cp-modal-table-text-icon-btn--display.cp-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-table-text-icon-btn--display.cp-modal-table-text-icon-btn--external.cp-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.cp-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.cp-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.cp-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cp-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.cp-modal-serial-assignment-btn {
  width: 10.625rem;
}

.cp-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.cp-modal-batch-assignment-btn--filled .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.cp-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.cp-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.cp-modal-batch-assignment-btn--display .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-batch-assignment-btn--display.cp-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cp-modal-batch-assignment-btn--display.cp-modal-batch-assignment-btn--filled .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.cp-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.cp-modal-secured-qty-btn.cp-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.cp-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.cp-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.cp-modal-secured-qty-btn--grey .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.cp-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cp-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.cp-modal-batch-assignment-btn--partial .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.cp-modal-batch-assignment-btn--display.cp-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cp-modal-batch-assignment-btn--display.cp-modal-batch-assignment-btn--partial .cp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.cp-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.cp-modal-secured-qty-modal .cp-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.cp-modal-secured-qty-modal .cp-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cp-modal-secured-qty-modal.cp-modal-batch-assignment-modal--display .cp-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.cp-modal-secured-qty-modal .cp-modal-item-text-content {
  overflow-x: hidden;
}

.cp-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.cp-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.cp-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cp-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.cp-modal-batch-assignment-modal--display .cp-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cp-modal-batch-assignment-modal--display .cp-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.cp-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.cp-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.cp-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.cp-modal-secured-qty-lock-btn--open .cp-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.cp-modal-secured-qty-lock-btn--locked .cp-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.cp-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.cp-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.cp-modal-batch-assignment-modal .cp-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.cp-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.cp-modal-batch-assignment-modal .cp-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.cp-modal-batch-assignment-modal .cp-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.cp-modal-batch-assignment-modal.cp-modal-batch-assignment-modal--display .cp-modal-item-text-info {
  background-color: #F2F8EA;
}

.cp-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cp-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.cp-modal-batch-assignment-info-group {
  flex: 1 1;
}

.cp-modal-batch-assignment-info-group .cp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cp-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.cp-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cp-modal-batch-assignment-table-section .cp-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cp-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.cp-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cp-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cp-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cp-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.cp-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.cp-modal-batch-assignment-table th,
.cp-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.cp-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.cp-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.cp-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cp-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cp-modal-batch-assignment-table tbody td:has(.cp-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.cp-modal-batch-assignment-table tbody td:has(.cp-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.cp-modal-batch-assignment-table tbody td:nth-child(2),
.cp-modal-batch-assignment-table tbody td:nth-child(3),
.cp-modal-batch-assignment-table tbody td:nth-child(4),
.cp-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.cp-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.cp-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cp-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cp-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.cp-modal-batch-assignment-modal--display .cp-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.cp-modal-batch-assignment-modal--display .cp-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cp-modal-batch-assignment-modal--display .cp-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-batch-assignment-modal--display .cp-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.cp-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.cp-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.cp-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.cp-modal-batch-assignment-table .cp-modal-placeholder-text {
  color: #CCCCCC;
}

.cp-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cp-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.cp-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cp-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.cp-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.cp-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.cp-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.cp-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.cp-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cp-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.cp-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.cp-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.cp-modal-batch-assignment-table td.batch-table-frozen-batch,
table.cp-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.cp-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cp-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.cp-modal-batch-assignment-table th.batch-table-frozen-assign,
table.cp-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.cp-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.cp-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.cp-modal-item-text-info {
  margin-bottom: 1rem;
}

.cp-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cp-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.cp-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cp-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.cp-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.cp-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.cp-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.cp-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-item-text-modal .modal-header .modal-title,
.cp-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.cp-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.cp-modal-item-text-label--display {
  color: #333333;
}

.cp-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.cp-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.cp-modal-item-text-modal .cp-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.cp-modal-item-text-modal .cp-modal-item-text-textarea-wrapper .cp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.cp-modal-item-text-textarea {
  overflow-y: auto !important;
}

.cp-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.cp-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cp-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Campaign Item Modal */
.cp-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.cp-modal-add-do-item-modal .cp-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.cp-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cp-modal-add-do-item-dropdown-section .cp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cp-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cp-modal-add-do-item-table-section .cp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cp-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.cp-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.cp-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cp-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cp-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.cp-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cp-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.cp-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.cp-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.cp-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.cp-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.cp-modal-detail-table td:first-child .cp-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.cp-modal-detail-table td:first-child .cp-modal-partner-type-input {
  padding-left: 0.625rem;
}

.cp-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cp-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cp-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cp-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cp-modal-partner-type-dropdown--display .cp-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cp-modal-partner-type-dropdown-content--display .cp-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-partner-type-dropdown-content--display .cp-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.cp-modal-partner-type-dropdown-content--display .cp-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-partner-type-dropdown-content--display .cp-modal-partner-type-check {
  color: #999999 !important;
}

.cp-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cp-modal-partner-type-dropdown--display .cp-modal-partner-type-value {
  color: #555555;
}

.cp-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cp-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.cp-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.cp-modal-partner-type-item--placeholder {
  cursor: default;
}

.cp-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.cp-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cp-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.cp-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.cp-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cp-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cp-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cp-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cp-modal-partner-id-dropdown--display .cp-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-code,
.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-name,
.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-separator {
  color: #999999 !important;
}

.cp-modal-partner-id-dropdown-content--display .cp-modal-partner-id-check {
  color: #999999 !important;
}

.cp-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cp-modal-partner-id-dropdown--display .cp-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.cp-modal-detail-table tbody tr:hover .cp-modal-partner-type-dropdown--display .cp-modal-partner-type-input-wrapper,
.cp-modal-detail-table tbody tr:hover .cp-modal-partner-id-dropdown--display .cp-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .cp-modal-partner-type-dropdown--display .cp-modal-partner-type-input-wrapper,
.cp-modal-detail-table-container--external .cp-modal-detail-table tbody tr:hover .cp-modal-partner-id-dropdown--display .cp-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.cp-modal-partner-type-arrow--external {
  visibility: hidden;
}

.cp-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.cp-modal-partner-type-dropdown--external .cp-modal-partner-type-value {
  color: #555555;
}

.cp-modal-partner-id-dropdown--external .cp-modal-partner-id-value {
  color: #555555;
}

.cp-modal-detail-table-container--external .cp-modal-detail-table td.cp-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.cp-modal-partner-header-section--external .cp-modal-form-input--display {
  color: #555555;
}

.cp-modal-detail-table td.cp-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.cp-modal-tab-content--display .cp-modal-detail-table td.cp-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.cp-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cp-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cp-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cp-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.cp-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.cp-modal-partner-id-item--placeholder {
  cursor: default;
}

.cp-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.cp-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.cp-modal-partner-id-separator {
  color: #999999;
}

.cp-modal-partner-id-name {
  color: #666666;
}

.cp-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cp-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.cp-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.cp-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cp-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cp-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cp-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cp-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cp-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cp-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.cp-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.cp-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.cp-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.cp-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.cp-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.cp-modal-data-flow-stage--completed .cp-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cp-modal-data-flow-stage--active .cp-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cp-modal-data-flow-stage--completed .cp-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-data-flow-stage--active .cp-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.cp-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.cp-modal-data-flow-stage--completed .cp-modal-data-flow-stage-label {
  color: #138B4C;
}

.cp-modal-data-flow-stage--active .cp-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.cp-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.cp-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.cp-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.cp-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.cp-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.cp-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cp-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.cp-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.cp-modal-data-flow-document--active .cp-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.cp-modal-data-flow-document-fold {
  display: none;
}

.cp-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.cp-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.cp-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.cp-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.cp-modal-data-flow-document-icon-wrapper--active .cp-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.cp-modal-data-flow-document--active .cp-modal-data-flow-document-title {
  color: #138B4C;
}

.cp-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.cp-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.cp-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.cp-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.cp-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.cp-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.cp-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.cp-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.cp-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.cp-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.cp-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.cp-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.cp-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.cp-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.cp-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.cp-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.cp-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.cp-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cp-modal-terms-area-button .cp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.cp-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.cp-modal-tab-content--display .cp-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.cp-modal-tab-content--display .cp-modal-terms-area-button .cp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.cp-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cp-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cp-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cp-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cp-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cp-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cp-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.cp-modal-data-flow-2-row {
  display: flex;
}

.cp-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cp-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.cp-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.cp-modal-data-flow-2-row--content .cp-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.cp-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.cp-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.cp-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cp-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-label {
  color: #333333;
}

.cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage-label {
  color: #999999;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--completed .cp-modal-data-flow-2-stage-label {
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--active .cp-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.cp-modal-tab-content--display .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.cp-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.cp-modal-data-flow-2-row--content .cp-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.cp-modal-data-flow-2-row--content .cp-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cp-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cp-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.cp-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.cp-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.cp-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cp-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.cp-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.cp-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cp-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-title,
.cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-title {
  color: #333333;
}

.cp-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.cp-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cp-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.cp-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-title {
  color: #888888;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-title,
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-title {
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--completed .cp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--active .cp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-date {
  color: #333333;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.cp-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.cp-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.cp-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.cp-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.cp-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.cp-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.cp-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cp-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cp-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cp-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.cp-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.cp-modal-data-flow-2-grid--external .cp-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.cp-modal-data-flow-2-grid--external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell {
  border-bottom: none;
}

.cp-modal-data-flow-2-grid--external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.cp-modal-data-flow-2-grid--external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell--label::after {
  display: none;
}

.cp-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.cp-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.cp-modal-data-flow-2-row--content-top .cp-modal-data-flow-2-document--buyer.cp-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.cp-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.cp-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cp-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cp-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.cp-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.cp-modal-data-flow-2-stage--external-completed .cp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.cp-modal-data-flow-2-stage--external-active .cp-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.cp-modal-data-flow-2-stage--external-completed .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.cp-modal-data-flow-2-stage--external-active .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.cp-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.cp-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cp-modal-data-flow-2-document--external .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.cp-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.cp-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.cp-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cp-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.cp-modal-data-flow-2-document--external .cp-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.cp-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.cp-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cp-modal-data-flow-2-document--supplier .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.cp-modal-data-flow-2-document--supplier .cp-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.cp-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.cp-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.cp-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cp-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier .cp-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier .cp-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-completed .cp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--supplier-active .cp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.cp-modal-tab-content--data-flow-2-external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.cp-modal-tab-content--data-flow-2-external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external .cp-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external .cp-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.cp-modal-tab-content--display.cp-modal-tab-content--data-flow-2-external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.cp-modal-tab-content--display.cp-modal-tab-content--data-flow-2-external .cp-modal-data-flow-2-row--header .cp-modal-data-flow-2-cell:has(.cp-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-circle,
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external-completed .cp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external-active .cp-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-icon,
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external-completed .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external-active .cp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-stage--external .cp-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-completed .cp-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.cp-modal-tab-content--display .cp-modal-data-flow-2-document--external-active .cp-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.cp-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.cp-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.cp-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cp-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.cp-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.cp-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cp-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cp-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cp-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.cp-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.cp-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.cp-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.cp-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.cp-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cp-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.cp-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.cp-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.cp-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.cp-modal-milestone-date-value {
  color: #666666;
}

.cp-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.cp-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.cp-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.cp-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.cp-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.cp-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cp-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.cp-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cp-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.cp-modal-activity-item--display .cp-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.cp-modal-calendar-milestones .cp-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.cp-modal-calendar-milestones .cp-modal-activity-user:hover {
  text-decoration: none;
}

.cp-modal-calendar-milestones .cp-modal-activity-item--display .cp-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.cp-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cp-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cp-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cp-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cp-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-calendar-nav-btn:hover .cp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.cp-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.cp-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.cp-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.cp-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.cp-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.cp-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.cp-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.cp-modal-calendar-view-mode-btn--active + .cp-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.cp-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cp-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.cp-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.cp-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cp-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cp-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.cp-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.cp-modal-calendar-grid-cell:nth-child(7n-1),
.cp-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.cp-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.cp-modal-calendar-grid-day-name:nth-child(6),
.cp-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.cp-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cp-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cp-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.cp-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.cp-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.cp-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.cp-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cp-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.cp-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cp-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.cp-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cp-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.cp-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cp-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.cp-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cp-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.cp-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.cp-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cp-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.cp-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cp-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cp-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.cp-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.cp-modal-calendar-weekly-day-column:nth-child(6),
.cp-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.cp-modal-calendar-weekly-day-header:nth-child(6),
.cp-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.cp-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cp-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cp-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cp-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cp-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cp-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cp-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cp-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.cp-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.cp-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cp-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.cp-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cp-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cp-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.cp-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.cp-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.cp-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cp-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cp-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cp-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cp-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cp-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cp-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cp-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-view {
  border-color: #D0D0D0;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-view-mode-btn--active + .cp-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-milestones-header {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-view-title {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-grid-day-name {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-grid-cell-day {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-weekly-day-name {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-weekly-day-date {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-weekly-event-title {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-daily-header {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-daily-hour-label {
  color: #666666;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-daily-event-title {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar .cp-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.cp-modal-calendar-milestones-header--external {
  color: #333333;
}

.cp-modal-calendar-nav-btn--external .cp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cp-modal-calendar-nav-btn--external:hover .cp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.cp-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.cp-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.cp-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cp-modal-calendar-view-mode-btn--active-external + .cp-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cp-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.cp-modal-tab-content--calendar-external .cp-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.cp-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.cp-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.cp-modal-activity-type--external {
  color: #333333;
}

.cp-modal-activity-user--external {
  color: #E67E22;
}

.cp-modal-activity-user--external:hover {
  color: #D35400;
}

.cp-modal-calendar-milestones .cp-modal-activity-user--external {
  color: #E67E22;
}

.cp-modal-calendar-milestones .cp-modal-activity-user--external:hover {
  color: #D35400;
}

.cp-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.cp-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cp-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cp-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cp-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.cp-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cp-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cp-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cp-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.cp-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cp-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cp-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cp-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-milestones-header--external {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-view-mode-btn--active-external + .cp-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-calendar-nav-btn--external .cp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-activity-type--external {
  color: #333333;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-activity-user--external {
  color: #E67E22;
}

.cp-modal-tab-content--display.cp-modal-tab-content--calendar-external .cp-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.cp-modal-input--error,
.cp-modal-form-input.cp-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.cp-modal-dropdown--error .cp-modal-delivery-type-input,
.cp-modal-dropdown--error .cp-modal-organization-input,
.cp-modal-dropdown--error .cp-modal-sales-structure-input,
.cp-modal-dropdown--error .cp-modal-sales-channel-input,
.cp-modal-dropdown--error .cp-modal-sales-unit-input,
.cp-modal-dropdown--error .cp-modal-territory-input,
.cp-modal-dropdown--error .cp-modal-sales-office-input,
.cp-modal-dropdown--error .cp-modal-sold-to-party-input,
.cp-modal-dropdown--error .cp-modal-deliver-to-party-input,
.cp-modal-dropdown--error .cp-modal-attention-to-deliver-input,
.cp-modal-dropdown--error .cp-modal-incoterm-input,
.cp-modal-dropdown--error .cp-modal-delivery-point-input,
.cp-modal-dropdown--error .cp-modal-shipping-point-input,
.cp-modal-dropdown--error .cp-modal-sales-order-input,
.cp-modal-dropdown--error .cp-modal-sales-team-input,
.cp-modal-dropdown--error .cp-modal-sales-person-input,
.cp-modal-dropdown--error .cp-modal-delivery-priority-input,
.cp-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.cp-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.cp-modal-date-picker-wrapper.cp-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.cp-modal-custom-dropdown {
  position: relative;
}

.cp-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cp-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cp-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cp-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-check {
  color: #999999 !important;
}

.cp-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cp-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cp-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.cp-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cp-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cp-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.cp-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.cp-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.cp-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cp-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cp-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cp-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.cp-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cp-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.cp-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cp-modal-setting-form-label--display {
  color: #333333;
}

.cp-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cp-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-setting-dropdown--active .cp-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.cp-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.cp-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.cp-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cp-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.cp-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.cp-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.cp-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-setting-dropdown-icon.cp-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cp-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.cp-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.cp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.cp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.cp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.cp-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.cp-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cp-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cp-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cp-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.cp-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.cp-modal-setting-dropdown-item-separator {
  color: #999999;
}

.cp-modal-setting-dropdown-item-name {
  color: #333333;
}

.cp-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cp-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.cp-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cp-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cp-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cp-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.cp-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.cp-modal-setting-tab-content--print .cp-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.cp-modal-setting-tab-content--print .cp-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cp-modal-setting-tab-content--print .cp-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.cp-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.cp-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.cp-modal-setting-table thead tr {
  height: 2.25rem;
}

.cp-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.cp-modal-setting-table tbody tr {
  height: 2.25rem;
}

.cp-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.cp-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.cp-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.cp-modal-setting-table--display thead th:nth-child(2),
.cp-modal-setting-table--display thead th:nth-child(3),
.cp-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.cp-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.cp-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.cp-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.cp-modal-setting-table--transfer.cp-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.cp-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.cp-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cp-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.cp-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.cp-modal-setting-table--transfer:not(.cp-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.cp-modal-setting-table--transfer:not(.cp-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.cp-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.cp-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.cp-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.cp-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.cp-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cp-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cp-modal-tab-content--display .cp-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.cp-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.cp-modal-tab-content--display .cp-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.cp-modal-attribute-header-section--external .cp-modal-form-input:focus {
  border-color: #F5B041;
}

.cp-modal-attribute-header-section--external .cp-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.cp-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.cp-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.cp-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.cp-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.cp-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cp-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cp-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.cp-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.cp-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.cp-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cp-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cp-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.cp-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.cp-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cp-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cp-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.cp-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.cp-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.cp-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.cp-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.cp-modal-available-qty-tree-level {
  position: relative;
}

.cp-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.cp-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cp-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cp-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.cp-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.cp-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.cp-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.cp-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.cp-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.cp-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.cp-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.cp-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.cp-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cp-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.cp-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.cp-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.cp-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.cp-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.cp-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.cp-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.cp-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.cp-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.cp-modal-available-qty-tree-batch-header .cp-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.cp-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.cp-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.cp-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cp-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.cp-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.cp-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cp-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cp-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.cp-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cp-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cp-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cp-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.cp-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cp-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cp-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cp-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cp-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.cp-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.cp-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.cp-modal-activity-type--clickable.cp-modal-activity-type--display:hover {
  color: #138B4C;
}

.cp-modal-activity-type--clickable.cp-modal-activity-type--external:hover {
  color: #E67E00;
}

.cp-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cp-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.cp-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cp-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.cp-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cp-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.cp-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to cp-modal-form-label */
.cp-modal-activity-detail-content .cp-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.cp-modal-activity-detail-modal .cp-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.cp-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.cp-modal-activity-detail-modal .cp-modal-tabs--display .cp-modal-tab {
  color: #333333;
}

.cp-modal-activity-detail-modal .cp-modal-tabs--display .cp-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.cp-modal-activity-detail-modal .cp-modal-tabs--external.cp-modal-tabs--display .cp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.cp-modal-activity-detail-tab-content--general .cp-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.cp-modal-activity-detail-content .cp-modal-milestone-status {
  margin: 0;
}

.cp-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.cp-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.cp-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cp-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.cp-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.cp-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.cp-modal-activity-detail-pic-chat-wrapper:hover .cp-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.cp-modal-activity-detail-pic-chat-wrapper:hover .cp-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.cp-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.cp-modal-activity-detail-pic--clickable:hover .cp-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.cp-modal-activity-detail-content--external .cp-modal-activity-detail-pic {
  color: #E67E22;
}

.cp-modal-activity-detail-content--external .cp-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.cp-modal-activity-detail-content--external .cp-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.cp-modal-activity-detail-content--external .cp-modal-activity-detail-pic--clickable:hover .cp-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.cp-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.cp-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cp-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cp-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.cp-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.cp-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.cp-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cp-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.cp-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cp-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.cp-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cp-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cp-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.cp-modal-activity-detail-content--external .cp-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.cp-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.cp-modal-activity-detail-content--external .cp-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cp-modal-activity-detail-content--external .cp-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cp-modal-activity-detail-content--external .cp-modal-activity-detail-document-name {
  color: #E67E22;
}

.cp-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.cp-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.cp-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.cp-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.cp-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.cp-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.cp-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.cp-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.cp-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.cp-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.cp-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.cp-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cp-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.cp-modal-activity-detail-tab-content--general {
  padding: 0;
}

.cp-modal-activity-detail-tab-content--general .cp-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.cp-modal-activity-detail-tab-content--general > div:not(.cp-modal-item-text-info) {
  padding: 0 1.5rem;
}

.cp-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.cp-modal-activity-detail-tab-content--attachment,
.cp-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.cp-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.cp-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.cp-modal-activity-detail-tab-content--attachment .cp-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.cp-modal-activity-detail-tab-content--attachment .cp-modal-batch-assignment-table-section > .cp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cp-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.cp-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.cp-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cp-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.cp-modal-activity-detail-content--external .cp-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.cp-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.cp-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.cp-modal-activity-detail-content--external .cp-modal-item-text-info {
  background-color: #FEF5E7;
}

.cp-modal-activity-detail-content--external .cp-modal-task-notes-section {
  background-color: #FEF5E7;
}

.cp-modal-task-notes-section .cp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cp-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.cp-modal-task-notes-textarea.cp-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.cp-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.cp-modal-task-chat-section > .cp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cp-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.cp-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cp-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cp-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cp-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cp-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.cp-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.cp-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.cp-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cp-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.cp-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cp-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.cp-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.cp-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.cp-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.cp-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.cp-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cp-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cp-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.cp-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.cp-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.cp-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cp-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.cp-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.cp-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cp-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.cp-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.cp-modal-activity-detail-content--external .cp-modal-task-chat-avatar {
  background-color: #F5B041;
}

.cp-modal-activity-detail-content--external .cp-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.cp-modal-activity-detail-content--external .cp-modal-task-chat-reply-btn {
  color: #E67E22;
}

.cp-modal-activity-detail-content--external .cp-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.cp-modal-dropdown--display .cp-modal-dropdown-item,
.cp-modal-dropdown--display [class*="-item"],
.cp-modal-tags-dropdown--display .cp-modal-tags-dropdown-item,
.cp-modal-baseline-date-dropdown--display .cp-modal-baseline-date-item,
.cp-modal-reference-type-dropdown--display .cp-modal-reference-type-item,
.cp-modal-delivery-priority-dropdown--display .cp-modal-delivery-priority-item,
.cp-modal-organization-dropdown--display .cp-modal-organization-item,
.cp-modal-sales-structure-dropdown--display .cp-modal-sales-structure-item,
.cp-modal-delivery-type-dropdown--display .cp-modal-delivery-type-item,
.cp-modal-sales-channel-dropdown--display .cp-modal-sales-channel-item,
.cp-modal-sales-unit-dropdown--display .cp-modal-sales-unit-item,
.cp-modal-sold-to-party-dropdown--display .cp-modal-sold-to-party-item,
.cp-modal-deliver-to-party-dropdown--display .cp-modal-deliver-to-party-item,
.cp-modal-attention-to-deliver-dropdown--display .cp-modal-attention-to-deliver-item,
.cp-modal-incoterm-dropdown--display .cp-modal-incoterm-item,
.cp-modal-delivery-point-dropdown--display .cp-modal-delivery-point-item,
.cp-modal-shipping-point-dropdown--display .cp-modal-shipping-point-item,
.cp-modal-sales-order-dropdown--display .cp-modal-sales-order-item,
.cp-modal-sales-person-dropdown--display .cp-modal-sales-person-item,
.cp-modal-sales-team-dropdown--display .cp-modal-sales-team-item,
.cp-modal-territory-dropdown--display .cp-modal-territory-item,
.cp-modal-sales-office-dropdown--display .cp-modal-sales-office-item,
.cp-modal-status-dropdown--display .cp-modal-status-item,
.cp-modal-handling-product-dropdown--display .cp-modal-handling-product-item,
.cp-modal-child-uom-dropdown--display .cp-modal-child-uom-item,
.cp-modal-partner-type-dropdown--display .cp-modal-partner-type-item,
.cp-modal-partner-id-dropdown--display .cp-modal-partner-id-item,
.cp-modal-custom-dropdown--display .cp-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.cp-modal-dropdown--display .cp-modal-dropdown-item:hover,
.cp-modal-dropdown--display [class*="-item"]:hover,
.cp-modal-tags-dropdown--display .cp-modal-tags-dropdown-item:hover,
.cp-modal-baseline-date-dropdown--display .cp-modal-baseline-date-item:hover,
.cp-modal-reference-type-dropdown--display .cp-modal-reference-type-item:hover,
.cp-modal-delivery-priority-dropdown--display .cp-modal-delivery-priority-item:hover,
.cp-modal-organization-dropdown--display .cp-modal-organization-item:hover,
.cp-modal-sales-structure-dropdown--display .cp-modal-sales-structure-item:hover,
.cp-modal-delivery-type-dropdown--display .cp-modal-delivery-type-item:hover,
.cp-modal-sales-channel-dropdown--display .cp-modal-sales-channel-item:hover,
.cp-modal-sales-unit-dropdown--display .cp-modal-sales-unit-item:hover,
.cp-modal-sold-to-party-dropdown--display .cp-modal-sold-to-party-item:hover,
.cp-modal-deliver-to-party-dropdown--display .cp-modal-deliver-to-party-item:hover,
.cp-modal-attention-to-deliver-dropdown--display .cp-modal-attention-to-deliver-item:hover,
.cp-modal-incoterm-dropdown--display .cp-modal-incoterm-item:hover,
.cp-modal-delivery-point-dropdown--display .cp-modal-delivery-point-item:hover,
.cp-modal-shipping-point-dropdown--display .cp-modal-shipping-point-item:hover,
.cp-modal-sales-order-dropdown--display .cp-modal-sales-order-item:hover,
.cp-modal-sales-person-dropdown--display .cp-modal-sales-person-item:hover,
.cp-modal-sales-team-dropdown--display .cp-modal-sales-team-item:hover,
.cp-modal-territory-dropdown--display .cp-modal-territory-item:hover,
.cp-modal-sales-office-dropdown--display .cp-modal-sales-office-item:hover,
.cp-modal-status-dropdown--display .cp-modal-status-item:hover,
.cp-modal-handling-product-dropdown--display .cp-modal-handling-product-item:hover,
.cp-modal-child-uom-dropdown--display .cp-modal-child-uom-item:hover,
.cp-modal-partner-type-dropdown--display .cp-modal-partner-type-item:hover,
.cp-modal-partner-id-dropdown--display .cp-modal-partner-id-item:hover,
.cp-modal-custom-dropdown--display .cp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.cp-modal-dropdown--display [class*="-item--selected"],
.cp-modal-tags-dropdown--display .cp-modal-tags-dropdown-item--selected,
.cp-modal-baseline-date-dropdown--display .cp-modal-baseline-date-item--selected,
.cp-modal-reference-type-dropdown--display .cp-modal-reference-type-item--selected,
.cp-modal-delivery-priority-dropdown--display .cp-modal-delivery-priority-item--selected,
.cp-modal-organization-dropdown--display .cp-modal-organization-item--selected,
.cp-modal-sales-structure-dropdown--display .cp-modal-sales-structure-item--selected,
.cp-modal-delivery-type-dropdown--display .cp-modal-delivery-type-item--selected,
.cp-modal-sales-channel-dropdown--display .cp-modal-sales-channel-item--selected,
.cp-modal-sales-unit-dropdown--display .cp-modal-sales-unit-item--selected,
.cp-modal-sold-to-party-dropdown--display .cp-modal-sold-to-party-item--selected,
.cp-modal-deliver-to-party-dropdown--display .cp-modal-deliver-to-party-item--selected,
.cp-modal-attention-to-deliver-dropdown--display .cp-modal-attention-to-deliver-item--selected,
.cp-modal-incoterm-dropdown--display .cp-modal-incoterm-item--selected,
.cp-modal-delivery-point-dropdown--display .cp-modal-delivery-point-item--selected,
.cp-modal-shipping-point-dropdown--display .cp-modal-shipping-point-item--selected,
.cp-modal-sales-order-dropdown--display .cp-modal-sales-order-item--selected,
.cp-modal-sales-person-dropdown--display .cp-modal-sales-person-item--selected,
.cp-modal-sales-team-dropdown--display .cp-modal-sales-team-item--selected,
.cp-modal-territory-dropdown--display .cp-modal-territory-item--selected,
.cp-modal-sales-office-dropdown--display .cp-modal-sales-office-item--selected,
.cp-modal-status-dropdown--display .cp-modal-status-item--selected,
.cp-modal-handling-product-dropdown--display .cp-modal-handling-product-item--selected,
.cp-modal-child-uom-dropdown--display .cp-modal-child-uom-item--selected,
.cp-modal-partner-type-dropdown--display .cp-modal-partner-type-item--selected,
.cp-modal-partner-id-dropdown--display .cp-modal-partner-id-item--selected,
.cp-modal-custom-dropdown--display .cp-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.cp-modal-dropdown--display [class*="-check"],
.cp-modal-dropdown--display .cp-modal-dropdown-check,
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.cp-modal-dropdown--display [class*="-item-code"],
.cp-modal-dropdown--display [class*="-item-name"],
.cp-modal-dropdown--display [class*="-item-content"],
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-code,
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-name,
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-item,
.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.cp-modal-sold-to-party-dropdown-content--display .cp-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.cp-modal-tags-dropdown--display .cp-modal-tags-item,
.cp-modal-tags-dropdown--display .cp-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-tags-dropdown--display .cp-modal-tags-item:hover {
  background-color: transparent !important;
}

.cp-modal-tags-dropdown--display .cp-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cp-modal-tags-dropdown--display .cp-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item,
.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cp-modal-custom-dropdown-list--display .cp-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Case/Case.css ===== */
/* Case Wrapper - prevent page scroll */
.case-tracker-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Case Container */
.case-tracker-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.case-tracker-header {
  margin-bottom: 0;
}

.case-tracker-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Case Control - Exact copy of third-nav-control */
.case-tracker-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.case-tracker-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.case-tracker-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.case-tracker-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.case-tracker-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.case-tracker-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.case-tracker-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.case-tracker-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.case-tracker-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.case-tracker-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.case-tracker-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.case-tracker-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.case-tracker-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.case-tracker-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.case-tracker-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.case-tracker-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.case-tracker-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.case-tracker-layout-dropdown-item:last-child {
  border-bottom: none;
}

.case-tracker-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.case-tracker-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.case-tracker-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.case-tracker-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.case-tracker-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.case-tracker-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.case-tracker-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.case-tracker-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.case-tracker-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.case-tracker-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.case-tracker-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.case-tracker-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.case-tracker-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.case-tracker-filter-parameter-wrapper {
  position: relative;
}

.case-tracker-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.case-tracker-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.case-tracker-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.case-tracker-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.case-tracker-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.case-tracker-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.case-tracker-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.case-tracker-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.case-tracker-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.case-tracker-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.case-tracker-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.case-tracker-filter-close:hover {
  background-color: #f0f0f0;
}

.case-tracker-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.case-tracker-filter-group {
  margin-bottom: 1rem;
}

.case-tracker-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.case-tracker-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.case-tracker-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.case-tracker-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.case-tracker-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.case-tracker-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.case-tracker-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.case-tracker-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.case-tracker-filter-org-container {
  flex: 1 1;
  position: relative;
}

.case-tracker-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.case-tracker-filter-org-input:hover {
  border-color: #C2DE54;
}

.case-tracker-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.case-tracker-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.case-tracker-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.case-tracker-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.case-tracker-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.case-tracker-filter-tag-remove:hover {
  color: #000;
}

.case-tracker-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.case-tracker-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.case-tracker-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.case-tracker-filter-org-item:hover {
  background-color: #f5f5f5;
}

.case-tracker-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.case-tracker-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.case-tracker-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.case-tracker-filter-org-code {
  font-weight: 600;
  color: #333;
}

.case-tracker-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.case-tracker-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.case-tracker-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.case-tracker-type-dropdown-item:last-child {
  border-bottom: none;
}

.case-tracker-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.case-tracker-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.case-tracker-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.case-tracker-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Case Table */
.case-tracker-table {
  animation: caseTrackerFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes caseTrackerFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .case-tracker-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .case-tracker-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .case-tracker-type-dropdown {
    min-width: 11.25rem;
  }

  .case-tracker-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Case/CaseModal.css ===== */
/* Case Modal Specific Styles */
.case-modal {
  overscroll-behavior: contain;
}

.case-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.cs-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.cs-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.cs-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.cs-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.cs-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.cs-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.cs-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cs-modal-pov-button--external.cs-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cs-modal-pov-button--external .cs-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-pov-button--external .cs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.cs-modal-pov-caret--open {
  transform: rotate(180deg);
}

.cs-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.cs-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.cs-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.cs-modal-pov-dropdown-item span {
  flex: 1 1;
}

.cs-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.cs-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.cs-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.cs-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.cs-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.cs-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.cs-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.cs-modal-tabs--display .cs-modal-tab {
  color: #666666;
}

.cs-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.cs-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.cs-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.cs-modal-tabs--display .cs-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cs-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.cs-modal-tabs--external .cs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cs-modal-tabs--external.cs-modal-tabs--display .cs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cs-modal-tabs--external .cs-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.cs-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.cs-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.cs-modal-action-button span {
  white-space: nowrap;
}

.cs-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.cs-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.cs-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-modal-action-button--disabled .cs-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.cs-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.cs-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.cs-modal-left-area--full .cs-modal-back-button {
  transition: width 300ms ease;
}

.cs-modal-left-area--full .cs-modal-back-button:hover {
  width: 3.5rem;
}

.cs-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.cs-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.cs-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-modal-content--item {
  padding-bottom: 1rem;
}

.cs-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.cs-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.cs-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.cs-modal-attachment-table-container .cs-modal-detail-table thead,
.cs-modal-attachment-table-container .cs-modal-attachment-table thead {
  box-shadow: none !important;
}

.cs-modal-attachment-table-container .cs-modal-detail-table tr,
.cs-modal-attachment-table-container .cs-modal-attachment-table tr {
  box-shadow: none !important;
}

.cs-modal-attachment-table-container .cs-modal-detail-table tbody tr:last-child,
.cs-modal-attachment-table-container .cs-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cs-modal-attachment-table-container .cs-modal-detail-table tbody tr:last-child td,
.cs-modal-attachment-table-container .cs-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cs-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.cs-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.cs-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.cs-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.cs-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.cs-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.cs-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.cs-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.cs-modal-attachment-filename--external {
  color: #E67E22;
}

.cs-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.cs-modal-tab-content--display .cs-modal-attachment-filename--external {
  color: #E67E22;
}

.cs-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.cs-modal-attachment-size {
  color: #666666;
}

.cs-modal-attachment-date {
  color: #666666;
}

.cs-modal-attachment-uploadedby {
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.cs-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cs-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cs-modal-attachment-browse-btn:focus {
  outline: none;
}

.cs-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cs-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cs-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-attachment-browse-btn--disabled .cs-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cs-modal-tab-content--display .cs-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.cs-modal-tab-content--display .cs-modal-attachment-filename.cs-modal-attachment-filename--external {
  color: #E67E22;
}

.cs-modal-tab-content--display .cs-modal-attachment-type {
  color: #666666;
}

.cs-modal-tab-content--display .cs-modal-attachment-size {
  color: #666666;
}

.cs-modal-tab-content--display .cs-modal-attachment-date {
  color: #666666;
}

.cs-modal-tab-content--display .cs-modal-attachment-uploadedby {
  color: #333333;
}

.cs-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.cs-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.cs-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.cs-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cs-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.cs-modal-tab-content--display .cs-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.cs-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cs-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.cs-modal-tab-content--display .cs-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.cs-modal-basic-section--external .cs-modal-form-input:focus {
  border-color: #F5B041;
}

.cs-modal-basic-section--external .cs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.cs-modal-tab-content--external .cs-modal-form-input:focus,
.cs-modal-tab-content--external .cs-modal-form-textarea:focus,
.cs-modal-tab-content--external .cs-modal-custom-dropdown-input:focus,
.cs-modal-tab-content--external .cs-modal-date-input:focus,
.cs-modal-tab-content--external .cs-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.cs-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.cs-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.cs-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.cs-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.cs-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cs-modal-tab-content--display .cs-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.cs-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.cs-modal-tab-content--display .cs-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.cs-modal-partner-header-section--external .cs-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.cs-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cs-modal-tab-content--display .cs-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.cs-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.cs-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.cs-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.cs-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cs-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.cs-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.cs-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.cs-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.cs-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.cs-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.cs-modal-chat-section {
  padding: 1.5rem 0;
}

.cs-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cs-modal-chat-header h3 {
  margin: 0;
}

.cs-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.cs-modal-chat-new-thread .cs-modal-form-textarea {
  min-height: 5rem;
}

.cs-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cs-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cs-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cs-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.cs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cs-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.cs-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.cs-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.cs-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cs-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.cs-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.cs-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.cs-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cs-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cs-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-chat-user-name {
  color: #333333 !important;
}

.cs-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.cs-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.cs-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.cs-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.cs-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.cs-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.cs-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cs-modal-chat-reply-btn:hover .cs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cs-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.cs-modal-chat-replies .cs-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.cs-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.cs-modal-chat-reply-input .cs-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.cs-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cs-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.cs-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.cs-modal-tab-content--display .cs-modal-chat-thread {
  border-color: #E5E5E5;
}

.cs-modal-tab-content--display .cs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display .cs-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-chat-user-position {
  background-color: #E8F5E9;
}

.cs-modal-tab-content--display .cs-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.cs-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cs-modal-tab-content--display .cs-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cs-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.cs-modal-notes-header-section--external .cs-modal-form-textarea:focus {
  border-color: #F5B041;
}

.cs-modal-chat-section--external .cs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.cs-modal-chat-avatar--external {
  background-color: #F5B041;
}

.cs-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.cs-modal-tab-content--display .cs-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-thread {
  border-color: #E5E5E5;
}

.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-user-name {
  color: #333333 !important;
}

.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-user-position {
  background-color: #FDE8D0;
}

.cs-modal-tab-content--display.cs-modal-tab-content--external .cs-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.cs-modal-chat-reply-btn--external {
  color: #E67E22;
}

.cs-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.cs-modal-chat-reply-btn--external .cs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cs-modal-chat-reply-btn--external:hover .cs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.cs-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cs-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.cs-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.cs-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.cs-modal-chat-textarea-wrapper {
  position: relative;
}

.cs-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.cs-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cs-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.cs-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.cs-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.cs-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.cs-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.cs-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.cs-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.cs-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cs-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.cs-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.cs-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.cs-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.cs-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.cs-modal-tab-content--display .cs-modal-table-empty-state-title {
  color: #666666;
}

.cs-modal-tab-content--display .cs-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.cs-modal-partner-header-section + .cs-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.cs-modal-partner-header-section + .cs-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.cs-modal-partner-header-section + .cs-modal-item-content-section .cs-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.cs-modal-partner-header-section + .cs-modal-item-content-section .cs-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.cs-modal-partner-header-section + .cs-modal-item-content-section .cs-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.cs-modal-partner-header-section + .cs-modal-item-content-section .cs-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.cs-modal-partner-header-section + .cs-modal-item-content-section .cs-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.cs-modal-partner-table-container .cs-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.cs-modal-partner-table-container .cs-modal-partner-table th:last-child,
.cs-modal-partner-table-container .cs-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.cs-modal-detail-table-container--external.cs-modal-partner-table-container .cs-modal-partner-table th:last-child,
.cs-modal-detail-table-container--external.cs-modal-partner-table-container .cs-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.cs-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cs-modal-item-header-section .cs-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-tab-content--display .cs-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.cs-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.cs-modal-tab-content--display .cs-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.cs-modal-item-header-section--external .cs-modal-form-input:focus {
  border-color: #F5B041;
}

.cs-modal-item-header-section--external .cs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.cs-modal-detail-subtabs--external .cs-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.cs-modal-detail-subtabs--external .cs-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.cs-modal-detail-subtabs--external .cs-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.cs-modal-tab-content--display .cs-modal-detail-subtabs--external .cs-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cs-modal-tab-content--display .cs-modal-detail-subtabs--external .cs-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.cs-modal-tab-content.cs-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.cs-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.cs-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.cs-modal-item-table-wrapper .cs-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.cs-modal-item-table-wrapper .cs-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.cs-modal-item-table-wrapper--terms .cs-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.cs-modal-tab-content--external.cs-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.cs-modal-tab-content--external .cs-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-tab-content--external .cs-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-tab-content--external .cs-modal-item-table-wrapper--terms .cs-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.cs-modal-tab-content--external .cs-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.cs-modal-item-table-wrapper--terms .cs-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.cs-modal-item-table-wrapper--terms .cs-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cs-modal-item-table-wrapper--terms .cs-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.cs-modal-item-table-wrapper--terms .cs-modal-detail-table tr {
  height: auto;
}

.cs-modal-item-table-wrapper--terms .cs-modal-detail-table-container .cs-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.cs-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.cs-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.cs-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cs-modal-volume-input-group .cs-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cs-modal-volume-input-group .cs-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cs-modal-volume-input-group .cs-modal-sla-input-wrapper .cs-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.cs-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cs-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cs-modal-volume-uom-list--display .cs-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-volume-uom-list--display .cs-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.cs-modal-volume-uom-list--display .cs-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-volume-uom-list--display .cs-modal-volume-uom-check {
  color: #999999 !important;
}

.cs-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.cs-modal-volume-uom-dropdown--display .cs-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-modal-volume-uom-dropdown--display .cs-modal-volume-uom-item:hover {
  background-color: transparent;
}

.cs-modal-volume-uom-dropdown--display .cs-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cs-modal-volume-uom-dropdown--display .cs-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.cs-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cs-modal-weight-input-group .cs-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cs-modal-weight-input-group .cs-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cs-modal-weight-input-group .cs-modal-sla-input-wrapper .cs-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.cs-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cs-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-weight-uom-input::placeholder {
  color: #999999;
}

.cs-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.cs-modal-weight-uom-dropdown--display .cs-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-modal-weight-uom-dropdown--display .cs-modal-weight-uom-item:hover {
  background-color: transparent;
}

.cs-modal-weight-uom-dropdown--display .cs-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cs-modal-weight-uom-dropdown--display .cs-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.cs-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.cs-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.cs-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.cs-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.cs-modal-form-input--display ~ .cs-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.cs-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.cs-modal-form-input--display {
  cursor: default;
}

.cs-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.cs-modal-form-label--display {
  color: #333333 !important;
}

.cs-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.cs-modal-form-label--display .cs-modal-required {
  color: #FF4D4F;
}

.cs-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.cs-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.cs-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.cs-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.cs-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.cs-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.cs-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cs-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.cs-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.cs-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.cs-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.cs-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.cs-modal-sla-spinner-btn:disabled .cs-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cs-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sla-spinner-btn:hover .cs-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.cs-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.cs-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.cs-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.cs-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.cs-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.cs-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.cs-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.cs-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.cs-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.cs-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.cs-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.cs-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.cs-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.cs-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.cs-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.cs-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.cs-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.cs-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.cs-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.cs-modal-stage-dropdown-input--display .cs-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.cs-modal-stage-dropdown-input--display .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.cs-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.cs-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.cs-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.cs-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.cs-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cs-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.cs-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.cs-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.cs-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.cs-modal-accordion-header--display {
  color: #333333;
}

.cs-modal-accordion-header--display.cs-modal-accordion-header--active {
  color: #333333;
}

.cs-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.cs-modal-accordion-header--display .cs-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.cs-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.cs-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.cs-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.cs-modal-stage-main-title--display {
  color: #138B4C;
}

.cs-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-stage-title--display {
  color: #333333;
}

.cs-modal-stage-current {
  margin-bottom: 1.875rem;
}

.cs-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.cs-modal-stage-label--display {
  color: #666666;
}

.cs-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-stage-subtitle--display {
  color: #333333;
}

.cs-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.cs-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.cs-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.cs-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.cs-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.cs-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cs-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.cs-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.cs-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.cs-modal-download-button:active {
  background-color: #E0E0E0;
}

.cs-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-download-button--display .cs-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.cs-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.cs-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.cs-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.cs-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.cs-modal-timeline-item--display .cs-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.cs-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.cs-modal-timeline-badge--inactive .cs-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.cs-modal-timeline-item--display .cs-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.cs-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.cs-modal-timeline-item--display .cs-modal-timeline-line {
  background-color: #138B4C;
}

.cs-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.cs-modal-timeline-status--display {
  color: #333333;
}

.cs-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.cs-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.cs-modal-timeline-date--display {
  color: #666666;
}

.cs-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.cs-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.cs-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.cs-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cs-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cs-modal-timeline-document--display {
  color: #138B4C;
}

.cs-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.cs-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.cs-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.cs-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.cs-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.cs-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.cs-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.cs-modal-activity-item--display .cs-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.cs-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.cs-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.cs-modal-activity-item--display .cs-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.cs-modal-activity-item--display .cs-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.cs-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.cs-modal-activity-item--display .cs-modal-activity-line {
  background-color: #138B4C;
}

.cs-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.cs-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.cs-modal-activity-type--display {
  color: #333333;
}

.cs-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.cs-modal-activity-header--display {
  color: #666666;
}

.cs-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cs-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.cs-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.cs-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.cs-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.cs-modal-activity-change--display .cs-modal-activity-field {
  color: #333333;
}

.cs-modal-activity-change--display .cs-modal-activity-new {
  color: #138B4C;
}

.cs-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.cs-modal-activity-date--display {
  color: #666666;
}

.cs-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.cs-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.cs-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cs-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cs-modal-activity-more--display {
  color: #138B4C;
}

.cs-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-activity-more--display .cs-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.cs-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.cs-modal-reference-table thead {
  background-color: #F9F9F9;
}

.cs-modal-tab-content--display .cs-modal-reference-table thead {
  background-color: #FAFAFA;
}

.cs-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.cs-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.cs-modal-tab-content--display .cs-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.cs-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.cs-modal-tab-content--display .cs-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.cs-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.cs-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.cs-modal-detail-subtab:hover {
  color: #138B4C;
}

.cs-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.cs-modal-tab-content--display .cs-modal-detail-subtab {
  color: #666666;
}

.cs-modal-tab-content--display .cs-modal-detail-subtab:hover {
  color: #138B4C;
}

.cs-modal-tab-content--display .cs-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cs-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.cs-modal-tab-content.cs-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.cs-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-detail-delivery-wrapper .cs-modal-form-label {
  flex-shrink: 0;
}

.cs-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.cs-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.cs-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cs-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cs-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cs-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cs-modal-detail-table-container .cs-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cs-modal-detail-table-container .cs-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cs-modal-detail-table-container .cs-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.cs-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.cs-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cs-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.cs-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.cs-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cs-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.cs-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-detail-table th,
.cs-modal-tab-content--display .cs-modal-packaging-table th,
.cs-modal-tab-content--display .cs-modal-partner-table th,
.cs-modal-tab-content--display .cs-modal-attachment-table th {
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-detail-table td,
.cs-modal-tab-content--display .cs-modal-packaging-table td,
.cs-modal-tab-content--display .cs-modal-partner-table td,
.cs-modal-tab-content--display .cs-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-description,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-text,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-batch,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-serial,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-so-item,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-package-no,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-product-type,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-product-group,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-product-category,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cs-modal-tab-content--display .cs-modal-detail-table tbody tr:hover .cs-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-description,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-text,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-batch,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-serial,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-so-item,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-package-no,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-type,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-group,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-category,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .cs-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.cs-modal-detail-table-container .cs-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.cs-modal-detail-table-container .cs-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.cs-modal-detail-table-container--external .cs-modal-detail-table td {
  color: #555555 !important;
}

.cs-modal-detail-table-container .cs-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.cs-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.cs-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cs-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.cs-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.cs-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.cs-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.cs-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.cs-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.cs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cs-modal-detail-table tbody tr:hover .detail-table-description,
.cs-modal-detail-table tbody tr:hover .detail-table-text,
.cs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cs-modal-detail-table tbody tr:hover .detail-table-batch,
.cs-modal-detail-table tbody tr:hover .detail-table-serial,
.cs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cs-modal-detail-table tbody tr:hover .detail-table-so-item,
.cs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cs-modal-detail-table tbody tr:hover .detail-table-package-no,
.cs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cs-modal-detail-table tbody tr:hover .detail-table-product-type,
.cs-modal-detail-table tbody tr:hover .detail-table-product-group,
.cs-modal-detail-table tbody tr:hover .detail-table-product-category,
.cs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cs-modal-detail-table tbody tr:hover .cs-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-description,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-text,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-batch,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-serial,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-so-item,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-package-no,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-type,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-group,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-category,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .cs-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.cs-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cs-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.cs-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.cs-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.cs-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.cs-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cs-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.cs-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cs-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.cs-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.cs-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.cs-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.cs-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.cs-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.cs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.cs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.cs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.cs-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cs-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.cs-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.cs-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.cs-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cs-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.cs-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cs-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.cs-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cs-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cs-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cs-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cs-modal-add-item-btn--disabled .cs-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cs-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Reference Table - Same style as Detail Delivery Table */
.cs-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.cs-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.cs-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cs-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cs-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.cs-modal-sales-order-table-container .cs-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.cs-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cs-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cs-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.cs-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.cs-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.cs-modal-table-input:focus {
  outline: none;
}

.cs-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.cs-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.cs-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cs-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.cs-modal-tags-container {
  position: relative;
  width: 100%;
}

.cs-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cs-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cs-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.cs-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.cs-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.cs-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.cs-modal-tags-input--display .cs-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.cs-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.cs-modal-tag-remove:hover {
  color: #333333;
}

.cs-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.cs-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cs-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.cs-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.cs-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.cs-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.cs-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.cs-modal-status-container {
  position: relative;
  width: 100%;
}

.cs-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cs-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cs-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.cs-modal-status-placeholder {
  color: #999999;
}

.cs-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.cs-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cs-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cs-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-status-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-status-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.cs-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.cs-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.cs-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.cs-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.cs-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.cs-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.cs-modal-status-input--display .cs-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.cs-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.cs-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cs-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cs-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.cs-modal-stage-dropdown-placeholder {
  color: #999999;
}

.cs-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.cs-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cs-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cs-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.cs-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.cs-modal-stage--created .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.cs-modal-stage--approved .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.cs-modal-stage--processed .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.cs-modal-stage--picked .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.cs-modal-stage--packed .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.cs-modal-stage--planned .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.cs-modal-stage--loaded .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.cs-modal-stage--issued .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.cs-modal-stage--departed .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.cs-modal-stage--arrived .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.cs-modal-stage--unloaded .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.cs-modal-stage--delivered .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.cs-modal-stage--confirmed .cs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.cs-modal-stage--billed .cs-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.cs-modal-stage-dropdown-input .cs-modal-stage,
.cs-modal-stage-dropdown-item .cs-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.cs-modal-baseline-date-dropdown {
  position: relative;
}

.cs-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cs-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.cs-modal-reference-type-dropdown {
  position: relative;
}

.cs-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cs-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.cs-modal-delivery-priority-dropdown {
  position: relative;
}

.cs-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cs-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.cs-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.cs-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.cs-modal-delivery-priority-separator {
  color: #666666;
}

.cs-modal-delivery-priority-name {
  color: #333333;
}

.cs-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.cs-modal-organization-dropdown {
  position: relative;
}

.cs-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cs-modal-organization-dropdown-content--display .cs-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-organization-dropdown-content--display .cs-modal-organization-item:hover {
  background-color: transparent !important;
}

.cs-modal-organization-dropdown-content--display .cs-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-organization-dropdown-content--display .cs-modal-organization-code,
.cs-modal-organization-dropdown-content--display .cs-modal-organization-name,
.cs-modal-organization-dropdown-content--display .cs-modal-organization-separator {
  color: #999999 !important;
}

.cs-modal-organization-dropdown-content--display .cs-modal-organization-check {
  color: #999999 !important;
}

.cs-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-organization-separator {
  color: #999999;
}

.cs-modal-organization-name {
  color: #333333;
}

.cs-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.cs-modal-sales-structure-dropdown {
  position: relative;
}

.cs-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.cs-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cs-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-sales-structure-separator {
  color: #999999;
}

.cs-modal-sales-structure-name {
  color: #333333;
}

.cs-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.cs-modal-delivery-type-dropdown {
  position: relative;
}

.cs-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.cs-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cs-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cs-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cs-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cs-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.cs-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.cs-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-delivery-type-separator {
  color: #999999;
}

.cs-modal-delivery-type-description {
  color: #333333;
}

.cs-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.cs-modal-content::-webkit-scrollbar,
.cs-modal-stage-content::-webkit-scrollbar,


.cs-modal-content::-webkit-scrollbar-track,
.cs-modal-stage-content::-webkit-scrollbar-track,


.cs-modal-content::-webkit-scrollbar-thumb,
.cs-modal-stage-content::-webkit-scrollbar-thumb,


.cs-modal-content::-webkit-scrollbar-thumb:hover,
.cs-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.cs-modal-sales-channel-dropdown {
  position: relative;
}

.cs-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cs-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-sales-channel-separator {
  color: #999999;
}

.cs-modal-sales-channel-name {
  color: #333333;
}

.cs-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.cs-modal-sales-unit-dropdown {
  position: relative;
}

.cs-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cs-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-sales-unit-separator {
  color: #999999;
}

.cs-modal-sales-unit-name {
  color: #333333;
}

.cs-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.cs-modal-organization-item--placeholder,
.cs-modal-sales-structure-item--placeholder,
.cs-modal-sales-channel-item--placeholder,
.cs-modal-sales-unit-item--placeholder,
.cs-modal-territory-item--placeholder,
.cs-modal-sales-office-item--placeholder,
.cs-modal-sold-to-party-item--placeholder,
.cs-modal-deliver-to-party-item--placeholder,
.cs-modal-attention-to-deliver-item--placeholder,
.cs-modal-incoterm-item--placeholder,
.cs-modal-delivery-point-item--placeholder,
.cs-modal-shipping-point-item--placeholder,
.cs-modal-sales-order-item--placeholder,
.cs-modal-sales-team-item--placeholder,
.cs-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.cs-modal-organization-item--placeholder:hover,
.cs-modal-sales-structure-item--placeholder:hover,
.cs-modal-sales-channel-item--placeholder:hover,
.cs-modal-sales-unit-item--placeholder:hover,
.cs-modal-territory-item--placeholder:hover,
.cs-modal-sales-office-item--placeholder:hover,
.cs-modal-sold-to-party-item--placeholder:hover,
.cs-modal-deliver-to-party-item--placeholder:hover,
.cs-modal-attention-to-deliver-item--placeholder:hover,
.cs-modal-incoterm-item--placeholder:hover,
.cs-modal-delivery-point-item--placeholder:hover,
.cs-modal-shipping-point-item--placeholder:hover,
.cs-modal-sales-order-item--placeholder:hover,
.cs-modal-sales-team-item--placeholder:hover,
.cs-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.cs-modal-sold-to-party-dropdown {
  position: relative;
}

.cs-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-sold-to-party-input:focus,
.cs-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.cs-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cs-modal-sold-to-party-separator {
  color: #999999;
}

.cs-modal-sold-to-party-name {
  color: #333333;
}

.cs-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.cs-modal-deliver-to-party-dropdown {
  position: relative;
}

.cs-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cs-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cs-modal-deliver-to-party-separator {
  color: #999999;
}

.cs-modal-deliver-to-party-name {
  color: #333333;
}

.cs-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.cs-modal-attention-to-deliver-dropdown {
  position: relative;
}
.cs-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.cs-modal-attention-to-deliver-separator {
  color: #999999;
}
.cs-modal-attention-to-deliver-name {
  color: #333333;
}
.cs-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.cs-modal-incoterm-dropdown {
  position: relative;
}
.cs-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.cs-modal-incoterm-separator {
  color: #999999;
}
.cs-modal-incoterm-name {
  color: #333333;
}
.cs-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.cs-modal-delivery-point-dropdown {
  position: relative;
}
.cs-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cs-modal-delivery-point-separator {
  color: #999999;
}
.cs-modal-delivery-point-name {
  color: #333333;
}
.cs-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.cs-modal-shipping-point-dropdown {
  position: relative;
}
.cs-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cs-modal-shipping-point-separator {
  color: #999999;
}
.cs-modal-shipping-point-name {
  color: #333333;
}
.cs-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.cs-modal-sales-order-dropdown {
  position: relative;
}
.cs-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.cs-modal-sales-order-separator {
  color: #999999;
}
.cs-modal-sales-order-name {
  color: #333333;
}
.cs-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.cs-modal-date-picker {
  position: relative;
}
.cs-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.cs-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.cs-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.cs-modal-date-input::-webkit-datetime-edit-text,
.cs-modal-date-input::-webkit-datetime-edit-month-field,
.cs-modal-date-input::-webkit-datetime-edit-day-field,
.cs-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.cs-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.cs-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.cs-modal-sales-person-dropdown {
  position: relative;
}
.cs-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.cs-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.cs-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.cs-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cs-modal-sales-person-separator {
  color: #999999;
}
.cs-modal-sales-person-name {
  color: #333333;
}
.cs-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.cs-modal-sales-team-dropdown {
  position: relative;
}
.cs-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cs-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cs-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cs-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cs-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cs-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cs-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.cs-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.cs-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.cs-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cs-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.cs-modal-sales-team-separator {
  color: #999999;
}
.cs-modal-sales-team-name {
  color: #333333;
}
.cs-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cs-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.cs-modal-territory-dropdown {
  position: relative;
}

.cs-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cs-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-territory-separator {
  color: #999999;
}

.cs-modal-territory-name {
  color: #333333;
}

.cs-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.cs-modal-sales-office-dropdown {
  position: relative;
}

.cs-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cs-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cs-modal-sales-office-separator {
  color: #999999;
}

.cs-modal-sales-office-name {
  color: #333333;
}

.cs-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.cs-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cs-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.cs-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.cs-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cs-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cs-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cs-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-table-dropdown-input:focus {
  outline: none;
}

.cs-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cs-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cs-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.cs-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.cs-modal-delivery-type-list::-webkit-scrollbar,
.cs-modal-stage-dropdown-list::-webkit-scrollbar,
.cs-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cs-modal-delivery-type-list::-webkit-scrollbar-track,
.cs-modal-stage-dropdown-list::-webkit-scrollbar-track,
.cs-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-delivery-type-list::-webkit-scrollbar-thumb,
.cs-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.cs-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cs-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.cs-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.cs-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.cs-modal-wrapper,
.cs-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.case-modal,
.cs-modal-wrapper,
.cs-modal-wrapper *,
.cs-modal-content,
.cs-modal-data-flow-2-container,
.cs-modal-data-flow-container,
.cs-modal-calendar-container,
.cs-modal-calendar-milestones-list,
.cs-modal-calendar-view,
.cs-modal-calendar-yearly,
.cs-modal-calendar-monthly,
.cs-modal-calendar-weekly,
.cs-modal-calendar-weekly-body,
.cs-modal-calendar-daily,
.cs-modal-calendar-daily-timeline,
.cs-modal-calendar-grid,
.cs-modal-calendar-grid-body,
.cs-modal-detail-table-container,
.cs-modal-item-table-wrapper,
.cs-modal-attachment-table-container,
.cs-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.cs-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cs-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cs-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.cs-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.cs-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.cs-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.cs-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.cs-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.cs-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-tab-content--display .cs-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.cs-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-tab-content--display .cs-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cs-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cs-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.cs-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) {
  font-weight: 600;
}

.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) .cs-modal-packaging-input,
.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) .cs-modal-packaging-input--display,
.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) .cs-modal-handling-product-input,
.cs-modal-packaging-row--unassigned:not(.cs-modal-packaging-row--expanded) .cs-modal-handling-product-input--display {
  font-weight: 600;
}

.cs-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.cs-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row td.cs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row td.cs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row td.cs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td.cs-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded td.cs-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row--expanded:hover td.cs-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display,
.cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display,
.cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.cs-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.cs-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-tab-content--display .cs-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.cs-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-tab-content--display .cs-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cs-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.cs-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.cs-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.cs-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.cs-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.cs-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.cs-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.cs-modal-packaging-detail-table th:first-child,
.cs-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.cs-modal-packaging-detail-table th:nth-child(2),
.cs-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.cs-modal-packaging-detail-table th:nth-child(3),
.cs-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.cs-modal-packaging-detail-table td:nth-child(4),
.cs-modal-packaging-detail-table td:nth-child(6),
.cs-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.cs-modal-packaging-detail-table td:nth-child(5),
.cs-modal-packaging-detail-table td:nth-child(7),
.cs-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.cs-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.cs-modal-tab-content--display .cs-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display .cs-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.cs-modal-tab-content--display .cs-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.cs-modal-tab-content--display .cs-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.cs-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.cs-modal-packaging-table td:last-child,
.cs-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.cs-modal-packaging-table td:last-child .cs-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.cs-modal-detail-table-container--external .cs-modal-packaging-table th:last-child,
.cs-modal-detail-table-container--external .cs-modal-packaging-table td.cs-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.cs-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.cs-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cs-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cs-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.cs-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.cs-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.cs-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.cs-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.cs-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cs-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.cs-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.cs-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.cs-modal-packaging-child-table tr {
  border: none !important;
}

.cs-modal-packaging-child-table thead,
.cs-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.cs-modal-packaging-child-table th:first-child,
.cs-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.cs-modal-packaging-child-table th:nth-child(2),
.cs-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.cs-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.cs-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.cs-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.cs-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.cs-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.cs-modal-packaging-child-table th:nth-child(3),
.cs-modal-packaging-child-table td:nth-child(3),
.cs-modal-packaging-child-table th:nth-child(4),
.cs-modal-packaging-child-table td:nth-child(4),
.cs-modal-packaging-child-table th:nth-child(5),
.cs-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.cs-modal-packaging-child-table th:nth-child(6),
.cs-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.cs-modal-packaging-child-table th:nth-child(7),
.cs-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.cs-modal-detail-table-container--external .cs-modal-packaging-child-table th:last-child,
.cs-modal-detail-table-container--external .cs-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.cs-modal-packaging-child-table td:last-child .cs-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.cs-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.cs-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cs-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.cs-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.cs-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row {
  transition: none !important;
}

.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display,
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display:focus,
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display,
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display:focus,
.cs-modal-tab-content--display .cs-modal-detail-table-container .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display:focus,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display:focus,
.cs-modal-tab-content--display .cs-modal-detail-table-container--external .cs-modal-packaging-table tbody tr.cs-modal-packaging-row:hover td .cs-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.cs-modal-detail-table-container--external .cs-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.cs-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cs-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cs-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.cs-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cs-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.cs-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.cs-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.cs-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.cs-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.cs-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.cs-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.cs-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.cs-modal-detail-table-container--external .cs-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.cs-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-item--display {
  color: #999999 !important;
}

.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-code,
.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-name,
.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-separator {
  color: #999999 !important;
}

.cs-modal-handling-product-dropdown-content--display .cs-modal-handling-product-check {
  color: #999999 !important;
}

.cs-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.cs-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.cs-modal-handling-product-dropdown-content--narrow .cs-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.cs-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.cs-modal-packaging-detail-table .cs-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.cs-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.cs-modal-detail-table-container--dropdown-open .cs-modal-detail-table {
  overflow: visible;
}

.cs-modal-detail-table-container--dropdown-open .cs-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.cs-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cs-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cs-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.cs-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.cs-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.cs-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.cs-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.cs-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.cs-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.cs-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cs-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.cs-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.cs-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.cs-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.cs-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.cs-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.cs-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.cs-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cs-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.cs-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.cs-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-item:hover {
  background-color: transparent;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-item--placeholder {
  display: none;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-code,
.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-name,
.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-separator {
  color: #555555;
}

.cs-modal-handling-product-dropdown-content--view-only .cs-modal-handling-product-check {
  color: #888888;
}

.cs-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.cs-modal-handling-product-separator {
  color: #999999;
}

.cs-modal-handling-product-name {
  color: #333333;
}

.cs-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cs-modal-handling-product-item--placeholder {
  cursor: default;
}

.cs-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.cs-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.cs-modal-detail-table td:has(.cs-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.cs-modal-detail-table td .cs-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.cs-modal-detail-table td .cs-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.cs-modal-detail-table td .cs-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.cs-modal-detail-table td .cs-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.cs-modal-detail-table td .cs-modal-handling-product-input--display,
.cs-modal-detail-table td .cs-modal-handling-product-input--display:focus,
.cs-modal-detail-table td .cs-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display,
.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display:focus,
.cs-modal-detail-table-container .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display:focus,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover td .cs-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.cs-modal-detail-table td .cs-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.cs-modal-detail-table td .cs-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.cs-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cs-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cs-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.cs-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-table-text-icon-btn--filled:not(.cs-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.cs-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.cs-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cs-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.cs-modal-table-text-icon-btn--display.cs-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.cs-modal-table-text-icon-btn--display.cs-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-table-text-icon-btn--display.cs-modal-table-text-icon-btn--external.cs-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.cs-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.cs-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.cs-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cs-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.cs-modal-serial-assignment-btn {
  width: 10.625rem;
}

.cs-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.cs-modal-batch-assignment-btn--filled .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.cs-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.cs-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.cs-modal-batch-assignment-btn--display .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-batch-assignment-btn--display.cs-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cs-modal-batch-assignment-btn--display.cs-modal-batch-assignment-btn--filled .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.cs-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.cs-modal-secured-qty-btn.cs-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.cs-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.cs-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.cs-modal-secured-qty-btn--grey .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.cs-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cs-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.cs-modal-batch-assignment-btn--partial .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.cs-modal-batch-assignment-btn--display.cs-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cs-modal-batch-assignment-btn--display.cs-modal-batch-assignment-btn--partial .cs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.cs-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.cs-modal-secured-qty-modal .cs-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.cs-modal-secured-qty-modal .cs-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cs-modal-secured-qty-modal.cs-modal-batch-assignment-modal--display .cs-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.cs-modal-secured-qty-modal .cs-modal-item-text-content {
  overflow-x: hidden;
}

.cs-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.cs-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.cs-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cs-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.cs-modal-batch-assignment-modal--display .cs-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cs-modal-batch-assignment-modal--display .cs-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.cs-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.cs-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.cs-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.cs-modal-secured-qty-lock-btn--open .cs-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.cs-modal-secured-qty-lock-btn--locked .cs-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.cs-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.cs-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.cs-modal-batch-assignment-modal .cs-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.cs-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.cs-modal-batch-assignment-modal .cs-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.cs-modal-batch-assignment-modal .cs-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.cs-modal-batch-assignment-modal.cs-modal-batch-assignment-modal--display .cs-modal-item-text-info {
  background-color: #F2F8EA;
}

.cs-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cs-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.cs-modal-batch-assignment-info-group {
  flex: 1 1;
}

.cs-modal-batch-assignment-info-group .cs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cs-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.cs-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cs-modal-batch-assignment-table-section .cs-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cs-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.cs-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cs-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cs-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cs-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.cs-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.cs-modal-batch-assignment-table th,
.cs-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.cs-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.cs-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.cs-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cs-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cs-modal-batch-assignment-table tbody td:has(.cs-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.cs-modal-batch-assignment-table tbody td:has(.cs-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.cs-modal-batch-assignment-table tbody td:nth-child(2),
.cs-modal-batch-assignment-table tbody td:nth-child(3),
.cs-modal-batch-assignment-table tbody td:nth-child(4),
.cs-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.cs-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.cs-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cs-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cs-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.cs-modal-batch-assignment-modal--display .cs-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.cs-modal-batch-assignment-modal--display .cs-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cs-modal-batch-assignment-modal--display .cs-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-batch-assignment-modal--display .cs-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.cs-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.cs-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.cs-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.cs-modal-batch-assignment-table .cs-modal-placeholder-text {
  color: #CCCCCC;
}

.cs-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cs-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.cs-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cs-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.cs-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.cs-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.cs-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.cs-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.cs-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cs-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.cs-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.cs-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.cs-modal-batch-assignment-table td.batch-table-frozen-batch,
table.cs-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.cs-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cs-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.cs-modal-batch-assignment-table th.batch-table-frozen-assign,
table.cs-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.cs-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.cs-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.cs-modal-item-text-info {
  margin-bottom: 1rem;
}

.cs-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cs-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.cs-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cs-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.cs-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.cs-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.cs-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.cs-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-item-text-modal .modal-header .modal-title,
.cs-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.cs-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.cs-modal-item-text-label--display {
  color: #333333;
}

.cs-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.cs-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.cs-modal-item-text-modal .cs-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.cs-modal-item-text-modal .cs-modal-item-text-textarea-wrapper .cs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.cs-modal-item-text-textarea {
  overflow-y: auto !important;
}

.cs-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.cs-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cs-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.cs-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.cs-modal-add-do-item-modal .cs-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.cs-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cs-modal-add-do-item-dropdown-section .cs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cs-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cs-modal-add-do-item-table-section .cs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cs-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.cs-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.cs-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cs-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cs-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.cs-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cs-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.cs-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.cs-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.cs-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.cs-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.cs-modal-detail-table td:first-child .cs-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.cs-modal-detail-table td:first-child .cs-modal-partner-type-input {
  padding-left: 0.625rem;
}

.cs-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cs-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cs-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cs-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cs-modal-partner-type-dropdown--display .cs-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cs-modal-partner-type-dropdown-content--display .cs-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-partner-type-dropdown-content--display .cs-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.cs-modal-partner-type-dropdown-content--display .cs-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-partner-type-dropdown-content--display .cs-modal-partner-type-check {
  color: #999999 !important;
}

.cs-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cs-modal-partner-type-dropdown--display .cs-modal-partner-type-value {
  color: #555555;
}

.cs-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cs-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.cs-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.cs-modal-partner-type-item--placeholder {
  cursor: default;
}

.cs-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.cs-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cs-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.cs-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.cs-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cs-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cs-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cs-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cs-modal-partner-id-dropdown--display .cs-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-code,
.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-name,
.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-separator {
  color: #999999 !important;
}

.cs-modal-partner-id-dropdown-content--display .cs-modal-partner-id-check {
  color: #999999 !important;
}

.cs-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cs-modal-partner-id-dropdown--display .cs-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.cs-modal-detail-table tbody tr:hover .cs-modal-partner-type-dropdown--display .cs-modal-partner-type-input-wrapper,
.cs-modal-detail-table tbody tr:hover .cs-modal-partner-id-dropdown--display .cs-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .cs-modal-partner-type-dropdown--display .cs-modal-partner-type-input-wrapper,
.cs-modal-detail-table-container--external .cs-modal-detail-table tbody tr:hover .cs-modal-partner-id-dropdown--display .cs-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.cs-modal-partner-type-arrow--external {
  visibility: hidden;
}

.cs-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.cs-modal-partner-type-dropdown--external .cs-modal-partner-type-value {
  color: #555555;
}

.cs-modal-partner-id-dropdown--external .cs-modal-partner-id-value {
  color: #555555;
}

.cs-modal-detail-table-container--external .cs-modal-detail-table td.cs-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.cs-modal-partner-header-section--external .cs-modal-form-input--display {
  color: #555555;
}

.cs-modal-detail-table td.cs-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.cs-modal-tab-content--display .cs-modal-detail-table td.cs-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.cs-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cs-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cs-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cs-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.cs-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.cs-modal-partner-id-item--placeholder {
  cursor: default;
}

.cs-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.cs-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.cs-modal-partner-id-separator {
  color: #999999;
}

.cs-modal-partner-id-name {
  color: #666666;
}

.cs-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cs-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.cs-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.cs-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cs-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cs-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cs-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cs-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cs-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cs-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.cs-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.cs-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.cs-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.cs-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.cs-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.cs-modal-data-flow-stage--completed .cs-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cs-modal-data-flow-stage--active .cs-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cs-modal-data-flow-stage--completed .cs-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-data-flow-stage--active .cs-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.cs-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.cs-modal-data-flow-stage--completed .cs-modal-data-flow-stage-label {
  color: #138B4C;
}

.cs-modal-data-flow-stage--active .cs-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.cs-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.cs-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.cs-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.cs-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.cs-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.cs-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cs-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.cs-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.cs-modal-data-flow-document--active .cs-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.cs-modal-data-flow-document-fold {
  display: none;
}

.cs-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.cs-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.cs-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.cs-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.cs-modal-data-flow-document-icon-wrapper--active .cs-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.cs-modal-data-flow-document--active .cs-modal-data-flow-document-title {
  color: #138B4C;
}

.cs-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.cs-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.cs-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.cs-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.cs-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.cs-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.cs-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.cs-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.cs-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cs-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.cs-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.cs-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.cs-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.cs-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.cs-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.cs-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.cs-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.cs-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.cs-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cs-modal-terms-area-button .cs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.cs-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.cs-modal-tab-content--display .cs-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.cs-modal-tab-content--display .cs-modal-terms-area-button .cs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.cs-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cs-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cs-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cs-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cs-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cs-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cs-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.cs-modal-data-flow-2-row {
  display: flex;
}

.cs-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cs-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.cs-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.cs-modal-data-flow-2-row--content .cs-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.cs-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.cs-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.cs-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cs-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-label {
  color: #333333;
}

.cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage-label {
  color: #999999;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--completed .cs-modal-data-flow-2-stage-label {
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--active .cs-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.cs-modal-tab-content--display .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.cs-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.cs-modal-data-flow-2-row--content .cs-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.cs-modal-data-flow-2-row--content .cs-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cs-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cs-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.cs-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.cs-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.cs-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cs-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.cs-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.cs-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cs-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-title,
.cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-title {
  color: #333333;
}

.cs-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.cs-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cs-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.cs-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-title {
  color: #888888;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-title,
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-title {
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--completed .cs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--active .cs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-date {
  color: #333333;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.cs-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.cs-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.cs-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.cs-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.cs-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.cs-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.cs-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cs-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cs-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cs-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.cs-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.cs-modal-data-flow-2-grid--external .cs-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.cs-modal-data-flow-2-grid--external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell {
  border-bottom: none;
}

.cs-modal-data-flow-2-grid--external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.cs-modal-data-flow-2-grid--external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell--label::after {
  display: none;
}

.cs-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.cs-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.cs-modal-data-flow-2-row--content-top .cs-modal-data-flow-2-document--buyer.cs-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.cs-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.cs-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cs-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cs-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.cs-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.cs-modal-data-flow-2-stage--external-completed .cs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.cs-modal-data-flow-2-stage--external-active .cs-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.cs-modal-data-flow-2-stage--external-completed .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.cs-modal-data-flow-2-stage--external-active .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.cs-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.cs-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cs-modal-data-flow-2-document--external .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.cs-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.cs-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.cs-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cs-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.cs-modal-data-flow-2-document--external .cs-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.cs-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.cs-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cs-modal-data-flow-2-document--supplier .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.cs-modal-data-flow-2-document--supplier .cs-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.cs-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.cs-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.cs-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cs-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier .cs-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier .cs-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-completed .cs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--supplier-active .cs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.cs-modal-tab-content--data-flow-2-external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.cs-modal-tab-content--data-flow-2-external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external .cs-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external .cs-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.cs-modal-tab-content--display.cs-modal-tab-content--data-flow-2-external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.cs-modal-tab-content--display.cs-modal-tab-content--data-flow-2-external .cs-modal-data-flow-2-row--header .cs-modal-data-flow-2-cell:has(.cs-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-circle,
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external-completed .cs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external-active .cs-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-icon,
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external-completed .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external-active .cs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-stage--external .cs-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-completed .cs-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.cs-modal-tab-content--display .cs-modal-data-flow-2-document--external-active .cs-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.cs-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.cs-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.cs-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cs-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.cs-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.cs-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cs-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cs-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cs-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.cs-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.cs-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.cs-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.cs-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.cs-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cs-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.cs-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.cs-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.cs-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.cs-modal-milestone-date-value {
  color: #666666;
}

.cs-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.cs-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.cs-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.cs-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.cs-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.cs-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cs-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.cs-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cs-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.cs-modal-activity-item--display .cs-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.cs-modal-calendar-milestones .cs-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.cs-modal-calendar-milestones .cs-modal-activity-user:hover {
  text-decoration: none;
}

.cs-modal-calendar-milestones .cs-modal-activity-item--display .cs-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.cs-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cs-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cs-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cs-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-calendar-nav-btn:hover .cs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.cs-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.cs-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.cs-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.cs-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.cs-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.cs-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.cs-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.cs-modal-calendar-view-mode-btn--active + .cs-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.cs-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cs-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.cs-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.cs-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cs-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cs-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.cs-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.cs-modal-calendar-grid-cell:nth-child(7n-1),
.cs-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.cs-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.cs-modal-calendar-grid-day-name:nth-child(6),
.cs-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.cs-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cs-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cs-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.cs-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.cs-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.cs-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.cs-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.cs-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cs-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.cs-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.cs-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cs-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.cs-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cs-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.cs-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.cs-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cs-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.cs-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cs-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cs-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.cs-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.cs-modal-calendar-weekly-day-column:nth-child(6),
.cs-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.cs-modal-calendar-weekly-day-header:nth-child(6),
.cs-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.cs-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cs-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cs-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cs-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cs-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cs-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cs-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cs-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.cs-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.cs-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cs-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.cs-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cs-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cs-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.cs-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.cs-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.cs-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cs-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cs-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cs-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cs-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cs-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cs-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cs-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-view {
  border-color: #D0D0D0;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-view-mode-btn--active + .cs-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-milestones-header {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-view-title {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-grid-day-name {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-grid-cell-day {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-weekly-day-name {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-weekly-day-date {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-weekly-event-title {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-daily-header {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-daily-hour-label {
  color: #666666;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-daily-event-title {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar .cs-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.cs-modal-calendar-milestones-header--external {
  color: #333333;
}

.cs-modal-calendar-nav-btn--external .cs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cs-modal-calendar-nav-btn--external:hover .cs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.cs-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.cs-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.cs-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cs-modal-calendar-view-mode-btn--active-external + .cs-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cs-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.cs-modal-tab-content--calendar-external .cs-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.cs-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.cs-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.cs-modal-activity-type--external {
  color: #333333;
}

.cs-modal-activity-user--external {
  color: #E67E22;
}

.cs-modal-activity-user--external:hover {
  color: #D35400;
}

.cs-modal-calendar-milestones .cs-modal-activity-user--external {
  color: #E67E22;
}

.cs-modal-calendar-milestones .cs-modal-activity-user--external:hover {
  color: #D35400;
}

.cs-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.cs-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cs-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cs-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cs-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.cs-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cs-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cs-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cs-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.cs-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cs-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cs-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cs-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-milestones-header--external {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-view-mode-btn--active-external + .cs-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-calendar-nav-btn--external .cs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-activity-type--external {
  color: #333333;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-activity-user--external {
  color: #E67E22;
}

.cs-modal-tab-content--display.cs-modal-tab-content--calendar-external .cs-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.cs-modal-input--error,
.cs-modal-form-input.cs-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.cs-modal-dropdown--error .cs-modal-delivery-type-input,
.cs-modal-dropdown--error .cs-modal-organization-input,
.cs-modal-dropdown--error .cs-modal-sales-structure-input,
.cs-modal-dropdown--error .cs-modal-sales-channel-input,
.cs-modal-dropdown--error .cs-modal-sales-unit-input,
.cs-modal-dropdown--error .cs-modal-territory-input,
.cs-modal-dropdown--error .cs-modal-sales-office-input,
.cs-modal-dropdown--error .cs-modal-sold-to-party-input,
.cs-modal-dropdown--error .cs-modal-deliver-to-party-input,
.cs-modal-dropdown--error .cs-modal-attention-to-deliver-input,
.cs-modal-dropdown--error .cs-modal-incoterm-input,
.cs-modal-dropdown--error .cs-modal-delivery-point-input,
.cs-modal-dropdown--error .cs-modal-shipping-point-input,
.cs-modal-dropdown--error .cs-modal-sales-order-input,
.cs-modal-dropdown--error .cs-modal-sales-team-input,
.cs-modal-dropdown--error .cs-modal-sales-person-input,
.cs-modal-dropdown--error .cs-modal-delivery-priority-input,
.cs-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.cs-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.cs-modal-date-picker-wrapper.cs-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.cs-modal-custom-dropdown {
  position: relative;
}

.cs-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cs-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cs-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cs-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-check {
  color: #999999 !important;
}

.cs-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cs-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cs-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.cs-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cs-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.cs-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.cs-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.cs-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cs-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cs-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cs-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.cs-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cs-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.cs-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cs-modal-setting-form-label--display {
  color: #333333;
}

.cs-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cs-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-setting-dropdown--active .cs-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.cs-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.cs-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.cs-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cs-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.cs-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.cs-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.cs-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-setting-dropdown-icon.cs-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cs-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.cs-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.cs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.cs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.cs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.cs-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.cs-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cs-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cs-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cs-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.cs-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.cs-modal-setting-dropdown-item-separator {
  color: #999999;
}

.cs-modal-setting-dropdown-item-name {
  color: #333333;
}

.cs-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cs-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.cs-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cs-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cs-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cs-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.cs-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.cs-modal-setting-tab-content--print .cs-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.cs-modal-setting-tab-content--print .cs-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cs-modal-setting-tab-content--print .cs-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.cs-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.cs-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.cs-modal-setting-table thead tr {
  height: 2.25rem;
}

.cs-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.cs-modal-setting-table tbody tr {
  height: 2.25rem;
}

.cs-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.cs-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.cs-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.cs-modal-setting-table--display thead th:nth-child(2),
.cs-modal-setting-table--display thead th:nth-child(3),
.cs-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.cs-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.cs-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.cs-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.cs-modal-setting-table--transfer.cs-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.cs-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.cs-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cs-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.cs-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.cs-modal-setting-table--transfer:not(.cs-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.cs-modal-setting-table--transfer:not(.cs-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.cs-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.cs-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.cs-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.cs-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.cs-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cs-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cs-modal-tab-content--display .cs-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.cs-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.cs-modal-tab-content--display .cs-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.cs-modal-attribute-header-section--external .cs-modal-form-input:focus {
  border-color: #F5B041;
}

.cs-modal-attribute-header-section--external .cs-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.cs-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.cs-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.cs-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.cs-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.cs-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cs-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cs-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.cs-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.cs-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.cs-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cs-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cs-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.cs-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.cs-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cs-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cs-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.cs-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.cs-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.cs-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.cs-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.cs-modal-available-qty-tree-level {
  position: relative;
}

.cs-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.cs-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cs-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cs-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.cs-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.cs-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.cs-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.cs-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.cs-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.cs-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.cs-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.cs-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.cs-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cs-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.cs-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.cs-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.cs-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.cs-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.cs-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.cs-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.cs-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.cs-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.cs-modal-available-qty-tree-batch-header .cs-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.cs-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.cs-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.cs-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cs-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.cs-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.cs-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cs-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cs-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.cs-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cs-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cs-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cs-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.cs-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cs-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cs-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cs-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cs-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.cs-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.cs-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.cs-modal-activity-type--clickable.cs-modal-activity-type--display:hover {
  color: #138B4C;
}

.cs-modal-activity-type--clickable.cs-modal-activity-type--external:hover {
  color: #E67E00;
}

.cs-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cs-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.cs-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cs-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.cs-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cs-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.cs-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to cs-modal-form-label */
.cs-modal-activity-detail-content .cs-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.cs-modal-activity-detail-modal .cs-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.cs-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.cs-modal-activity-detail-modal .cs-modal-tabs--display .cs-modal-tab {
  color: #333333;
}

.cs-modal-activity-detail-modal .cs-modal-tabs--display .cs-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.cs-modal-activity-detail-modal .cs-modal-tabs--external.cs-modal-tabs--display .cs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.cs-modal-activity-detail-tab-content--general .cs-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.cs-modal-activity-detail-content .cs-modal-milestone-status {
  margin: 0;
}

.cs-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.cs-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.cs-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cs-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.cs-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.cs-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.cs-modal-activity-detail-pic-chat-wrapper:hover .cs-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.cs-modal-activity-detail-pic-chat-wrapper:hover .cs-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.cs-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.cs-modal-activity-detail-pic--clickable:hover .cs-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.cs-modal-activity-detail-content--external .cs-modal-activity-detail-pic {
  color: #E67E22;
}

.cs-modal-activity-detail-content--external .cs-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.cs-modal-activity-detail-content--external .cs-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.cs-modal-activity-detail-content--external .cs-modal-activity-detail-pic--clickable:hover .cs-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.cs-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.cs-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cs-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cs-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.cs-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.cs-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.cs-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cs-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.cs-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cs-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.cs-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cs-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cs-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cs-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.cs-modal-activity-detail-content--external .cs-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.cs-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.cs-modal-activity-detail-content--external .cs-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cs-modal-activity-detail-content--external .cs-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cs-modal-activity-detail-content--external .cs-modal-activity-detail-document-name {
  color: #E67E22;
}

.cs-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.cs-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.cs-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.cs-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.cs-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.cs-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.cs-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.cs-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.cs-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.cs-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.cs-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cs-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.cs-modal-activity-detail-tab-content--general {
  padding: 0;
}

.cs-modal-activity-detail-tab-content--general .cs-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.cs-modal-activity-detail-tab-content--general > div:not(.cs-modal-item-text-info) {
  padding: 0 1.5rem;
}

.cs-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.cs-modal-activity-detail-tab-content--attachment,
.cs-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.cs-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.cs-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.cs-modal-activity-detail-tab-content--attachment .cs-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.cs-modal-activity-detail-tab-content--attachment .cs-modal-batch-assignment-table-section > .cs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cs-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.cs-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.cs-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cs-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.cs-modal-activity-detail-content--external .cs-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.cs-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.cs-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.cs-modal-activity-detail-content--external .cs-modal-item-text-info {
  background-color: #FEF5E7;
}

.cs-modal-activity-detail-content--external .cs-modal-task-notes-section {
  background-color: #FEF5E7;
}

.cs-modal-task-notes-section .cs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cs-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.cs-modal-task-notes-textarea.cs-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.cs-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.cs-modal-task-chat-section > .cs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cs-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.cs-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cs-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cs-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cs-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.cs-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.cs-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.cs-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cs-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.cs-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cs-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.cs-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.cs-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.cs-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.cs-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.cs-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cs-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cs-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.cs-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.cs-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.cs-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cs-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.cs-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.cs-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cs-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.cs-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.cs-modal-activity-detail-content--external .cs-modal-task-chat-avatar {
  background-color: #F5B041;
}

.cs-modal-activity-detail-content--external .cs-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.cs-modal-activity-detail-content--external .cs-modal-task-chat-reply-btn {
  color: #E67E22;
}

.cs-modal-activity-detail-content--external .cs-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.cs-modal-dropdown--display .cs-modal-dropdown-item,
.cs-modal-dropdown--display [class*="-item"],
.cs-modal-tags-dropdown--display .cs-modal-tags-dropdown-item,
.cs-modal-baseline-date-dropdown--display .cs-modal-baseline-date-item,
.cs-modal-reference-type-dropdown--display .cs-modal-reference-type-item,
.cs-modal-delivery-priority-dropdown--display .cs-modal-delivery-priority-item,
.cs-modal-organization-dropdown--display .cs-modal-organization-item,
.cs-modal-sales-structure-dropdown--display .cs-modal-sales-structure-item,
.cs-modal-delivery-type-dropdown--display .cs-modal-delivery-type-item,
.cs-modal-sales-channel-dropdown--display .cs-modal-sales-channel-item,
.cs-modal-sales-unit-dropdown--display .cs-modal-sales-unit-item,
.cs-modal-sold-to-party-dropdown--display .cs-modal-sold-to-party-item,
.cs-modal-deliver-to-party-dropdown--display .cs-modal-deliver-to-party-item,
.cs-modal-attention-to-deliver-dropdown--display .cs-modal-attention-to-deliver-item,
.cs-modal-incoterm-dropdown--display .cs-modal-incoterm-item,
.cs-modal-delivery-point-dropdown--display .cs-modal-delivery-point-item,
.cs-modal-shipping-point-dropdown--display .cs-modal-shipping-point-item,
.cs-modal-sales-order-dropdown--display .cs-modal-sales-order-item,
.cs-modal-sales-person-dropdown--display .cs-modal-sales-person-item,
.cs-modal-sales-team-dropdown--display .cs-modal-sales-team-item,
.cs-modal-territory-dropdown--display .cs-modal-territory-item,
.cs-modal-sales-office-dropdown--display .cs-modal-sales-office-item,
.cs-modal-status-dropdown--display .cs-modal-status-item,
.cs-modal-handling-product-dropdown--display .cs-modal-handling-product-item,
.cs-modal-child-uom-dropdown--display .cs-modal-child-uom-item,
.cs-modal-partner-type-dropdown--display .cs-modal-partner-type-item,
.cs-modal-partner-id-dropdown--display .cs-modal-partner-id-item,
.cs-modal-custom-dropdown--display .cs-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.cs-modal-dropdown--display .cs-modal-dropdown-item:hover,
.cs-modal-dropdown--display [class*="-item"]:hover,
.cs-modal-tags-dropdown--display .cs-modal-tags-dropdown-item:hover,
.cs-modal-baseline-date-dropdown--display .cs-modal-baseline-date-item:hover,
.cs-modal-reference-type-dropdown--display .cs-modal-reference-type-item:hover,
.cs-modal-delivery-priority-dropdown--display .cs-modal-delivery-priority-item:hover,
.cs-modal-organization-dropdown--display .cs-modal-organization-item:hover,
.cs-modal-sales-structure-dropdown--display .cs-modal-sales-structure-item:hover,
.cs-modal-delivery-type-dropdown--display .cs-modal-delivery-type-item:hover,
.cs-modal-sales-channel-dropdown--display .cs-modal-sales-channel-item:hover,
.cs-modal-sales-unit-dropdown--display .cs-modal-sales-unit-item:hover,
.cs-modal-sold-to-party-dropdown--display .cs-modal-sold-to-party-item:hover,
.cs-modal-deliver-to-party-dropdown--display .cs-modal-deliver-to-party-item:hover,
.cs-modal-attention-to-deliver-dropdown--display .cs-modal-attention-to-deliver-item:hover,
.cs-modal-incoterm-dropdown--display .cs-modal-incoterm-item:hover,
.cs-modal-delivery-point-dropdown--display .cs-modal-delivery-point-item:hover,
.cs-modal-shipping-point-dropdown--display .cs-modal-shipping-point-item:hover,
.cs-modal-sales-order-dropdown--display .cs-modal-sales-order-item:hover,
.cs-modal-sales-person-dropdown--display .cs-modal-sales-person-item:hover,
.cs-modal-sales-team-dropdown--display .cs-modal-sales-team-item:hover,
.cs-modal-territory-dropdown--display .cs-modal-territory-item:hover,
.cs-modal-sales-office-dropdown--display .cs-modal-sales-office-item:hover,
.cs-modal-status-dropdown--display .cs-modal-status-item:hover,
.cs-modal-handling-product-dropdown--display .cs-modal-handling-product-item:hover,
.cs-modal-child-uom-dropdown--display .cs-modal-child-uom-item:hover,
.cs-modal-partner-type-dropdown--display .cs-modal-partner-type-item:hover,
.cs-modal-partner-id-dropdown--display .cs-modal-partner-id-item:hover,
.cs-modal-custom-dropdown--display .cs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.cs-modal-dropdown--display [class*="-item--selected"],
.cs-modal-tags-dropdown--display .cs-modal-tags-dropdown-item--selected,
.cs-modal-baseline-date-dropdown--display .cs-modal-baseline-date-item--selected,
.cs-modal-reference-type-dropdown--display .cs-modal-reference-type-item--selected,
.cs-modal-delivery-priority-dropdown--display .cs-modal-delivery-priority-item--selected,
.cs-modal-organization-dropdown--display .cs-modal-organization-item--selected,
.cs-modal-sales-structure-dropdown--display .cs-modal-sales-structure-item--selected,
.cs-modal-delivery-type-dropdown--display .cs-modal-delivery-type-item--selected,
.cs-modal-sales-channel-dropdown--display .cs-modal-sales-channel-item--selected,
.cs-modal-sales-unit-dropdown--display .cs-modal-sales-unit-item--selected,
.cs-modal-sold-to-party-dropdown--display .cs-modal-sold-to-party-item--selected,
.cs-modal-deliver-to-party-dropdown--display .cs-modal-deliver-to-party-item--selected,
.cs-modal-attention-to-deliver-dropdown--display .cs-modal-attention-to-deliver-item--selected,
.cs-modal-incoterm-dropdown--display .cs-modal-incoterm-item--selected,
.cs-modal-delivery-point-dropdown--display .cs-modal-delivery-point-item--selected,
.cs-modal-shipping-point-dropdown--display .cs-modal-shipping-point-item--selected,
.cs-modal-sales-order-dropdown--display .cs-modal-sales-order-item--selected,
.cs-modal-sales-person-dropdown--display .cs-modal-sales-person-item--selected,
.cs-modal-sales-team-dropdown--display .cs-modal-sales-team-item--selected,
.cs-modal-territory-dropdown--display .cs-modal-territory-item--selected,
.cs-modal-sales-office-dropdown--display .cs-modal-sales-office-item--selected,
.cs-modal-status-dropdown--display .cs-modal-status-item--selected,
.cs-modal-handling-product-dropdown--display .cs-modal-handling-product-item--selected,
.cs-modal-child-uom-dropdown--display .cs-modal-child-uom-item--selected,
.cs-modal-partner-type-dropdown--display .cs-modal-partner-type-item--selected,
.cs-modal-partner-id-dropdown--display .cs-modal-partner-id-item--selected,
.cs-modal-custom-dropdown--display .cs-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.cs-modal-dropdown--display [class*="-check"],
.cs-modal-dropdown--display .cs-modal-dropdown-check,
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.cs-modal-dropdown--display [class*="-item-code"],
.cs-modal-dropdown--display [class*="-item-name"],
.cs-modal-dropdown--display [class*="-item-content"],
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-code,
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-name,
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-item,
.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.cs-modal-sold-to-party-dropdown-content--display .cs-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.cs-modal-tags-dropdown--display .cs-modal-tags-item,
.cs-modal-tags-dropdown--display .cs-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-tags-dropdown--display .cs-modal-tags-item:hover {
  background-color: transparent !important;
}

.cs-modal-tags-dropdown--display .cs-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cs-modal-tags-dropdown--display .cs-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item,
.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cs-modal-custom-dropdown-list--display .cs-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Confirmation/Confirmation.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.confirmation-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.confirmation-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.confirmation-header {
  margin-bottom: 0;
}

.confirmation-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.confirmation-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.confirmation-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.confirmation-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.confirmation-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.confirmation-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.confirmation-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.confirmation-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.confirmation-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.confirmation-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.confirmation-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.confirmation-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.confirmation-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.confirmation-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.confirmation-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.confirmation-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.confirmation-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.confirmation-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.confirmation-layout-dropdown-item:last-child {
  border-bottom: none;
}

.confirmation-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.confirmation-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.confirmation-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.confirmation-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.confirmation-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.confirmation-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.confirmation-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.confirmation-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.confirmation-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.confirmation-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.confirmation-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.confirmation-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.confirmation-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.confirmation-filter-parameter-wrapper {
  position: relative;
}

.confirmation-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.confirmation-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.confirmation-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.confirmation-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.confirmation-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.confirmation-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.confirmation-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.confirmation-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.confirmation-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.confirmation-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.confirmation-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.confirmation-filter-close:hover {
  background-color: #f0f0f0;
}

.confirmation-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.confirmation-filter-group {
  margin-bottom: 1rem;
}

.confirmation-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.confirmation-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.confirmation-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.confirmation-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.confirmation-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.confirmation-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.confirmation-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.confirmation-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.confirmation-filter-org-container {
  flex: 1 1;
  position: relative;
}

.confirmation-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.confirmation-filter-org-input:hover {
  border-color: #C2DE54;
}

.confirmation-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.confirmation-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.confirmation-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.confirmation-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.confirmation-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.confirmation-filter-tag-remove:hover {
  color: #000;
}

.confirmation-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.confirmation-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.confirmation-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.confirmation-filter-org-item:hover {
  background-color: #f5f5f5;
}

.confirmation-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.confirmation-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.confirmation-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.confirmation-filter-org-code {
  font-weight: 600;
  color: #333;
}

.confirmation-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.confirmation-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.confirmation-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.confirmation-type-dropdown-item:last-child {
  border-bottom: none;
}

.confirmation-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.confirmation-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.confirmation-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.confirmation-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.confirmation-table {
  animation: confirmationFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes confirmationFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .confirmation-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .confirmation-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .confirmation-type-dropdown {
    min-width: 11.25rem;
  }

  .confirmation-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Confirmation/ConfirmationModal.css ===== */
/* Delivery Order Modal Specific Styles */
.confirmation-modal {
  overscroll-behavior: contain;
}

.confirmation-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.cf-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.cf-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.cf-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.cf-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.cf-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.cf-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.cf-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cf-modal-pov-button--external.cf-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cf-modal-pov-button--external .cf-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-pov-button--external .cf-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.cf-modal-pov-caret--open {
  transform: rotate(180deg);
}

.cf-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.cf-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.cf-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.cf-modal-pov-dropdown-item span {
  flex: 1 1;
}

.cf-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.cf-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.cf-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.cf-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.cf-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.cf-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.cf-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.cf-modal-tabs--display .cf-modal-tab {
  color: #666666;
}

.cf-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.cf-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.cf-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.cf-modal-tabs--display .cf-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cf-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.cf-modal-tabs--external .cf-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cf-modal-tabs--external.cf-modal-tabs--display .cf-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cf-modal-tabs--external .cf-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.cf-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.cf-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.cf-modal-action-button span {
  white-space: nowrap;
}

.cf-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.cf-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.cf-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cf-modal-action-button--disabled .cf-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.cf-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.cf-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.cf-modal-left-area--full .cf-modal-back-button {
  transition: width 300ms ease;
}

.cf-modal-left-area--full .cf-modal-back-button:hover {
  width: 3.5rem;
}

.cf-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.cf-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.cf-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cf-modal-content--item {
  padding-bottom: 1rem;
}

.cf-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.cf-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.cf-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.cf-modal-attachment-table-container .cf-modal-detail-table thead,
.cf-modal-attachment-table-container .cf-modal-attachment-table thead {
  box-shadow: none !important;
}

.cf-modal-attachment-table-container .cf-modal-detail-table tr,
.cf-modal-attachment-table-container .cf-modal-attachment-table tr {
  box-shadow: none !important;
}

.cf-modal-attachment-table-container .cf-modal-detail-table tbody tr:last-child,
.cf-modal-attachment-table-container .cf-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cf-modal-attachment-table-container .cf-modal-detail-table tbody tr:last-child td,
.cf-modal-attachment-table-container .cf-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cf-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.cf-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.cf-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.cf-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.cf-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.cf-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.cf-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.cf-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.cf-modal-attachment-filename--external {
  color: #E67E22;
}

.cf-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.cf-modal-tab-content--display .cf-modal-attachment-filename--external {
  color: #E67E22;
}

.cf-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.cf-modal-attachment-size {
  color: #666666;
}

.cf-modal-attachment-date {
  color: #666666;
}

.cf-modal-attachment-uploadedby {
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.cf-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cf-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cf-modal-attachment-browse-btn:focus {
  outline: none;
}

.cf-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cf-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cf-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-attachment-browse-btn--disabled .cf-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cf-modal-tab-content--display .cf-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.cf-modal-tab-content--display .cf-modal-attachment-filename.cf-modal-attachment-filename--external {
  color: #E67E22;
}

.cf-modal-tab-content--display .cf-modal-attachment-type {
  color: #666666;
}

.cf-modal-tab-content--display .cf-modal-attachment-size {
  color: #666666;
}

.cf-modal-tab-content--display .cf-modal-attachment-date {
  color: #666666;
}

.cf-modal-tab-content--display .cf-modal-attachment-uploadedby {
  color: #333333;
}

.cf-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.cf-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.cf-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.cf-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cf-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.cf-modal-tab-content--display .cf-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.cf-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cf-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.cf-modal-tab-content--display .cf-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.cf-modal-basic-section--external .cf-modal-form-input:focus {
  border-color: #F5B041;
}

.cf-modal-basic-section--external .cf-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.cf-modal-tab-content--external .cf-modal-form-input:focus,
.cf-modal-tab-content--external .cf-modal-form-textarea:focus,
.cf-modal-tab-content--external .cf-modal-custom-dropdown-input:focus,
.cf-modal-tab-content--external .cf-modal-date-input:focus,
.cf-modal-tab-content--external .cf-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.cf-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.cf-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.cf-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.cf-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.cf-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cf-modal-tab-content--display .cf-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.cf-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.cf-modal-tab-content--display .cf-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.cf-modal-partner-header-section--external .cf-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.cf-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cf-modal-tab-content--display .cf-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.cf-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.cf-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.cf-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.cf-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cf-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.cf-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.cf-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.cf-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.cf-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.cf-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.cf-modal-chat-section {
  padding: 1.5rem 0;
}

.cf-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cf-modal-chat-header h3 {
  margin: 0;
}

.cf-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.cf-modal-chat-new-thread .cf-modal-form-textarea {
  min-height: 5rem;
}

.cf-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cf-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cf-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cf-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.cf-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cf-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.cf-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.cf-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.cf-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cf-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.cf-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.cf-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.cf-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cf-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cf-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-chat-user-name {
  color: #333333 !important;
}

.cf-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.cf-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.cf-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.cf-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.cf-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.cf-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.cf-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cf-modal-chat-reply-btn:hover .cf-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cf-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.cf-modal-chat-replies .cf-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.cf-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.cf-modal-chat-reply-input .cf-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.cf-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cf-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.cf-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.cf-modal-tab-content--display .cf-modal-chat-thread {
  border-color: #E5E5E5;
}

.cf-modal-tab-content--display .cf-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display .cf-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-chat-user-position {
  background-color: #E8F5E9;
}

.cf-modal-tab-content--display .cf-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.cf-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cf-modal-tab-content--display .cf-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cf-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.cf-modal-notes-header-section--external .cf-modal-form-textarea:focus {
  border-color: #F5B041;
}

.cf-modal-chat-section--external .cf-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.cf-modal-chat-avatar--external {
  background-color: #F5B041;
}

.cf-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.cf-modal-tab-content--display .cf-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-thread {
  border-color: #E5E5E5;
}

.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-user-name {
  color: #333333 !important;
}

.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-user-position {
  background-color: #FDE8D0;
}

.cf-modal-tab-content--display.cf-modal-tab-content--external .cf-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.cf-modal-chat-reply-btn--external {
  color: #E67E22;
}

.cf-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.cf-modal-chat-reply-btn--external .cf-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cf-modal-chat-reply-btn--external:hover .cf-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.cf-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cf-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.cf-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.cf-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.cf-modal-chat-textarea-wrapper {
  position: relative;
}

.cf-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.cf-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cf-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.cf-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.cf-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.cf-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.cf-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cf-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.cf-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.cf-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.cf-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cf-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.cf-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.cf-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.cf-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.cf-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.cf-modal-tab-content--display .cf-modal-table-empty-state-title {
  color: #666666;
}

.cf-modal-tab-content--display .cf-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.cf-modal-partner-header-section + .cf-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.cf-modal-partner-header-section + .cf-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.cf-modal-partner-header-section + .cf-modal-item-content-section .cf-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.cf-modal-partner-header-section + .cf-modal-item-content-section .cf-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.cf-modal-partner-header-section + .cf-modal-item-content-section .cf-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.cf-modal-partner-header-section + .cf-modal-item-content-section .cf-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.cf-modal-partner-header-section + .cf-modal-item-content-section .cf-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.cf-modal-partner-table-container .cf-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.cf-modal-partner-table-container .cf-modal-partner-table th:last-child,
.cf-modal-partner-table-container .cf-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.cf-modal-detail-table-container--external.cf-modal-partner-table-container .cf-modal-partner-table th:last-child,
.cf-modal-detail-table-container--external.cf-modal-partner-table-container .cf-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.cf-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cf-modal-item-header-section .cf-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-tab-content--display .cf-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.cf-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.cf-modal-tab-content--display .cf-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.cf-modal-item-header-section--external .cf-modal-form-input:focus {
  border-color: #F5B041;
}

.cf-modal-item-header-section--external .cf-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.cf-modal-detail-subtabs--external .cf-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.cf-modal-detail-subtabs--external .cf-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.cf-modal-detail-subtabs--external .cf-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.cf-modal-tab-content--display .cf-modal-detail-subtabs--external .cf-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cf-modal-tab-content--display .cf-modal-detail-subtabs--external .cf-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.cf-modal-tab-content.cf-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.cf-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.cf-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.cf-modal-item-table-wrapper .cf-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.cf-modal-item-table-wrapper .cf-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.cf-modal-item-table-wrapper--terms .cf-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.cf-modal-tab-content--external.cf-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.cf-modal-tab-content--external .cf-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-tab-content--external .cf-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-tab-content--external .cf-modal-item-table-wrapper--terms .cf-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.cf-modal-tab-content--external .cf-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.cf-modal-item-table-wrapper--terms .cf-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.cf-modal-item-table-wrapper--terms .cf-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cf-modal-item-table-wrapper--terms .cf-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.cf-modal-item-table-wrapper--terms .cf-modal-detail-table tr {
  height: auto;
}

.cf-modal-item-table-wrapper--terms .cf-modal-detail-table-container .cf-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.cf-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.cf-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.cf-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cf-modal-volume-input-group .cf-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cf-modal-volume-input-group .cf-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cf-modal-volume-input-group .cf-modal-sla-input-wrapper .cf-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.cf-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cf-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cf-modal-volume-uom-list--display .cf-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-volume-uom-list--display .cf-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.cf-modal-volume-uom-list--display .cf-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-volume-uom-list--display .cf-modal-volume-uom-check {
  color: #999999 !important;
}

.cf-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.cf-modal-volume-uom-dropdown--display .cf-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cf-modal-volume-uom-dropdown--display .cf-modal-volume-uom-item:hover {
  background-color: transparent;
}

.cf-modal-volume-uom-dropdown--display .cf-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cf-modal-volume-uom-dropdown--display .cf-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.cf-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cf-modal-weight-input-group .cf-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cf-modal-weight-input-group .cf-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cf-modal-weight-input-group .cf-modal-sla-input-wrapper .cf-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.cf-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cf-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-weight-uom-input::placeholder {
  color: #999999;
}

.cf-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.cf-modal-weight-uom-dropdown--display .cf-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cf-modal-weight-uom-dropdown--display .cf-modal-weight-uom-item:hover {
  background-color: transparent;
}

.cf-modal-weight-uom-dropdown--display .cf-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cf-modal-weight-uom-dropdown--display .cf-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.cf-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.cf-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.cf-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.cf-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.cf-modal-form-input--display ~ .cf-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.cf-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.cf-modal-form-input--display {
  cursor: default;
}

.cf-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.cf-modal-form-label--display {
  color: #333333 !important;
}

.cf-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.cf-modal-form-label--display .cf-modal-required {
  color: #FF4D4F;
}

.cf-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.cf-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.cf-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.cf-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.cf-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.cf-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.cf-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.cf-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.cf-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.cf-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.cf-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.cf-modal-sla-spinner-btn:disabled .cf-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cf-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sla-spinner-btn:hover .cf-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.cf-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.cf-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.cf-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.cf-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.cf-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.cf-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.cf-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.cf-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.cf-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.cf-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.cf-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.cf-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.cf-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.cf-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.cf-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.cf-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.cf-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.cf-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.cf-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.cf-modal-stage-dropdown-input--display .cf-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.cf-modal-stage-dropdown-input--display .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.cf-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.cf-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.cf-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.cf-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.cf-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cf-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.cf-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.cf-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.cf-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.cf-modal-accordion-header--display {
  color: #333333;
}

.cf-modal-accordion-header--display.cf-modal-accordion-header--active {
  color: #333333;
}

.cf-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.cf-modal-accordion-header--display .cf-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.cf-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.cf-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.cf-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.cf-modal-stage-main-title--display {
  color: #138B4C;
}

.cf-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-stage-title--display {
  color: #333333;
}

.cf-modal-stage-current {
  margin-bottom: 1.875rem;
}

.cf-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.cf-modal-stage-label--display {
  color: #666666;
}

.cf-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-stage-subtitle--display {
  color: #333333;
}

.cf-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.cf-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.cf-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.cf-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.cf-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.cf-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cf-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.cf-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.cf-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cf-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.cf-modal-download-button:active {
  background-color: #E0E0E0;
}

.cf-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-download-button--display .cf-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.cf-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.cf-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.cf-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.cf-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.cf-modal-timeline-item--display .cf-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.cf-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.cf-modal-timeline-badge--inactive .cf-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.cf-modal-timeline-item--display .cf-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.cf-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.cf-modal-timeline-item--display .cf-modal-timeline-line {
  background-color: #138B4C;
}

.cf-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cf-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.cf-modal-timeline-status--display {
  color: #333333;
}

.cf-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.cf-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.cf-modal-timeline-date--display {
  color: #666666;
}

.cf-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.cf-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.cf-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.cf-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cf-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cf-modal-timeline-document--display {
  color: #138B4C;
}

.cf-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.cf-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.cf-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.cf-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.cf-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.cf-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.cf-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.cf-modal-activity-item--display .cf-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.cf-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.cf-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.cf-modal-activity-item--display .cf-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.cf-modal-activity-item--display .cf-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.cf-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.cf-modal-activity-item--display .cf-modal-activity-line {
  background-color: #138B4C;
}

.cf-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.cf-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.cf-modal-activity-type--display {
  color: #333333;
}

.cf-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.cf-modal-activity-header--display {
  color: #666666;
}

.cf-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cf-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.cf-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.cf-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.cf-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.cf-modal-activity-change--display .cf-modal-activity-field {
  color: #333333;
}

.cf-modal-activity-change--display .cf-modal-activity-new {
  color: #138B4C;
}

.cf-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.cf-modal-activity-date--display {
  color: #666666;
}

.cf-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.cf-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.cf-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cf-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cf-modal-activity-more--display {
  color: #138B4C;
}

.cf-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-activity-more--display .cf-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.cf-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.cf-modal-reference-table thead {
  background-color: #F9F9F9;
}

.cf-modal-tab-content--display .cf-modal-reference-table thead {
  background-color: #FAFAFA;
}

.cf-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.cf-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.cf-modal-tab-content--display .cf-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.cf-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.cf-modal-tab-content--display .cf-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.cf-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.cf-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.cf-modal-detail-subtab:hover {
  color: #138B4C;
}

.cf-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.cf-modal-tab-content--display .cf-modal-detail-subtab {
  color: #666666;
}

.cf-modal-tab-content--display .cf-modal-detail-subtab:hover {
  color: #138B4C;
}

.cf-modal-tab-content--display .cf-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cf-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.cf-modal-tab-content.cf-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.cf-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-detail-delivery-wrapper .cf-modal-form-label {
  flex-shrink: 0;
}

.cf-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.cf-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.cf-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cf-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cf-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cf-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cf-modal-detail-table-container .cf-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cf-modal-detail-table-container .cf-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cf-modal-detail-table-container .cf-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.cf-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.cf-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cf-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.cf-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.cf-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cf-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.cf-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-detail-table th,
.cf-modal-tab-content--display .cf-modal-packaging-table th,
.cf-modal-tab-content--display .cf-modal-partner-table th,
.cf-modal-tab-content--display .cf-modal-attachment-table th {
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-detail-table td,
.cf-modal-tab-content--display .cf-modal-packaging-table td,
.cf-modal-tab-content--display .cf-modal-partner-table td,
.cf-modal-tab-content--display .cf-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-description,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-text,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-batch,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-serial,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-after-sales/confirmation,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-so-item,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-package-no,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-product-type,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-product-group,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-product-category,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cf-modal-tab-content--display .cf-modal-detail-table tbody tr:hover .cf-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-description,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-text,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-batch,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-serial,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-after-sales/confirmation,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-so-item,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-package-no,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-type,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-group,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-category,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .cf-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.cf-modal-detail-table-container .cf-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.cf-modal-detail-table-container .cf-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.cf-modal-detail-table-container--external .cf-modal-detail-table td {
  color: #555555 !important;
}

.cf-modal-detail-table-container .cf-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.cf-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.cf-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cf-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.cf-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.cf-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.cf-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.cf-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-after-sales/confirmation {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.cf-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.cf-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cf-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cf-modal-detail-table tbody tr:hover .detail-table-description,
.cf-modal-detail-table tbody tr:hover .detail-table-text,
.cf-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cf-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cf-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cf-modal-detail-table tbody tr:hover .detail-table-batch,
.cf-modal-detail-table tbody tr:hover .detail-table-serial,
.cf-modal-detail-table tbody tr:hover .detail-table-after-sales/confirmation,
.cf-modal-detail-table tbody tr:hover .detail-table-so-item,
.cf-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cf-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cf-modal-detail-table tbody tr:hover .detail-table-package-no,
.cf-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cf-modal-detail-table tbody tr:hover .detail-table-product-type,
.cf-modal-detail-table tbody tr:hover .detail-table-product-group,
.cf-modal-detail-table tbody tr:hover .detail-table-product-category,
.cf-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cf-modal-detail-table tbody tr:hover .cf-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-description,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-text,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-batch,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-serial,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-after-sales/confirmation,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-so-item,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-package-no,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-type,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-group,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-category,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .cf-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.cf-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cf-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.cf-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.cf-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.cf-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.cf-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cf-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.cf-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cf-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.cf-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.cf-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.cf-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.cf-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.cf-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.cf-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.cf-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.cf-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.cf-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cf-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.cf-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.cf-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.cf-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cf-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.cf-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cf-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.cf-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cf-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cf-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cf-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cf-modal-add-item-btn--disabled .cf-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cf-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.cf-modal-confirmation-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.cf-modal-confirmation-table-container::-webkit-scrollbar {
  height: 2px;
}

.cf-modal-confirmation-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cf-modal-confirmation-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cf-modal-confirmation-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table tbody {
  background-color: #FFFFFF;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table tbody tr:last-child {
  border-bottom: none;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.cf-modal-confirmation-table-container .cf-modal-confirmation-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.cf-modal-confirmation-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cf-modal-confirmation-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cf-modal-confirmation-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.cf-modal-confirmation-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.cf-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.cf-modal-table-input:focus {
  outline: none;
}

.cf-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.cf-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.cf-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cf-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.cf-modal-tags-container {
  position: relative;
  width: 100%;
}

.cf-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cf-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cf-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.cf-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.cf-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.cf-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.cf-modal-tags-input--display .cf-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.cf-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.cf-modal-tag-remove:hover {
  color: #333333;
}

.cf-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.cf-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cf-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.cf-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.cf-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.cf-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.cf-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.cf-modal-status-container {
  position: relative;
  width: 100%;
}

.cf-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cf-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cf-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.cf-modal-status-placeholder {
  color: #999999;
}

.cf-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.cf-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cf-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cf-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-status-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-status-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.cf-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.cf-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.cf-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.cf-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.cf-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.cf-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.cf-modal-status-input--display .cf-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.cf-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.cf-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cf-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cf-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.cf-modal-stage-dropdown-placeholder {
  color: #999999;
}

.cf-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.cf-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cf-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cf-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.cf-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.cf-modal-stage--created .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.cf-modal-stage--approved .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.cf-modal-stage--processed .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.cf-modal-stage--picked .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.cf-modal-stage--packed .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.cf-modal-stage--planned .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.cf-modal-stage--loaded .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.cf-modal-stage--issued .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.cf-modal-stage--departed .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.cf-modal-stage--arrived .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.cf-modal-stage--unloaded .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.cf-modal-stage--delivered .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.cf-modal-stage--confirmed .cf-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.cf-modal-stage--billed .cf-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.cf-modal-stage-dropdown-input .cf-modal-stage,
.cf-modal-stage-dropdown-item .cf-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.cf-modal-baseline-date-dropdown {
  position: relative;
}

.cf-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cf-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.cf-modal-reference-type-dropdown {
  position: relative;
}

.cf-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cf-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.cf-modal-delivery-priority-dropdown {
  position: relative;
}

.cf-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cf-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.cf-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.cf-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.cf-modal-delivery-priority-separator {
  color: #666666;
}

.cf-modal-delivery-priority-name {
  color: #333333;
}

.cf-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.cf-modal-organization-dropdown {
  position: relative;
}

.cf-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cf-modal-organization-dropdown-content--display .cf-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-organization-dropdown-content--display .cf-modal-organization-item:hover {
  background-color: transparent !important;
}

.cf-modal-organization-dropdown-content--display .cf-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-organization-dropdown-content--display .cf-modal-organization-code,
.cf-modal-organization-dropdown-content--display .cf-modal-organization-name,
.cf-modal-organization-dropdown-content--display .cf-modal-organization-separator {
  color: #999999 !important;
}

.cf-modal-organization-dropdown-content--display .cf-modal-organization-check {
  color: #999999 !important;
}

.cf-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-organization-separator {
  color: #999999;
}

.cf-modal-organization-name {
  color: #333333;
}

.cf-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.cf-modal-sales-structure-dropdown {
  position: relative;
}

.cf-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.cf-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cf-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-sales-structure-separator {
  color: #999999;
}

.cf-modal-sales-structure-name {
  color: #333333;
}

.cf-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.cf-modal-delivery-type-dropdown {
  position: relative;
}

.cf-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.cf-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cf-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cf-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cf-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cf-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.cf-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.cf-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-delivery-type-separator {
  color: #999999;
}

.cf-modal-delivery-type-description {
  color: #333333;
}

.cf-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.cf-modal-content::-webkit-scrollbar,
.cf-modal-stage-content::-webkit-scrollbar,


.cf-modal-content::-webkit-scrollbar-track,
.cf-modal-stage-content::-webkit-scrollbar-track,


.cf-modal-content::-webkit-scrollbar-thumb,
.cf-modal-stage-content::-webkit-scrollbar-thumb,


.cf-modal-content::-webkit-scrollbar-thumb:hover,
.cf-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.cf-modal-sales-channel-dropdown {
  position: relative;
}

.cf-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cf-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-sales-channel-separator {
  color: #999999;
}

.cf-modal-sales-channel-name {
  color: #333333;
}

.cf-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.cf-modal-sales-unit-dropdown {
  position: relative;
}

.cf-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cf-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-sales-unit-separator {
  color: #999999;
}

.cf-modal-sales-unit-name {
  color: #333333;
}

.cf-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.cf-modal-organization-item--placeholder,
.cf-modal-sales-structure-item--placeholder,
.cf-modal-sales-channel-item--placeholder,
.cf-modal-sales-unit-item--placeholder,
.cf-modal-territory-item--placeholder,
.cf-modal-sales-office-item--placeholder,
.cf-modal-sold-to-party-item--placeholder,
.cf-modal-deliver-to-party-item--placeholder,
.cf-modal-attention-to-deliver-item--placeholder,
.cf-modal-incoterm-item--placeholder,
.cf-modal-delivery-point-item--placeholder,
.cf-modal-shipping-point-item--placeholder,
.cf-modal-confirmation-item--placeholder,
.cf-modal-sales-team-item--placeholder,
.cf-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.cf-modal-organization-item--placeholder:hover,
.cf-modal-sales-structure-item--placeholder:hover,
.cf-modal-sales-channel-item--placeholder:hover,
.cf-modal-sales-unit-item--placeholder:hover,
.cf-modal-territory-item--placeholder:hover,
.cf-modal-sales-office-item--placeholder:hover,
.cf-modal-sold-to-party-item--placeholder:hover,
.cf-modal-deliver-to-party-item--placeholder:hover,
.cf-modal-attention-to-deliver-item--placeholder:hover,
.cf-modal-incoterm-item--placeholder:hover,
.cf-modal-delivery-point-item--placeholder:hover,
.cf-modal-shipping-point-item--placeholder:hover,
.cf-modal-confirmation-item--placeholder:hover,
.cf-modal-sales-team-item--placeholder:hover,
.cf-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.cf-modal-sold-to-party-dropdown {
  position: relative;
}

.cf-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-sold-to-party-input:focus,
.cf-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.cf-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cf-modal-sold-to-party-separator {
  color: #999999;
}

.cf-modal-sold-to-party-name {
  color: #333333;
}

.cf-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.cf-modal-deliver-to-party-dropdown {
  position: relative;
}

.cf-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cf-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cf-modal-deliver-to-party-separator {
  color: #999999;
}

.cf-modal-deliver-to-party-name {
  color: #333333;
}

.cf-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.cf-modal-attention-to-deliver-dropdown {
  position: relative;
}
.cf-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.cf-modal-attention-to-deliver-separator {
  color: #999999;
}
.cf-modal-attention-to-deliver-name {
  color: #333333;
}
.cf-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.cf-modal-incoterm-dropdown {
  position: relative;
}
.cf-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.cf-modal-incoterm-separator {
  color: #999999;
}
.cf-modal-incoterm-name {
  color: #333333;
}
.cf-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.cf-modal-delivery-point-dropdown {
  position: relative;
}
.cf-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cf-modal-delivery-point-separator {
  color: #999999;
}
.cf-modal-delivery-point-name {
  color: #333333;
}
.cf-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.cf-modal-shipping-point-dropdown {
  position: relative;
}
.cf-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cf-modal-shipping-point-separator {
  color: #999999;
}
.cf-modal-shipping-point-name {
  color: #333333;
}
.cf-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.cf-modal-confirmation-dropdown {
  position: relative;
}
.cf-modal-confirmation-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-confirmation-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-confirmation-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-confirmation-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-confirmation-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-confirmation-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-confirmation-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-confirmation-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-confirmation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-confirmation-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-confirmation-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-confirmation-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-confirmation-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-confirmation-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.cf-modal-confirmation-separator {
  color: #999999;
}
.cf-modal-confirmation-name {
  color: #333333;
}
.cf-modal-confirmation-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-confirmation-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.cf-modal-date-picker {
  position: relative;
}
.cf-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.cf-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.cf-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.cf-modal-date-input::-webkit-datetime-edit-text,
.cf-modal-date-input::-webkit-datetime-edit-month-field,
.cf-modal-date-input::-webkit-datetime-edit-day-field,
.cf-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.cf-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.cf-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.cf-modal-sales-person-dropdown {
  position: relative;
}
.cf-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.cf-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.cf-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.cf-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cf-modal-sales-person-separator {
  color: #999999;
}
.cf-modal-sales-person-name {
  color: #333333;
}
.cf-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.cf-modal-sales-team-dropdown {
  position: relative;
}
.cf-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cf-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cf-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cf-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cf-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cf-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.cf-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.cf-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.cf-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cf-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.cf-modal-sales-team-separator {
  color: #999999;
}
.cf-modal-sales-team-name {
  color: #333333;
}
.cf-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cf-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.cf-modal-territory-dropdown {
  position: relative;
}

.cf-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cf-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-territory-separator {
  color: #999999;
}

.cf-modal-territory-name {
  color: #333333;
}

.cf-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.cf-modal-sales-office-dropdown {
  position: relative;
}

.cf-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cf-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cf-modal-sales-office-separator {
  color: #999999;
}

.cf-modal-sales-office-name {
  color: #333333;
}

.cf-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.cf-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cf-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.cf-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.cf-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cf-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cf-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cf-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-table-dropdown-input:focus {
  outline: none;
}

.cf-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cf-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cf-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.cf-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.cf-modal-delivery-type-list::-webkit-scrollbar,
.cf-modal-stage-dropdown-list::-webkit-scrollbar,
.cf-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cf-modal-delivery-type-list::-webkit-scrollbar-track,
.cf-modal-stage-dropdown-list::-webkit-scrollbar-track,
.cf-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-delivery-type-list::-webkit-scrollbar-thumb,
.cf-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.cf-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cf-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.cf-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.cf-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.cf-modal-wrapper,
.cf-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.confirmation-modal,
.cf-modal-wrapper,
.cf-modal-wrapper *,
.cf-modal-content,
.cf-modal-data-flow-2-container,
.cf-modal-data-flow-container,
.cf-modal-calendar-container,
.cf-modal-calendar-milestones-list,
.cf-modal-calendar-view,
.cf-modal-calendar-yearly,
.cf-modal-calendar-monthly,
.cf-modal-calendar-weekly,
.cf-modal-calendar-weekly-body,
.cf-modal-calendar-daily,
.cf-modal-calendar-daily-timeline,
.cf-modal-calendar-grid,
.cf-modal-calendar-grid-body,
.cf-modal-detail-table-container,
.cf-modal-item-table-wrapper,
.cf-modal-attachment-table-container,
.cf-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.cf-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cf-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cf-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.cf-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.cf-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.cf-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.cf-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.cf-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.cf-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-tab-content--display .cf-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.cf-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-tab-content--display .cf-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cf-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cf-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.cf-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) {
  font-weight: 600;
}

.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) .cf-modal-packaging-input,
.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) .cf-modal-packaging-input--display,
.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) .cf-modal-handling-product-input,
.cf-modal-packaging-row--unassigned:not(.cf-modal-packaging-row--expanded) .cf-modal-handling-product-input--display {
  font-weight: 600;
}

.cf-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.cf-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row td.cf-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row td.cf-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row td.cf-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td.cf-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded td.cf-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row--expanded:hover td.cf-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display,
.cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display,
.cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.cf-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.cf-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-tab-content--display .cf-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.cf-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-tab-content--display .cf-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cf-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.cf-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.cf-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.cf-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.cf-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.cf-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.cf-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.cf-modal-packaging-detail-table th:first-child,
.cf-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.cf-modal-packaging-detail-table th:nth-child(2),
.cf-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.cf-modal-packaging-detail-table th:nth-child(3),
.cf-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.cf-modal-packaging-detail-table td:nth-child(4),
.cf-modal-packaging-detail-table td:nth-child(6),
.cf-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.cf-modal-packaging-detail-table td:nth-child(5),
.cf-modal-packaging-detail-table td:nth-child(7),
.cf-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.cf-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.cf-modal-tab-content--display .cf-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display .cf-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.cf-modal-tab-content--display .cf-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.cf-modal-tab-content--display .cf-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.cf-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.cf-modal-packaging-table td:last-child,
.cf-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.cf-modal-packaging-table td:last-child .cf-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.cf-modal-detail-table-container--external .cf-modal-packaging-table th:last-child,
.cf-modal-detail-table-container--external .cf-modal-packaging-table td.cf-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.cf-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.cf-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cf-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cf-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.cf-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.cf-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.cf-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.cf-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.cf-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cf-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.cf-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.cf-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.cf-modal-packaging-child-table tr {
  border: none !important;
}

.cf-modal-packaging-child-table thead,
.cf-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.cf-modal-packaging-child-table th:first-child,
.cf-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.cf-modal-packaging-child-table th:nth-child(2),
.cf-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.cf-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.cf-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.cf-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.cf-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.cf-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.cf-modal-packaging-child-table th:nth-child(3),
.cf-modal-packaging-child-table td:nth-child(3),
.cf-modal-packaging-child-table th:nth-child(4),
.cf-modal-packaging-child-table td:nth-child(4),
.cf-modal-packaging-child-table th:nth-child(5),
.cf-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.cf-modal-packaging-child-table th:nth-child(6),
.cf-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.cf-modal-packaging-child-table th:nth-child(7),
.cf-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.cf-modal-detail-table-container--external .cf-modal-packaging-child-table th:last-child,
.cf-modal-detail-table-container--external .cf-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.cf-modal-packaging-child-table td:last-child .cf-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.cf-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.cf-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cf-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.cf-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.cf-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row {
  transition: none !important;
}

.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display,
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display:focus,
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display,
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display:focus,
.cf-modal-tab-content--display .cf-modal-detail-table-container .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display:focus,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display:focus,
.cf-modal-tab-content--display .cf-modal-detail-table-container--external .cf-modal-packaging-table tbody tr.cf-modal-packaging-row:hover td .cf-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.cf-modal-detail-table-container--external .cf-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.cf-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cf-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cf-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.cf-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cf-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.cf-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.cf-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.cf-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.cf-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.cf-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.cf-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.cf-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.cf-modal-detail-table-container--external .cf-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.cf-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-item--display {
  color: #999999 !important;
}

.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-code,
.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-name,
.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-separator {
  color: #999999 !important;
}

.cf-modal-handling-product-dropdown-content--display .cf-modal-handling-product-check {
  color: #999999 !important;
}

.cf-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.cf-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.cf-modal-handling-product-dropdown-content--narrow .cf-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.cf-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.cf-modal-packaging-detail-table .cf-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.cf-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.cf-modal-detail-table-container--dropdown-open .cf-modal-detail-table {
  overflow: visible;
}

.cf-modal-detail-table-container--dropdown-open .cf-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.cf-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cf-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cf-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.cf-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.cf-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.cf-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.cf-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.cf-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.cf-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.cf-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cf-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.cf-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.cf-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.cf-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.cf-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.cf-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.cf-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.cf-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cf-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.cf-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.cf-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-item:hover {
  background-color: transparent;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-item--placeholder {
  display: none;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-code,
.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-name,
.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-separator {
  color: #555555;
}

.cf-modal-handling-product-dropdown-content--view-only .cf-modal-handling-product-check {
  color: #888888;
}

.cf-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.cf-modal-handling-product-separator {
  color: #999999;
}

.cf-modal-handling-product-name {
  color: #333333;
}

.cf-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cf-modal-handling-product-item--placeholder {
  cursor: default;
}

.cf-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.cf-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.cf-modal-detail-table td:has(.cf-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.cf-modal-detail-table td .cf-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.cf-modal-detail-table td .cf-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.cf-modal-detail-table td .cf-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.cf-modal-detail-table td .cf-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.cf-modal-detail-table td .cf-modal-handling-product-input--display,
.cf-modal-detail-table td .cf-modal-handling-product-input--display:focus,
.cf-modal-detail-table td .cf-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display,
.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display:focus,
.cf-modal-detail-table-container .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display:focus,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover td .cf-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.cf-modal-detail-table td .cf-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.cf-modal-detail-table td .cf-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.cf-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cf-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cf-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.cf-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-table-text-icon-btn--filled:not(.cf-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.cf-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.cf-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cf-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.cf-modal-table-text-icon-btn--display.cf-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.cf-modal-table-text-icon-btn--display.cf-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-table-text-icon-btn--display.cf-modal-table-text-icon-btn--external.cf-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.cf-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.cf-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.cf-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cf-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.cf-modal-serial-assignment-btn {
  width: 10.625rem;
}

.cf-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.cf-modal-batch-assignment-btn--filled .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.cf-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.cf-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.cf-modal-batch-assignment-btn--display .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-batch-assignment-btn--display.cf-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cf-modal-batch-assignment-btn--display.cf-modal-batch-assignment-btn--filled .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.cf-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.cf-modal-secured-qty-btn.cf-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.cf-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.cf-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.cf-modal-secured-qty-btn--grey .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.cf-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cf-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.cf-modal-batch-assignment-btn--partial .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.cf-modal-batch-assignment-btn--display.cf-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cf-modal-batch-assignment-btn--display.cf-modal-batch-assignment-btn--partial .cf-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.cf-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.cf-modal-secured-qty-modal .cf-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.cf-modal-secured-qty-modal .cf-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cf-modal-secured-qty-modal.cf-modal-batch-assignment-modal--display .cf-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.cf-modal-secured-qty-modal .cf-modal-item-text-content {
  overflow-x: hidden;
}

.cf-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.cf-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.cf-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cf-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.cf-modal-batch-assignment-modal--display .cf-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cf-modal-batch-assignment-modal--display .cf-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.cf-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.cf-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.cf-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.cf-modal-secured-qty-lock-btn--open .cf-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.cf-modal-secured-qty-lock-btn--locked .cf-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.cf-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.cf-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.cf-modal-batch-assignment-modal .cf-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.cf-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.cf-modal-batch-assignment-modal .cf-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.cf-modal-batch-assignment-modal .cf-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.cf-modal-batch-assignment-modal.cf-modal-batch-assignment-modal--display .cf-modal-item-text-info {
  background-color: #F2F8EA;
}

.cf-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cf-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.cf-modal-batch-assignment-info-group {
  flex: 1 1;
}

.cf-modal-batch-assignment-info-group .cf-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cf-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.cf-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cf-modal-batch-assignment-table-section .cf-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cf-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.cf-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cf-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cf-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cf-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.cf-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.cf-modal-batch-assignment-table th,
.cf-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.cf-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.cf-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.cf-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cf-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cf-modal-batch-assignment-table tbody td:has(.cf-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.cf-modal-batch-assignment-table tbody td:has(.cf-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.cf-modal-batch-assignment-table tbody td:nth-child(2),
.cf-modal-batch-assignment-table tbody td:nth-child(3),
.cf-modal-batch-assignment-table tbody td:nth-child(4),
.cf-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.cf-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.cf-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cf-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cf-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.cf-modal-batch-assignment-modal--display .cf-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.cf-modal-batch-assignment-modal--display .cf-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cf-modal-batch-assignment-modal--display .cf-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-batch-assignment-modal--display .cf-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.cf-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.cf-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.cf-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.cf-modal-batch-assignment-table .cf-modal-placeholder-text {
  color: #CCCCCC;
}

.cf-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cf-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.cf-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cf-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.cf-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.cf-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.cf-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.cf-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.cf-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cf-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.cf-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.cf-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.cf-modal-batch-assignment-table td.batch-table-frozen-batch,
table.cf-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.cf-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cf-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.cf-modal-batch-assignment-table th.batch-table-frozen-assign,
table.cf-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.cf-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.cf-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.cf-modal-item-text-info {
  margin-bottom: 1rem;
}

.cf-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cf-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.cf-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cf-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.cf-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.cf-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.cf-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.cf-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-item-text-modal .modal-header .modal-title,
.cf-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.cf-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.cf-modal-item-text-label--display {
  color: #333333;
}

.cf-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.cf-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.cf-modal-item-text-modal .cf-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.cf-modal-item-text-modal .cf-modal-item-text-textarea-wrapper .cf-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.cf-modal-item-text-textarea {
  overflow-y: auto !important;
}

.cf-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.cf-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cf-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.cf-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.cf-modal-add-do-item-modal .cf-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.cf-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cf-modal-add-do-item-dropdown-section .cf-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cf-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cf-modal-add-do-item-table-section .cf-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cf-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.cf-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.cf-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cf-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cf-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.cf-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cf-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.cf-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.cf-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.cf-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.cf-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.cf-modal-detail-table td:first-child .cf-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.cf-modal-detail-table td:first-child .cf-modal-partner-type-input {
  padding-left: 0.625rem;
}

.cf-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cf-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cf-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cf-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cf-modal-partner-type-dropdown--display .cf-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cf-modal-partner-type-dropdown-content--display .cf-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-partner-type-dropdown-content--display .cf-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.cf-modal-partner-type-dropdown-content--display .cf-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-partner-type-dropdown-content--display .cf-modal-partner-type-check {
  color: #999999 !important;
}

.cf-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cf-modal-partner-type-dropdown--display .cf-modal-partner-type-value {
  color: #555555;
}

.cf-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cf-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.cf-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.cf-modal-partner-type-item--placeholder {
  cursor: default;
}

.cf-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.cf-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cf-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.cf-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.cf-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cf-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cf-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cf-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cf-modal-partner-id-dropdown--display .cf-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-code,
.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-name,
.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-separator {
  color: #999999 !important;
}

.cf-modal-partner-id-dropdown-content--display .cf-modal-partner-id-check {
  color: #999999 !important;
}

.cf-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cf-modal-partner-id-dropdown--display .cf-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.cf-modal-detail-table tbody tr:hover .cf-modal-partner-type-dropdown--display .cf-modal-partner-type-input-wrapper,
.cf-modal-detail-table tbody tr:hover .cf-modal-partner-id-dropdown--display .cf-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .cf-modal-partner-type-dropdown--display .cf-modal-partner-type-input-wrapper,
.cf-modal-detail-table-container--external .cf-modal-detail-table tbody tr:hover .cf-modal-partner-id-dropdown--display .cf-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.cf-modal-partner-type-arrow--external {
  visibility: hidden;
}

.cf-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.cf-modal-partner-type-dropdown--external .cf-modal-partner-type-value {
  color: #555555;
}

.cf-modal-partner-id-dropdown--external .cf-modal-partner-id-value {
  color: #555555;
}

.cf-modal-detail-table-container--external .cf-modal-detail-table td.cf-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.cf-modal-partner-header-section--external .cf-modal-form-input--display {
  color: #555555;
}

.cf-modal-detail-table td.cf-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.cf-modal-tab-content--display .cf-modal-detail-table td.cf-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.cf-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cf-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cf-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cf-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.cf-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.cf-modal-partner-id-item--placeholder {
  cursor: default;
}

.cf-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.cf-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.cf-modal-partner-id-separator {
  color: #999999;
}

.cf-modal-partner-id-name {
  color: #666666;
}

.cf-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cf-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.cf-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.cf-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cf-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cf-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cf-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cf-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cf-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cf-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.cf-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.cf-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.cf-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.cf-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.cf-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.cf-modal-data-flow-stage--completed .cf-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cf-modal-data-flow-stage--active .cf-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cf-modal-data-flow-stage--completed .cf-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-data-flow-stage--active .cf-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.cf-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.cf-modal-data-flow-stage--completed .cf-modal-data-flow-stage-label {
  color: #138B4C;
}

.cf-modal-data-flow-stage--active .cf-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.cf-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.cf-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.cf-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.cf-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.cf-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.cf-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cf-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.cf-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.cf-modal-data-flow-document--active .cf-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.cf-modal-data-flow-document-fold {
  display: none;
}

.cf-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.cf-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.cf-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.cf-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.cf-modal-data-flow-document-icon-wrapper--active .cf-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.cf-modal-data-flow-document--active .cf-modal-data-flow-document-title {
  color: #138B4C;
}

.cf-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.cf-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.cf-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.cf-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.cf-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.cf-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.cf-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.cf-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.cf-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cf-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.cf-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.cf-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.cf-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.cf-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.cf-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.cf-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.cf-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.cf-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.cf-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cf-modal-terms-area-button .cf-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.cf-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.cf-modal-tab-content--display .cf-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.cf-modal-tab-content--display .cf-modal-terms-area-button .cf-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.cf-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cf-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cf-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cf-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cf-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cf-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cf-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.cf-modal-data-flow-2-row {
  display: flex;
}

.cf-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cf-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.cf-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.cf-modal-data-flow-2-row--content .cf-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.cf-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.cf-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.cf-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cf-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-label {
  color: #333333;
}

.cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage-label {
  color: #999999;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--completed .cf-modal-data-flow-2-stage-label {
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--active .cf-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.cf-modal-tab-content--display .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.cf-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.cf-modal-data-flow-2-row--content .cf-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.cf-modal-data-flow-2-row--content .cf-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cf-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cf-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.cf-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.cf-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.cf-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cf-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.cf-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.cf-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cf-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-title,
.cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-title {
  color: #333333;
}

.cf-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.cf-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cf-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.cf-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-title {
  color: #888888;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-title,
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-title {
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--completed .cf-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--active .cf-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-date {
  color: #333333;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.cf-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.cf-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.cf-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.cf-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.cf-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.cf-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.cf-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cf-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cf-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cf-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.cf-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.cf-modal-data-flow-2-grid--external .cf-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.cf-modal-data-flow-2-grid--external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell {
  border-bottom: none;
}

.cf-modal-data-flow-2-grid--external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.cf-modal-data-flow-2-grid--external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell--label::after {
  display: none;
}

.cf-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.cf-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.cf-modal-data-flow-2-row--content-top .cf-modal-data-flow-2-document--buyer.cf-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.cf-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.cf-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cf-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cf-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.cf-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.cf-modal-data-flow-2-stage--external-completed .cf-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.cf-modal-data-flow-2-stage--external-active .cf-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.cf-modal-data-flow-2-stage--external-completed .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.cf-modal-data-flow-2-stage--external-active .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.cf-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.cf-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cf-modal-data-flow-2-document--external .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.cf-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.cf-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.cf-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cf-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.cf-modal-data-flow-2-document--external .cf-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.cf-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.cf-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cf-modal-data-flow-2-document--supplier .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.cf-modal-data-flow-2-document--supplier .cf-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.cf-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.cf-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.cf-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cf-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier .cf-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier .cf-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-completed .cf-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--supplier-active .cf-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.cf-modal-tab-content--data-flow-2-external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.cf-modal-tab-content--data-flow-2-external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external .cf-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external .cf-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.cf-modal-tab-content--display.cf-modal-tab-content--data-flow-2-external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.cf-modal-tab-content--display.cf-modal-tab-content--data-flow-2-external .cf-modal-data-flow-2-row--header .cf-modal-data-flow-2-cell:has(.cf-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-circle,
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external-completed .cf-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external-active .cf-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-icon,
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external-completed .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external-active .cf-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-stage--external .cf-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-completed .cf-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.cf-modal-tab-content--display .cf-modal-data-flow-2-document--external-active .cf-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.cf-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.cf-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.cf-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cf-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.cf-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.cf-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cf-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cf-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cf-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.cf-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.cf-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.cf-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.cf-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.cf-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cf-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.cf-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.cf-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.cf-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.cf-modal-milestone-date-value {
  color: #666666;
}

.cf-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.cf-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.cf-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.cf-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.cf-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.cf-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cf-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.cf-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cf-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.cf-modal-activity-item--display .cf-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.cf-modal-calendar-milestones .cf-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.cf-modal-calendar-milestones .cf-modal-activity-user:hover {
  text-decoration: none;
}

.cf-modal-calendar-milestones .cf-modal-activity-item--display .cf-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.cf-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cf-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cf-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cf-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cf-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-calendar-nav-btn:hover .cf-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.cf-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.cf-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.cf-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.cf-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.cf-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.cf-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.cf-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.cf-modal-calendar-view-mode-btn--active + .cf-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.cf-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cf-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cf-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.cf-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.cf-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cf-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cf-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.cf-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.cf-modal-calendar-grid-cell:nth-child(7n-1),
.cf-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.cf-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.cf-modal-calendar-grid-day-name:nth-child(6),
.cf-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.cf-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cf-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cf-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.cf-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.cf-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.cf-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.cf-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.cf-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cf-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.cf-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cf-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.cf-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cf-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.cf-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cf-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cf-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.cf-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.cf-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cf-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.cf-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cf-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cf-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.cf-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.cf-modal-calendar-weekly-day-column:nth-child(6),
.cf-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.cf-modal-calendar-weekly-day-header:nth-child(6),
.cf-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.cf-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cf-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cf-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cf-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cf-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cf-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cf-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cf-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.cf-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cf-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.cf-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cf-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.cf-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cf-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cf-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.cf-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.cf-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.cf-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cf-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cf-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cf-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cf-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cf-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cf-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cf-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-view {
  border-color: #D0D0D0;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-view-mode-btn--active + .cf-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-milestones-header {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-view-title {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-grid-day-name {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-grid-cell-day {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-weekly-day-name {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-weekly-day-date {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-weekly-event-title {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-daily-header {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-daily-hour-label {
  color: #666666;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-daily-event-title {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar .cf-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.cf-modal-calendar-milestones-header--external {
  color: #333333;
}

.cf-modal-calendar-nav-btn--external .cf-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cf-modal-calendar-nav-btn--external:hover .cf-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.cf-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.cf-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.cf-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cf-modal-calendar-view-mode-btn--active-external + .cf-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cf-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.cf-modal-tab-content--calendar-external .cf-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.cf-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.cf-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.cf-modal-activity-type--external {
  color: #333333;
}

.cf-modal-activity-user--external {
  color: #E67E22;
}

.cf-modal-activity-user--external:hover {
  color: #D35400;
}

.cf-modal-calendar-milestones .cf-modal-activity-user--external {
  color: #E67E22;
}

.cf-modal-calendar-milestones .cf-modal-activity-user--external:hover {
  color: #D35400;
}

.cf-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.cf-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cf-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cf-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cf-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.cf-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cf-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cf-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cf-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.cf-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cf-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cf-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cf-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-milestones-header--external {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-view-mode-btn--active-external + .cf-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-calendar-nav-btn--external .cf-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-activity-type--external {
  color: #333333;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-activity-user--external {
  color: #E67E22;
}

.cf-modal-tab-content--display.cf-modal-tab-content--calendar-external .cf-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.cf-modal-input--error,
.cf-modal-form-input.cf-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.cf-modal-dropdown--error .cf-modal-delivery-type-input,
.cf-modal-dropdown--error .cf-modal-organization-input,
.cf-modal-dropdown--error .cf-modal-sales-structure-input,
.cf-modal-dropdown--error .cf-modal-sales-channel-input,
.cf-modal-dropdown--error .cf-modal-sales-unit-input,
.cf-modal-dropdown--error .cf-modal-territory-input,
.cf-modal-dropdown--error .cf-modal-sales-office-input,
.cf-modal-dropdown--error .cf-modal-sold-to-party-input,
.cf-modal-dropdown--error .cf-modal-deliver-to-party-input,
.cf-modal-dropdown--error .cf-modal-attention-to-deliver-input,
.cf-modal-dropdown--error .cf-modal-incoterm-input,
.cf-modal-dropdown--error .cf-modal-delivery-point-input,
.cf-modal-dropdown--error .cf-modal-shipping-point-input,
.cf-modal-dropdown--error .cf-modal-confirmation-input,
.cf-modal-dropdown--error .cf-modal-sales-team-input,
.cf-modal-dropdown--error .cf-modal-sales-person-input,
.cf-modal-dropdown--error .cf-modal-delivery-priority-input,
.cf-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.cf-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.cf-modal-date-picker-wrapper.cf-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.cf-modal-custom-dropdown {
  position: relative;
}

.cf-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cf-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cf-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cf-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-check {
  color: #999999 !important;
}

.cf-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cf-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cf-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.cf-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cf-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cf-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.cf-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.cf-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.cf-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cf-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cf-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cf-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.cf-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cf-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.cf-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cf-modal-setting-form-label--display {
  color: #333333;
}

.cf-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cf-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-setting-dropdown--active .cf-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.cf-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.cf-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.cf-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cf-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.cf-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.cf-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.cf-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-setting-dropdown-icon.cf-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cf-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.cf-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.cf-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.cf-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.cf-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.cf-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.cf-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cf-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cf-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cf-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.cf-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.cf-modal-setting-dropdown-item-separator {
  color: #999999;
}

.cf-modal-setting-dropdown-item-name {
  color: #333333;
}

.cf-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cf-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.cf-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cf-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cf-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cf-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.cf-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.cf-modal-setting-tab-content--print .cf-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.cf-modal-setting-tab-content--print .cf-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cf-modal-setting-tab-content--print .cf-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.cf-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.cf-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.cf-modal-setting-table thead tr {
  height: 2.25rem;
}

.cf-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.cf-modal-setting-table tbody tr {
  height: 2.25rem;
}

.cf-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.cf-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.cf-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.cf-modal-setting-table--display thead th:nth-child(2),
.cf-modal-setting-table--display thead th:nth-child(3),
.cf-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.cf-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.cf-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.cf-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.cf-modal-setting-table--transfer.cf-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.cf-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.cf-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cf-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.cf-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.cf-modal-setting-table--transfer:not(.cf-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.cf-modal-setting-table--transfer:not(.cf-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.cf-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.cf-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.cf-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.cf-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.cf-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cf-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cf-modal-tab-content--display .cf-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.cf-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.cf-modal-tab-content--display .cf-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.cf-modal-attribute-header-section--external .cf-modal-form-input:focus {
  border-color: #F5B041;
}

.cf-modal-attribute-header-section--external .cf-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.cf-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.cf-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.cf-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.cf-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.cf-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cf-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cf-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.cf-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.cf-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.cf-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cf-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cf-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.cf-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.cf-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cf-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cf-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.cf-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.cf-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.cf-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.cf-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.cf-modal-available-qty-tree-level {
  position: relative;
}

.cf-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.cf-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cf-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cf-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.cf-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.cf-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.cf-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.cf-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.cf-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.cf-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.cf-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.cf-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.cf-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cf-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.cf-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.cf-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.cf-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.cf-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.cf-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.cf-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.cf-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.cf-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.cf-modal-available-qty-tree-batch-header .cf-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.cf-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.cf-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.cf-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cf-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.cf-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.cf-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cf-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cf-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.cf-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cf-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cf-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cf-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.cf-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cf-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cf-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cf-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cf-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.cf-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.cf-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.cf-modal-activity-type--clickable.cf-modal-activity-type--display:hover {
  color: #138B4C;
}

.cf-modal-activity-type--clickable.cf-modal-activity-type--external:hover {
  color: #E67E00;
}

.cf-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cf-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.cf-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cf-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.cf-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cf-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.cf-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cf-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to cf-modal-form-label */
.cf-modal-activity-detail-content .cf-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.cf-modal-activity-detail-modal .cf-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.cf-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.cf-modal-activity-detail-modal .cf-modal-tabs--display .cf-modal-tab {
  color: #333333;
}

.cf-modal-activity-detail-modal .cf-modal-tabs--display .cf-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.cf-modal-activity-detail-modal .cf-modal-tabs--external.cf-modal-tabs--display .cf-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.cf-modal-activity-detail-tab-content--general .cf-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.cf-modal-activity-detail-content .cf-modal-milestone-status {
  margin: 0;
}

.cf-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.cf-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.cf-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cf-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.cf-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.cf-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.cf-modal-activity-detail-pic-chat-wrapper:hover .cf-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.cf-modal-activity-detail-pic-chat-wrapper:hover .cf-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.cf-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.cf-modal-activity-detail-pic--clickable:hover .cf-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.cf-modal-activity-detail-content--external .cf-modal-activity-detail-pic {
  color: #E67E22;
}

.cf-modal-activity-detail-content--external .cf-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.cf-modal-activity-detail-content--external .cf-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.cf-modal-activity-detail-content--external .cf-modal-activity-detail-pic--clickable:hover .cf-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.cf-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.cf-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cf-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cf-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.cf-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.cf-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.cf-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cf-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.cf-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cf-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.cf-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cf-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cf-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.cf-modal-activity-detail-content--external .cf-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.cf-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.cf-modal-activity-detail-content--external .cf-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cf-modal-activity-detail-content--external .cf-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cf-modal-activity-detail-content--external .cf-modal-activity-detail-document-name {
  color: #E67E22;
}

.cf-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.cf-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.cf-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.cf-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.cf-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.cf-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.cf-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cf-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.cf-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.cf-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.cf-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.cf-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.cf-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cf-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.cf-modal-activity-detail-tab-content--general {
  padding: 0;
}

.cf-modal-activity-detail-tab-content--general .cf-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.cf-modal-activity-detail-tab-content--general > div:not(.cf-modal-item-text-info) {
  padding: 0 1.5rem;
}

.cf-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.cf-modal-activity-detail-tab-content--attachment,
.cf-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.cf-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.cf-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.cf-modal-activity-detail-tab-content--attachment .cf-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.cf-modal-activity-detail-tab-content--attachment .cf-modal-batch-assignment-table-section > .cf-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cf-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.cf-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.cf-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cf-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.cf-modal-activity-detail-content--external .cf-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.cf-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.cf-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.cf-modal-activity-detail-content--external .cf-modal-item-text-info {
  background-color: #FEF5E7;
}

.cf-modal-activity-detail-content--external .cf-modal-task-notes-section {
  background-color: #FEF5E7;
}

.cf-modal-task-notes-section .cf-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cf-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.cf-modal-task-notes-textarea.cf-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.cf-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.cf-modal-task-chat-section > .cf-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cf-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.cf-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cf-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cf-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cf-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cf-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.cf-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.cf-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.cf-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cf-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.cf-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cf-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.cf-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.cf-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.cf-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.cf-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.cf-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cf-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cf-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.cf-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.cf-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.cf-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cf-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.cf-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.cf-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cf-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.cf-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.cf-modal-activity-detail-content--external .cf-modal-task-chat-avatar {
  background-color: #F5B041;
}

.cf-modal-activity-detail-content--external .cf-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.cf-modal-activity-detail-content--external .cf-modal-task-chat-reply-btn {
  color: #E67E22;
}

.cf-modal-activity-detail-content--external .cf-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.cf-modal-dropdown--display .cf-modal-dropdown-item,
.cf-modal-dropdown--display [class*="-item"],
.cf-modal-tags-dropdown--display .cf-modal-tags-dropdown-item,
.cf-modal-baseline-date-dropdown--display .cf-modal-baseline-date-item,
.cf-modal-reference-type-dropdown--display .cf-modal-reference-type-item,
.cf-modal-delivery-priority-dropdown--display .cf-modal-delivery-priority-item,
.cf-modal-organization-dropdown--display .cf-modal-organization-item,
.cf-modal-sales-structure-dropdown--display .cf-modal-sales-structure-item,
.cf-modal-delivery-type-dropdown--display .cf-modal-delivery-type-item,
.cf-modal-sales-channel-dropdown--display .cf-modal-sales-channel-item,
.cf-modal-sales-unit-dropdown--display .cf-modal-sales-unit-item,
.cf-modal-sold-to-party-dropdown--display .cf-modal-sold-to-party-item,
.cf-modal-deliver-to-party-dropdown--display .cf-modal-deliver-to-party-item,
.cf-modal-attention-to-deliver-dropdown--display .cf-modal-attention-to-deliver-item,
.cf-modal-incoterm-dropdown--display .cf-modal-incoterm-item,
.cf-modal-delivery-point-dropdown--display .cf-modal-delivery-point-item,
.cf-modal-shipping-point-dropdown--display .cf-modal-shipping-point-item,
.cf-modal-confirmation-dropdown--display .cf-modal-confirmation-item,
.cf-modal-sales-person-dropdown--display .cf-modal-sales-person-item,
.cf-modal-sales-team-dropdown--display .cf-modal-sales-team-item,
.cf-modal-territory-dropdown--display .cf-modal-territory-item,
.cf-modal-sales-office-dropdown--display .cf-modal-sales-office-item,
.cf-modal-status-dropdown--display .cf-modal-status-item,
.cf-modal-handling-product-dropdown--display .cf-modal-handling-product-item,
.cf-modal-child-uom-dropdown--display .cf-modal-child-uom-item,
.cf-modal-partner-type-dropdown--display .cf-modal-partner-type-item,
.cf-modal-partner-id-dropdown--display .cf-modal-partner-id-item,
.cf-modal-custom-dropdown--display .cf-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.cf-modal-dropdown--display .cf-modal-dropdown-item:hover,
.cf-modal-dropdown--display [class*="-item"]:hover,
.cf-modal-tags-dropdown--display .cf-modal-tags-dropdown-item:hover,
.cf-modal-baseline-date-dropdown--display .cf-modal-baseline-date-item:hover,
.cf-modal-reference-type-dropdown--display .cf-modal-reference-type-item:hover,
.cf-modal-delivery-priority-dropdown--display .cf-modal-delivery-priority-item:hover,
.cf-modal-organization-dropdown--display .cf-modal-organization-item:hover,
.cf-modal-sales-structure-dropdown--display .cf-modal-sales-structure-item:hover,
.cf-modal-delivery-type-dropdown--display .cf-modal-delivery-type-item:hover,
.cf-modal-sales-channel-dropdown--display .cf-modal-sales-channel-item:hover,
.cf-modal-sales-unit-dropdown--display .cf-modal-sales-unit-item:hover,
.cf-modal-sold-to-party-dropdown--display .cf-modal-sold-to-party-item:hover,
.cf-modal-deliver-to-party-dropdown--display .cf-modal-deliver-to-party-item:hover,
.cf-modal-attention-to-deliver-dropdown--display .cf-modal-attention-to-deliver-item:hover,
.cf-modal-incoterm-dropdown--display .cf-modal-incoterm-item:hover,
.cf-modal-delivery-point-dropdown--display .cf-modal-delivery-point-item:hover,
.cf-modal-shipping-point-dropdown--display .cf-modal-shipping-point-item:hover,
.cf-modal-confirmation-dropdown--display .cf-modal-confirmation-item:hover,
.cf-modal-sales-person-dropdown--display .cf-modal-sales-person-item:hover,
.cf-modal-sales-team-dropdown--display .cf-modal-sales-team-item:hover,
.cf-modal-territory-dropdown--display .cf-modal-territory-item:hover,
.cf-modal-sales-office-dropdown--display .cf-modal-sales-office-item:hover,
.cf-modal-status-dropdown--display .cf-modal-status-item:hover,
.cf-modal-handling-product-dropdown--display .cf-modal-handling-product-item:hover,
.cf-modal-child-uom-dropdown--display .cf-modal-child-uom-item:hover,
.cf-modal-partner-type-dropdown--display .cf-modal-partner-type-item:hover,
.cf-modal-partner-id-dropdown--display .cf-modal-partner-id-item:hover,
.cf-modal-custom-dropdown--display .cf-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.cf-modal-dropdown--display [class*="-item--selected"],
.cf-modal-tags-dropdown--display .cf-modal-tags-dropdown-item--selected,
.cf-modal-baseline-date-dropdown--display .cf-modal-baseline-date-item--selected,
.cf-modal-reference-type-dropdown--display .cf-modal-reference-type-item--selected,
.cf-modal-delivery-priority-dropdown--display .cf-modal-delivery-priority-item--selected,
.cf-modal-organization-dropdown--display .cf-modal-organization-item--selected,
.cf-modal-sales-structure-dropdown--display .cf-modal-sales-structure-item--selected,
.cf-modal-delivery-type-dropdown--display .cf-modal-delivery-type-item--selected,
.cf-modal-sales-channel-dropdown--display .cf-modal-sales-channel-item--selected,
.cf-modal-sales-unit-dropdown--display .cf-modal-sales-unit-item--selected,
.cf-modal-sold-to-party-dropdown--display .cf-modal-sold-to-party-item--selected,
.cf-modal-deliver-to-party-dropdown--display .cf-modal-deliver-to-party-item--selected,
.cf-modal-attention-to-deliver-dropdown--display .cf-modal-attention-to-deliver-item--selected,
.cf-modal-incoterm-dropdown--display .cf-modal-incoterm-item--selected,
.cf-modal-delivery-point-dropdown--display .cf-modal-delivery-point-item--selected,
.cf-modal-shipping-point-dropdown--display .cf-modal-shipping-point-item--selected,
.cf-modal-confirmation-dropdown--display .cf-modal-confirmation-item--selected,
.cf-modal-sales-person-dropdown--display .cf-modal-sales-person-item--selected,
.cf-modal-sales-team-dropdown--display .cf-modal-sales-team-item--selected,
.cf-modal-territory-dropdown--display .cf-modal-territory-item--selected,
.cf-modal-sales-office-dropdown--display .cf-modal-sales-office-item--selected,
.cf-modal-status-dropdown--display .cf-modal-status-item--selected,
.cf-modal-handling-product-dropdown--display .cf-modal-handling-product-item--selected,
.cf-modal-child-uom-dropdown--display .cf-modal-child-uom-item--selected,
.cf-modal-partner-type-dropdown--display .cf-modal-partner-type-item--selected,
.cf-modal-partner-id-dropdown--display .cf-modal-partner-id-item--selected,
.cf-modal-custom-dropdown--display .cf-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.cf-modal-dropdown--display [class*="-check"],
.cf-modal-dropdown--display .cf-modal-dropdown-check,
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.cf-modal-dropdown--display [class*="-item-code"],
.cf-modal-dropdown--display [class*="-item-name"],
.cf-modal-dropdown--display [class*="-item-content"],
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-code,
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-name,
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-item,
.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.cf-modal-sold-to-party-dropdown-content--display .cf-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.cf-modal-tags-dropdown--display .cf-modal-tags-item,
.cf-modal-tags-dropdown--display .cf-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-tags-dropdown--display .cf-modal-tags-item:hover {
  background-color: transparent !important;
}

.cf-modal-tags-dropdown--display .cf-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cf-modal-tags-dropdown--display .cf-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item,
.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cf-modal-custom-dropdown-list--display .cf-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Contract/Contract.css ===== */
/* Contract Wrapper - prevent page scroll */
.contract-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Contract Container */
.contract-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.contract-header {
  margin-bottom: 0;
}

.contract-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Contract Control - Exact copy of third-nav-control */
.contract-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.contract-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.contract-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.contract-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.contract-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.contract-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.contract-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.contract-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.contract-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.contract-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.contract-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.contract-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.contract-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.contract-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.contract-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.contract-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.contract-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.contract-layout-dropdown-item:last-child {
  border-bottom: none;
}

.contract-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.contract-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.contract-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.contract-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.contract-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.contract-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.contract-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.contract-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contract-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.contract-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.contract-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.contract-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.contract-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.contract-filter-parameter-wrapper {
  position: relative;
}

.contract-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.contract-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.contract-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.contract-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contract-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.contract-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.contract-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.contract-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.contract-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.contract-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.contract-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.contract-filter-close:hover {
  background-color: #f0f0f0;
}

.contract-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.contract-filter-group {
  margin-bottom: 1rem;
}

.contract-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.contract-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contract-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.contract-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.contract-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.contract-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.contract-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.contract-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contract-filter-org-container {
  flex: 1 1;
  position: relative;
}

.contract-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.contract-filter-org-input:hover {
  border-color: #C2DE54;
}

.contract-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.contract-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.contract-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.contract-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.contract-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.contract-filter-tag-remove:hover {
  color: #000;
}

.contract-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.contract-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.contract-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.contract-filter-org-item:hover {
  background-color: #f5f5f5;
}

.contract-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.contract-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.contract-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.contract-filter-org-code {
  font-weight: 600;
  color: #333;
}

.contract-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.contract-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.contract-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.contract-type-dropdown-item:last-child {
  border-bottom: none;
}

.contract-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.contract-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.contract-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.contract-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Contract Table */
.contract-table {
  animation: contractFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes contractFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contract-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .contract-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .contract-type-dropdown {
    min-width: 11.25rem;
  }

  .contract-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Contract/ContractModal.css ===== */
/* Delivery Order Modal Specific Styles */
.contract-modal {
  overscroll-behavior: contain;
}

.contract-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.ct-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.ct-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.ct-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.ct-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.ct-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.ct-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.ct-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ct-modal-pov-button--external.ct-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ct-modal-pov-button--external .ct-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-pov-button--external .ct-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.ct-modal-pov-caret--open {
  transform: rotate(180deg);
}

.ct-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.ct-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.ct-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.ct-modal-pov-dropdown-item span {
  flex: 1 1;
}

.ct-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.ct-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.ct-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.ct-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.ct-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.ct-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.ct-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.ct-modal-tabs--display .ct-modal-tab {
  color: #666666;
}

.ct-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.ct-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.ct-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.ct-modal-tabs--display .ct-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ct-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.ct-modal-tabs--external .ct-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ct-modal-tabs--external.ct-modal-tabs--display .ct-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ct-modal-tabs--external .ct-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.ct-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.ct-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.ct-modal-action-button span {
  white-space: nowrap;
}

.ct-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.ct-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.ct-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ct-modal-action-button--disabled .ct-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.ct-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.ct-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.ct-modal-left-area--full .ct-modal-back-button {
  transition: width 300ms ease;
}

.ct-modal-left-area--full .ct-modal-back-button:hover {
  width: 3.5rem;
}

.ct-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.ct-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.ct-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ct-modal-content--item {
  padding-bottom: 1rem;
}

.ct-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.ct-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.ct-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.ct-modal-attachment-table-container .ct-modal-detail-table thead,
.ct-modal-attachment-table-container .ct-modal-attachment-table thead {
  box-shadow: none !important;
}

.ct-modal-attachment-table-container .ct-modal-detail-table tr,
.ct-modal-attachment-table-container .ct-modal-attachment-table tr {
  box-shadow: none !important;
}

.ct-modal-attachment-table-container .ct-modal-detail-table tbody tr:last-child,
.ct-modal-attachment-table-container .ct-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ct-modal-attachment-table-container .ct-modal-detail-table tbody tr:last-child td,
.ct-modal-attachment-table-container .ct-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ct-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.ct-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.ct-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.ct-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.ct-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.ct-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.ct-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ct-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.ct-modal-attachment-filename--external {
  color: #E67E22;
}

.ct-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.ct-modal-tab-content--display .ct-modal-attachment-filename--external {
  color: #E67E22;
}

.ct-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.ct-modal-attachment-size {
  color: #666666;
}

.ct-modal-attachment-date {
  color: #666666;
}

.ct-modal-attachment-uploadedby {
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.ct-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ct-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ct-modal-attachment-browse-btn:focus {
  outline: none;
}

.ct-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ct-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ct-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-attachment-browse-btn--disabled .ct-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ct-modal-tab-content--display .ct-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.ct-modal-tab-content--display .ct-modal-attachment-filename.ct-modal-attachment-filename--external {
  color: #E67E22;
}

.ct-modal-tab-content--display .ct-modal-attachment-type {
  color: #666666;
}

.ct-modal-tab-content--display .ct-modal-attachment-size {
  color: #666666;
}

.ct-modal-tab-content--display .ct-modal-attachment-date {
  color: #666666;
}

.ct-modal-tab-content--display .ct-modal-attachment-uploadedby {
  color: #333333;
}

.ct-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.ct-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.ct-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.ct-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ct-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.ct-modal-tab-content--display .ct-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.ct-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ct-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.ct-modal-tab-content--display .ct-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.ct-modal-basic-section--external .ct-modal-form-input:focus {
  border-color: #F5B041;
}

.ct-modal-basic-section--external .ct-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.ct-modal-tab-content--external .ct-modal-form-input:focus,
.ct-modal-tab-content--external .ct-modal-form-textarea:focus,
.ct-modal-tab-content--external .ct-modal-custom-dropdown-input:focus,
.ct-modal-tab-content--external .ct-modal-date-input:focus,
.ct-modal-tab-content--external .ct-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.ct-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.ct-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.ct-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.ct-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.ct-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ct-modal-tab-content--display .ct-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.ct-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.ct-modal-tab-content--display .ct-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.ct-modal-partner-header-section--external .ct-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.ct-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ct-modal-tab-content--display .ct-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.ct-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.ct-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.ct-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.ct-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ct-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.ct-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.ct-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.ct-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.ct-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.ct-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.ct-modal-chat-section {
  padding: 1.5rem 0;
}

.ct-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ct-modal-chat-header h3 {
  margin: 0;
}

.ct-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.ct-modal-chat-new-thread .ct-modal-form-textarea {
  min-height: 5rem;
}

.ct-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.ct-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ct-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ct-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.ct-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ct-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.ct-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.ct-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.ct-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ct-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.ct-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.ct-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.ct-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ct-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ct-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-chat-user-name {
  color: #333333 !important;
}

.ct-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.ct-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.ct-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.ct-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.ct-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.ct-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.ct-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ct-modal-chat-reply-btn:hover .ct-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ct-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.ct-modal-chat-replies .ct-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.ct-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.ct-modal-chat-reply-input .ct-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.ct-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ct-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.ct-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.ct-modal-tab-content--display .ct-modal-chat-thread {
  border-color: #E5E5E5;
}

.ct-modal-tab-content--display .ct-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display .ct-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-chat-user-position {
  background-color: #E8F5E9;
}

.ct-modal-tab-content--display .ct-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.ct-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ct-modal-tab-content--display .ct-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ct-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.ct-modal-notes-header-section--external .ct-modal-form-textarea:focus {
  border-color: #F5B041;
}

.ct-modal-chat-section--external .ct-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.ct-modal-chat-avatar--external {
  background-color: #F5B041;
}

.ct-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.ct-modal-tab-content--display .ct-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-thread {
  border-color: #E5E5E5;
}

.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-user-name {
  color: #333333 !important;
}

.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-user-position {
  background-color: #FDE8D0;
}

.ct-modal-tab-content--display.ct-modal-tab-content--external .ct-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.ct-modal-chat-reply-btn--external {
  color: #E67E22;
}

.ct-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.ct-modal-chat-reply-btn--external .ct-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ct-modal-chat-reply-btn--external:hover .ct-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.ct-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ct-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.ct-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.ct-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.ct-modal-chat-textarea-wrapper {
  position: relative;
}

.ct-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.ct-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ct-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.ct-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.ct-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.ct-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.ct-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ct-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.ct-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.ct-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.ct-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ct-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.ct-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.ct-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.ct-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.ct-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.ct-modal-tab-content--display .ct-modal-table-empty-state-title {
  color: #666666;
}

.ct-modal-tab-content--display .ct-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.ct-modal-partner-header-section + .ct-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.ct-modal-partner-header-section + .ct-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.ct-modal-partner-header-section + .ct-modal-item-content-section .ct-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.ct-modal-partner-header-section + .ct-modal-item-content-section .ct-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.ct-modal-partner-header-section + .ct-modal-item-content-section .ct-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.ct-modal-partner-header-section + .ct-modal-item-content-section .ct-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.ct-modal-partner-header-section + .ct-modal-item-content-section .ct-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.ct-modal-partner-table-container .ct-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.ct-modal-partner-table-container .ct-modal-partner-table th:last-child,
.ct-modal-partner-table-container .ct-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.ct-modal-detail-table-container--external.ct-modal-partner-table-container .ct-modal-partner-table th:last-child,
.ct-modal-detail-table-container--external.ct-modal-partner-table-container .ct-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.ct-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ct-modal-item-header-section .ct-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-tab-content--display .ct-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.ct-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.ct-modal-tab-content--display .ct-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.ct-modal-item-header-section--external .ct-modal-form-input:focus {
  border-color: #F5B041;
}

.ct-modal-item-header-section--external .ct-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.ct-modal-detail-subtabs--external .ct-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.ct-modal-detail-subtabs--external .ct-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.ct-modal-detail-subtabs--external .ct-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.ct-modal-tab-content--display .ct-modal-detail-subtabs--external .ct-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ct-modal-tab-content--display .ct-modal-detail-subtabs--external .ct-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.ct-modal-tab-content.ct-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.ct-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.ct-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.ct-modal-item-table-wrapper .ct-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.ct-modal-item-table-wrapper .ct-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.ct-modal-item-table-wrapper--terms .ct-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.ct-modal-tab-content--external.ct-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.ct-modal-tab-content--external .ct-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-tab-content--external .ct-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-tab-content--external .ct-modal-item-table-wrapper--terms .ct-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.ct-modal-tab-content--external .ct-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.ct-modal-item-table-wrapper--terms .ct-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.ct-modal-item-table-wrapper--terms .ct-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ct-modal-item-table-wrapper--terms .ct-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.ct-modal-item-table-wrapper--terms .ct-modal-detail-table tr {
  height: auto;
}

.ct-modal-item-table-wrapper--terms .ct-modal-detail-table-container .ct-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.ct-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.ct-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.ct-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ct-modal-volume-input-group .ct-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ct-modal-volume-input-group .ct-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ct-modal-volume-input-group .ct-modal-sla-input-wrapper .ct-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.ct-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ct-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ct-modal-volume-uom-list--display .ct-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-volume-uom-list--display .ct-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.ct-modal-volume-uom-list--display .ct-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-volume-uom-list--display .ct-modal-volume-uom-check {
  color: #999999 !important;
}

.ct-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.ct-modal-volume-uom-dropdown--display .ct-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ct-modal-volume-uom-dropdown--display .ct-modal-volume-uom-item:hover {
  background-color: transparent;
}

.ct-modal-volume-uom-dropdown--display .ct-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ct-modal-volume-uom-dropdown--display .ct-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.ct-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ct-modal-weight-input-group .ct-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ct-modal-weight-input-group .ct-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ct-modal-weight-input-group .ct-modal-sla-input-wrapper .ct-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.ct-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ct-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-weight-uom-input::placeholder {
  color: #999999;
}

.ct-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.ct-modal-weight-uom-dropdown--display .ct-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ct-modal-weight-uom-dropdown--display .ct-modal-weight-uom-item:hover {
  background-color: transparent;
}

.ct-modal-weight-uom-dropdown--display .ct-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ct-modal-weight-uom-dropdown--display .ct-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.ct-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.ct-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.ct-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.ct-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.ct-modal-form-input--display ~ .ct-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.ct-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.ct-modal-form-input--display {
  cursor: default;
}

.ct-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.ct-modal-form-label--display {
  color: #333333 !important;
}

.ct-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.ct-modal-form-label--display .ct-modal-required {
  color: #FF4D4F;
}

.ct-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.ct-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.ct-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.ct-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.ct-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.ct-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.ct-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ct-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.ct-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.ct-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.ct-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.ct-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.ct-modal-sla-spinner-btn:disabled .ct-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ct-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sla-spinner-btn:hover .ct-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.ct-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.ct-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.ct-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.ct-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.ct-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.ct-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.ct-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.ct-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.ct-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.ct-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.ct-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.ct-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.ct-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.ct-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.ct-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.ct-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.ct-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.ct-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.ct-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.ct-modal-stage-dropdown-input--display .ct-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.ct-modal-stage-dropdown-input--display .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.ct-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.ct-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.ct-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.ct-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.ct-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ct-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.ct-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.ct-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.ct-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.ct-modal-accordion-header--display {
  color: #333333;
}

.ct-modal-accordion-header--display.ct-modal-accordion-header--active {
  color: #333333;
}

.ct-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.ct-modal-accordion-header--display .ct-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.ct-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.ct-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.ct-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.ct-modal-stage-main-title--display {
  color: #138B4C;
}

.ct-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-stage-title--display {
  color: #333333;
}

.ct-modal-stage-current {
  margin-bottom: 1.875rem;
}

.ct-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.ct-modal-stage-label--display {
  color: #666666;
}

.ct-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-stage-subtitle--display {
  color: #333333;
}

.ct-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.ct-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.ct-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.ct-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.ct-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.ct-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ct-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.ct-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.ct-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ct-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.ct-modal-download-button:active {
  background-color: #E0E0E0;
}

.ct-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-download-button--display .ct-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.ct-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.ct-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.ct-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.ct-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.ct-modal-timeline-item--display .ct-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.ct-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.ct-modal-timeline-badge--inactive .ct-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.ct-modal-timeline-item--display .ct-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.ct-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.ct-modal-timeline-item--display .ct-modal-timeline-line {
  background-color: #138B4C;
}

.ct-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.ct-modal-timeline-status--display {
  color: #333333;
}

.ct-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.ct-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.ct-modal-timeline-date--display {
  color: #666666;
}

.ct-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.ct-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.ct-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.ct-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ct-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ct-modal-timeline-document--display {
  color: #138B4C;
}

.ct-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.ct-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.ct-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.ct-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.ct-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.ct-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.ct-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.ct-modal-activity-item--display .ct-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.ct-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.ct-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.ct-modal-activity-item--display .ct-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.ct-modal-activity-item--display .ct-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.ct-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.ct-modal-activity-item--display .ct-modal-activity-line {
  background-color: #138B4C;
}

.ct-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.ct-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.ct-modal-activity-type--display {
  color: #333333;
}

.ct-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.ct-modal-activity-header--display {
  color: #666666;
}

.ct-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.ct-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.ct-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.ct-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.ct-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.ct-modal-activity-change--display .ct-modal-activity-field {
  color: #333333;
}

.ct-modal-activity-change--display .ct-modal-activity-new {
  color: #138B4C;
}

.ct-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.ct-modal-activity-date--display {
  color: #666666;
}

.ct-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.ct-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.ct-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ct-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ct-modal-activity-more--display {
  color: #138B4C;
}

.ct-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-activity-more--display .ct-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.ct-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.ct-modal-reference-table thead {
  background-color: #F9F9F9;
}

.ct-modal-tab-content--display .ct-modal-reference-table thead {
  background-color: #FAFAFA;
}

.ct-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.ct-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.ct-modal-tab-content--display .ct-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.ct-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.ct-modal-tab-content--display .ct-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.ct-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.ct-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.ct-modal-detail-subtab:hover {
  color: #138B4C;
}

.ct-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.ct-modal-tab-content--display .ct-modal-detail-subtab {
  color: #666666;
}

.ct-modal-tab-content--display .ct-modal-detail-subtab:hover {
  color: #138B4C;
}

.ct-modal-tab-content--display .ct-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ct-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.ct-modal-tab-content.ct-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.ct-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-detail-delivery-wrapper .ct-modal-form-label {
  flex-shrink: 0;
}

.ct-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.ct-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.ct-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ct-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ct-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ct-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ct-modal-detail-table-container .ct-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ct-modal-detail-table-container .ct-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ct-modal-detail-table-container .ct-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.ct-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.ct-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ct-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.ct-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.ct-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ct-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.ct-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-detail-table th,
.ct-modal-tab-content--display .ct-modal-packaging-table th,
.ct-modal-tab-content--display .ct-modal-partner-table th,
.ct-modal-tab-content--display .ct-modal-attachment-table th {
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-detail-table td,
.ct-modal-tab-content--display .ct-modal-packaging-table td,
.ct-modal-tab-content--display .ct-modal-partner-table td,
.ct-modal-tab-content--display .ct-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-description,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-text,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-batch,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-serial,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-so-item,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-package-no,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-product-type,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-product-group,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-product-category,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ct-modal-tab-content--display .ct-modal-detail-table tbody tr:hover .ct-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-description,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-text,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-batch,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-serial,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-so-item,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-package-no,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-type,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-group,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-category,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .ct-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.ct-modal-detail-table-container .ct-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.ct-modal-detail-table-container .ct-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.ct-modal-detail-table-container--external .ct-modal-detail-table td {
  color: #555555 !important;
}

.ct-modal-detail-table-container .ct-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.ct-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.ct-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ct-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.ct-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.ct-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.ct-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.ct-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.ct-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.ct-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ct-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ct-modal-detail-table tbody tr:hover .detail-table-description,
.ct-modal-detail-table tbody tr:hover .detail-table-text,
.ct-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ct-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ct-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ct-modal-detail-table tbody tr:hover .detail-table-batch,
.ct-modal-detail-table tbody tr:hover .detail-table-serial,
.ct-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ct-modal-detail-table tbody tr:hover .detail-table-so-item,
.ct-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ct-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ct-modal-detail-table tbody tr:hover .detail-table-package-no,
.ct-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ct-modal-detail-table tbody tr:hover .detail-table-product-type,
.ct-modal-detail-table tbody tr:hover .detail-table-product-group,
.ct-modal-detail-table tbody tr:hover .detail-table-product-category,
.ct-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ct-modal-detail-table tbody tr:hover .ct-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-description,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-text,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-batch,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-serial,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-so-item,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-package-no,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-type,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-group,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-category,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .ct-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.ct-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ct-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.ct-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.ct-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.ct-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.ct-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ct-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.ct-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ct-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.ct-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.ct-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.ct-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.ct-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.ct-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.ct-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.ct-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.ct-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.ct-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ct-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.ct-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.ct-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.ct-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ct-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.ct-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ct-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.ct-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ct-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ct-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ct-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ct-modal-add-item-btn--disabled .ct-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ct-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.ct-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.ct-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.ct-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ct-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ct-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.ct-modal-sales-order-table-container .ct-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.ct-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ct-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ct-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.ct-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.ct-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.ct-modal-table-input:focus {
  outline: none;
}

.ct-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.ct-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.ct-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ct-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.ct-modal-tags-container {
  position: relative;
  width: 100%;
}

.ct-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ct-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ct-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.ct-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.ct-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.ct-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.ct-modal-tags-input--display .ct-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.ct-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.ct-modal-tag-remove:hover {
  color: #333333;
}

.ct-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.ct-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ct-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.ct-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.ct-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.ct-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.ct-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.ct-modal-status-container {
  position: relative;
  width: 100%;
}

.ct-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ct-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ct-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.ct-modal-status-placeholder {
  color: #999999;
}

.ct-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.ct-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ct-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ct-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-status-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-status-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.ct-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ct-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.ct-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.ct-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.ct-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.ct-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.ct-modal-status-input--display .ct-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.ct-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.ct-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ct-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ct-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.ct-modal-stage-dropdown-placeholder {
  color: #999999;
}

.ct-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.ct-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ct-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ct-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.ct-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.ct-modal-stage--created .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.ct-modal-stage--approved .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.ct-modal-stage--processed .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.ct-modal-stage--picked .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.ct-modal-stage--packed .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.ct-modal-stage--planned .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.ct-modal-stage--loaded .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.ct-modal-stage--issued .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.ct-modal-stage--departed .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.ct-modal-stage--arrived .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.ct-modal-stage--unloaded .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.ct-modal-stage--delivered .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.ct-modal-stage--confirmed .ct-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.ct-modal-stage--billed .ct-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.ct-modal-stage-dropdown-input .ct-modal-stage,
.ct-modal-stage-dropdown-item .ct-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.ct-modal-baseline-date-dropdown {
  position: relative;
}

.ct-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ct-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.ct-modal-reference-type-dropdown {
  position: relative;
}

.ct-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ct-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.ct-modal-delivery-priority-dropdown {
  position: relative;
}

.ct-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ct-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.ct-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.ct-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.ct-modal-delivery-priority-separator {
  color: #666666;
}

.ct-modal-delivery-priority-name {
  color: #333333;
}

.ct-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.ct-modal-organization-dropdown {
  position: relative;
}

.ct-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ct-modal-organization-dropdown-content--display .ct-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-organization-dropdown-content--display .ct-modal-organization-item:hover {
  background-color: transparent !important;
}

.ct-modal-organization-dropdown-content--display .ct-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-organization-dropdown-content--display .ct-modal-organization-code,
.ct-modal-organization-dropdown-content--display .ct-modal-organization-name,
.ct-modal-organization-dropdown-content--display .ct-modal-organization-separator {
  color: #999999 !important;
}

.ct-modal-organization-dropdown-content--display .ct-modal-organization-check {
  color: #999999 !important;
}

.ct-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-organization-separator {
  color: #999999;
}

.ct-modal-organization-name {
  color: #333333;
}

.ct-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.ct-modal-sales-structure-dropdown {
  position: relative;
}

.ct-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.ct-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ct-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-sales-structure-separator {
  color: #999999;
}

.ct-modal-sales-structure-name {
  color: #333333;
}

.ct-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.ct-modal-delivery-type-dropdown {
  position: relative;
}

.ct-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.ct-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ct-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ct-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ct-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ct-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.ct-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.ct-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-delivery-type-separator {
  color: #999999;
}

.ct-modal-delivery-type-description {
  color: #333333;
}

.ct-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.ct-modal-content::-webkit-scrollbar,
.ct-modal-stage-content::-webkit-scrollbar,


.ct-modal-content::-webkit-scrollbar-track,
.ct-modal-stage-content::-webkit-scrollbar-track,


.ct-modal-content::-webkit-scrollbar-thumb,
.ct-modal-stage-content::-webkit-scrollbar-thumb,


.ct-modal-content::-webkit-scrollbar-thumb:hover,
.ct-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.ct-modal-sales-channel-dropdown {
  position: relative;
}

.ct-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ct-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-sales-channel-separator {
  color: #999999;
}

.ct-modal-sales-channel-name {
  color: #333333;
}

.ct-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.ct-modal-sales-unit-dropdown {
  position: relative;
}

.ct-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ct-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-sales-unit-separator {
  color: #999999;
}

.ct-modal-sales-unit-name {
  color: #333333;
}

.ct-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.ct-modal-organization-item--placeholder,
.ct-modal-sales-structure-item--placeholder,
.ct-modal-sales-channel-item--placeholder,
.ct-modal-sales-unit-item--placeholder,
.ct-modal-territory-item--placeholder,
.ct-modal-sales-office-item--placeholder,
.ct-modal-sold-to-party-item--placeholder,
.ct-modal-deliver-to-party-item--placeholder,
.ct-modal-attention-to-deliver-item--placeholder,
.ct-modal-incoterm-item--placeholder,
.ct-modal-delivery-point-item--placeholder,
.ct-modal-shipping-point-item--placeholder,
.ct-modal-sales-order-item--placeholder,
.ct-modal-sales-team-item--placeholder,
.ct-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.ct-modal-organization-item--placeholder:hover,
.ct-modal-sales-structure-item--placeholder:hover,
.ct-modal-sales-channel-item--placeholder:hover,
.ct-modal-sales-unit-item--placeholder:hover,
.ct-modal-territory-item--placeholder:hover,
.ct-modal-sales-office-item--placeholder:hover,
.ct-modal-sold-to-party-item--placeholder:hover,
.ct-modal-deliver-to-party-item--placeholder:hover,
.ct-modal-attention-to-deliver-item--placeholder:hover,
.ct-modal-incoterm-item--placeholder:hover,
.ct-modal-delivery-point-item--placeholder:hover,
.ct-modal-shipping-point-item--placeholder:hover,
.ct-modal-sales-order-item--placeholder:hover,
.ct-modal-sales-team-item--placeholder:hover,
.ct-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.ct-modal-sold-to-party-dropdown {
  position: relative;
}

.ct-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-sold-to-party-input:focus,
.ct-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.ct-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ct-modal-sold-to-party-separator {
  color: #999999;
}

.ct-modal-sold-to-party-name {
  color: #333333;
}

.ct-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.ct-modal-deliver-to-party-dropdown {
  position: relative;
}

.ct-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ct-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ct-modal-deliver-to-party-separator {
  color: #999999;
}

.ct-modal-deliver-to-party-name {
  color: #333333;
}

.ct-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.ct-modal-attention-to-deliver-dropdown {
  position: relative;
}
.ct-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.ct-modal-attention-to-deliver-separator {
  color: #999999;
}
.ct-modal-attention-to-deliver-name {
  color: #333333;
}
.ct-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.ct-modal-incoterm-dropdown {
  position: relative;
}
.ct-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.ct-modal-incoterm-separator {
  color: #999999;
}
.ct-modal-incoterm-name {
  color: #333333;
}
.ct-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.ct-modal-delivery-point-dropdown {
  position: relative;
}
.ct-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ct-modal-delivery-point-separator {
  color: #999999;
}
.ct-modal-delivery-point-name {
  color: #333333;
}
.ct-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.ct-modal-shipping-point-dropdown {
  position: relative;
}
.ct-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ct-modal-shipping-point-separator {
  color: #999999;
}
.ct-modal-shipping-point-name {
  color: #333333;
}
.ct-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.ct-modal-sales-order-dropdown {
  position: relative;
}
.ct-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.ct-modal-sales-order-separator {
  color: #999999;
}
.ct-modal-sales-order-name {
  color: #333333;
}
.ct-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.ct-modal-date-picker {
  position: relative;
}
.ct-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.ct-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.ct-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.ct-modal-date-input::-webkit-datetime-edit-text,
.ct-modal-date-input::-webkit-datetime-edit-month-field,
.ct-modal-date-input::-webkit-datetime-edit-day-field,
.ct-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.ct-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.ct-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.ct-modal-sales-person-dropdown {
  position: relative;
}
.ct-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.ct-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.ct-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.ct-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ct-modal-sales-person-separator {
  color: #999999;
}
.ct-modal-sales-person-name {
  color: #333333;
}
.ct-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.ct-modal-sales-team-dropdown {
  position: relative;
}
.ct-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ct-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ct-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ct-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ct-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ct-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ct-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.ct-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.ct-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.ct-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ct-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.ct-modal-sales-team-separator {
  color: #999999;
}
.ct-modal-sales-team-name {
  color: #333333;
}
.ct-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ct-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.ct-modal-territory-dropdown {
  position: relative;
}

.ct-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ct-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-territory-separator {
  color: #999999;
}

.ct-modal-territory-name {
  color: #333333;
}

.ct-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.ct-modal-sales-office-dropdown {
  position: relative;
}

.ct-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ct-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ct-modal-sales-office-separator {
  color: #999999;
}

.ct-modal-sales-office-name {
  color: #333333;
}

.ct-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.ct-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ct-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.ct-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.ct-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ct-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ct-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ct-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-table-dropdown-input:focus {
  outline: none;
}

.ct-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ct-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.ct-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.ct-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.ct-modal-delivery-type-list::-webkit-scrollbar,
.ct-modal-stage-dropdown-list::-webkit-scrollbar,
.ct-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ct-modal-delivery-type-list::-webkit-scrollbar-track,
.ct-modal-stage-dropdown-list::-webkit-scrollbar-track,
.ct-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-delivery-type-list::-webkit-scrollbar-thumb,
.ct-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.ct-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ct-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.ct-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.ct-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.ct-modal-wrapper,
.ct-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.contract-modal,
.ct-modal-wrapper,
.ct-modal-wrapper *,
.ct-modal-content,
.ct-modal-data-flow-2-container,
.ct-modal-data-flow-container,
.ct-modal-calendar-container,
.ct-modal-calendar-milestones-list,
.ct-modal-calendar-view,
.ct-modal-calendar-yearly,
.ct-modal-calendar-monthly,
.ct-modal-calendar-weekly,
.ct-modal-calendar-weekly-body,
.ct-modal-calendar-daily,
.ct-modal-calendar-daily-timeline,
.ct-modal-calendar-grid,
.ct-modal-calendar-grid-body,
.ct-modal-detail-table-container,
.ct-modal-item-table-wrapper,
.ct-modal-attachment-table-container,
.ct-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.ct-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ct-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ct-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.ct-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.ct-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.ct-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.ct-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.ct-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.ct-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-tab-content--display .ct-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.ct-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-tab-content--display .ct-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ct-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ct-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.ct-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) {
  font-weight: 600;
}

.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) .ct-modal-packaging-input,
.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) .ct-modal-packaging-input--display,
.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) .ct-modal-handling-product-input,
.ct-modal-packaging-row--unassigned:not(.ct-modal-packaging-row--expanded) .ct-modal-handling-product-input--display {
  font-weight: 600;
}

.ct-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.ct-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row td.ct-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row td.ct-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row td.ct-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td.ct-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded td.ct-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row--expanded:hover td.ct-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display,
.ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display,
.ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.ct-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.ct-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-tab-content--display .ct-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.ct-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-tab-content--display .ct-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ct-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.ct-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.ct-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.ct-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.ct-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.ct-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.ct-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.ct-modal-packaging-detail-table th:first-child,
.ct-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.ct-modal-packaging-detail-table th:nth-child(2),
.ct-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.ct-modal-packaging-detail-table th:nth-child(3),
.ct-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.ct-modal-packaging-detail-table td:nth-child(4),
.ct-modal-packaging-detail-table td:nth-child(6),
.ct-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.ct-modal-packaging-detail-table td:nth-child(5),
.ct-modal-packaging-detail-table td:nth-child(7),
.ct-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.ct-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.ct-modal-tab-content--display .ct-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display .ct-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.ct-modal-tab-content--display .ct-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.ct-modal-tab-content--display .ct-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.ct-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.ct-modal-packaging-table td:last-child,
.ct-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.ct-modal-packaging-table td:last-child .ct-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.ct-modal-detail-table-container--external .ct-modal-packaging-table th:last-child,
.ct-modal-detail-table-container--external .ct-modal-packaging-table td.ct-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.ct-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.ct-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ct-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ct-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.ct-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.ct-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.ct-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.ct-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.ct-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ct-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.ct-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.ct-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.ct-modal-packaging-child-table tr {
  border: none !important;
}

.ct-modal-packaging-child-table thead,
.ct-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.ct-modal-packaging-child-table th:first-child,
.ct-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.ct-modal-packaging-child-table th:nth-child(2),
.ct-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.ct-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.ct-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.ct-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.ct-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.ct-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.ct-modal-packaging-child-table th:nth-child(3),
.ct-modal-packaging-child-table td:nth-child(3),
.ct-modal-packaging-child-table th:nth-child(4),
.ct-modal-packaging-child-table td:nth-child(4),
.ct-modal-packaging-child-table th:nth-child(5),
.ct-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.ct-modal-packaging-child-table th:nth-child(6),
.ct-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.ct-modal-packaging-child-table th:nth-child(7),
.ct-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.ct-modal-detail-table-container--external .ct-modal-packaging-child-table th:last-child,
.ct-modal-detail-table-container--external .ct-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.ct-modal-packaging-child-table td:last-child .ct-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.ct-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.ct-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ct-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.ct-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.ct-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row {
  transition: none !important;
}

.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display,
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display:focus,
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display,
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display:focus,
.ct-modal-tab-content--display .ct-modal-detail-table-container .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display:focus,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display:focus,
.ct-modal-tab-content--display .ct-modal-detail-table-container--external .ct-modal-packaging-table tbody tr.ct-modal-packaging-row:hover td .ct-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.ct-modal-detail-table-container--external .ct-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.ct-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ct-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ct-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.ct-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ct-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.ct-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.ct-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.ct-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.ct-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.ct-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.ct-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.ct-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.ct-modal-detail-table-container--external .ct-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.ct-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-item--display {
  color: #999999 !important;
}

.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-code,
.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-name,
.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-separator {
  color: #999999 !important;
}

.ct-modal-handling-product-dropdown-content--display .ct-modal-handling-product-check {
  color: #999999 !important;
}

.ct-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.ct-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.ct-modal-handling-product-dropdown-content--narrow .ct-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.ct-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.ct-modal-packaging-detail-table .ct-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.ct-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.ct-modal-detail-table-container--dropdown-open .ct-modal-detail-table {
  overflow: visible;
}

.ct-modal-detail-table-container--dropdown-open .ct-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.ct-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ct-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ct-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.ct-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.ct-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.ct-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.ct-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.ct-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.ct-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.ct-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ct-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.ct-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.ct-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.ct-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.ct-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.ct-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.ct-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.ct-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ct-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.ct-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.ct-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-item:hover {
  background-color: transparent;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-item--placeholder {
  display: none;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-code,
.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-name,
.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-separator {
  color: #555555;
}

.ct-modal-handling-product-dropdown-content--view-only .ct-modal-handling-product-check {
  color: #888888;
}

.ct-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.ct-modal-handling-product-separator {
  color: #999999;
}

.ct-modal-handling-product-name {
  color: #333333;
}

.ct-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ct-modal-handling-product-item--placeholder {
  cursor: default;
}

.ct-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.ct-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.ct-modal-detail-table td:has(.ct-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.ct-modal-detail-table td .ct-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.ct-modal-detail-table td .ct-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.ct-modal-detail-table td .ct-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.ct-modal-detail-table td .ct-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.ct-modal-detail-table td .ct-modal-handling-product-input--display,
.ct-modal-detail-table td .ct-modal-handling-product-input--display:focus,
.ct-modal-detail-table td .ct-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display,
.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display:focus,
.ct-modal-detail-table-container .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display:focus,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover td .ct-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.ct-modal-detail-table td .ct-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.ct-modal-detail-table td .ct-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.ct-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ct-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ct-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.ct-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-table-text-icon-btn--filled:not(.ct-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.ct-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.ct-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ct-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.ct-modal-table-text-icon-btn--display.ct-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.ct-modal-table-text-icon-btn--display.ct-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-table-text-icon-btn--display.ct-modal-table-text-icon-btn--external.ct-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.ct-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.ct-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.ct-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ct-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.ct-modal-serial-assignment-btn {
  width: 10.625rem;
}

.ct-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.ct-modal-batch-assignment-btn--filled .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.ct-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.ct-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.ct-modal-batch-assignment-btn--display .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-batch-assignment-btn--display.ct-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ct-modal-batch-assignment-btn--display.ct-modal-batch-assignment-btn--filled .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.ct-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.ct-modal-secured-qty-btn.ct-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.ct-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.ct-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.ct-modal-secured-qty-btn--grey .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.ct-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ct-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.ct-modal-batch-assignment-btn--partial .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.ct-modal-batch-assignment-btn--display.ct-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ct-modal-batch-assignment-btn--display.ct-modal-batch-assignment-btn--partial .ct-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.ct-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.ct-modal-secured-qty-modal .ct-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.ct-modal-secured-qty-modal .ct-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ct-modal-secured-qty-modal.ct-modal-batch-assignment-modal--display .ct-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.ct-modal-secured-qty-modal .ct-modal-item-text-content {
  overflow-x: hidden;
}

.ct-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.ct-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.ct-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ct-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.ct-modal-batch-assignment-modal--display .ct-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ct-modal-batch-assignment-modal--display .ct-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.ct-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.ct-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.ct-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.ct-modal-secured-qty-lock-btn--open .ct-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.ct-modal-secured-qty-lock-btn--locked .ct-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.ct-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.ct-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.ct-modal-batch-assignment-modal .ct-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.ct-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.ct-modal-batch-assignment-modal .ct-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.ct-modal-batch-assignment-modal .ct-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.ct-modal-batch-assignment-modal.ct-modal-batch-assignment-modal--display .ct-modal-item-text-info {
  background-color: #F2F8EA;
}

.ct-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ct-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.ct-modal-batch-assignment-info-group {
  flex: 1 1;
}

.ct-modal-batch-assignment-info-group .ct-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ct-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.ct-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ct-modal-batch-assignment-table-section .ct-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ct-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.ct-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ct-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ct-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ct-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.ct-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.ct-modal-batch-assignment-table th,
.ct-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.ct-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.ct-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.ct-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ct-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.ct-modal-batch-assignment-table tbody td:has(.ct-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.ct-modal-batch-assignment-table tbody td:has(.ct-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.ct-modal-batch-assignment-table tbody td:nth-child(2),
.ct-modal-batch-assignment-table tbody td:nth-child(3),
.ct-modal-batch-assignment-table tbody td:nth-child(4),
.ct-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.ct-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.ct-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ct-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ct-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.ct-modal-batch-assignment-modal--display .ct-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.ct-modal-batch-assignment-modal--display .ct-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ct-modal-batch-assignment-modal--display .ct-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-batch-assignment-modal--display .ct-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.ct-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.ct-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.ct-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.ct-modal-batch-assignment-table .ct-modal-placeholder-text {
  color: #CCCCCC;
}

.ct-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ct-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.ct-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ct-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.ct-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.ct-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.ct-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.ct-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.ct-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ct-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.ct-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.ct-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.ct-modal-batch-assignment-table td.batch-table-frozen-batch,
table.ct-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.ct-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ct-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.ct-modal-batch-assignment-table th.batch-table-frozen-assign,
table.ct-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.ct-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.ct-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.ct-modal-item-text-info {
  margin-bottom: 1rem;
}

.ct-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ct-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.ct-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ct-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.ct-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.ct-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ct-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.ct-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-item-text-modal .modal-header .modal-title,
.ct-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.ct-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.ct-modal-item-text-label--display {
  color: #333333;
}

.ct-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.ct-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.ct-modal-item-text-modal .ct-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.ct-modal-item-text-modal .ct-modal-item-text-textarea-wrapper .ct-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.ct-modal-item-text-textarea {
  overflow-y: auto !important;
}

.ct-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.ct-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ct-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.ct-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.ct-modal-add-do-item-modal .ct-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.ct-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ct-modal-add-do-item-dropdown-section .ct-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ct-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ct-modal-add-do-item-table-section .ct-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.ct-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.ct-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.ct-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ct-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ct-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.ct-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ct-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.ct-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.ct-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.ct-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.ct-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.ct-modal-detail-table td:first-child .ct-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.ct-modal-detail-table td:first-child .ct-modal-partner-type-input {
  padding-left: 0.625rem;
}

.ct-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ct-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ct-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ct-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ct-modal-partner-type-dropdown--display .ct-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ct-modal-partner-type-dropdown-content--display .ct-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-partner-type-dropdown-content--display .ct-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.ct-modal-partner-type-dropdown-content--display .ct-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-partner-type-dropdown-content--display .ct-modal-partner-type-check {
  color: #999999 !important;
}

.ct-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ct-modal-partner-type-dropdown--display .ct-modal-partner-type-value {
  color: #555555;
}

.ct-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ct-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.ct-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.ct-modal-partner-type-item--placeholder {
  cursor: default;
}

.ct-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.ct-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ct-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.ct-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.ct-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ct-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ct-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ct-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ct-modal-partner-id-dropdown--display .ct-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-code,
.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-name,
.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-separator {
  color: #999999 !important;
}

.ct-modal-partner-id-dropdown-content--display .ct-modal-partner-id-check {
  color: #999999 !important;
}

.ct-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ct-modal-partner-id-dropdown--display .ct-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.ct-modal-detail-table tbody tr:hover .ct-modal-partner-type-dropdown--display .ct-modal-partner-type-input-wrapper,
.ct-modal-detail-table tbody tr:hover .ct-modal-partner-id-dropdown--display .ct-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .ct-modal-partner-type-dropdown--display .ct-modal-partner-type-input-wrapper,
.ct-modal-detail-table-container--external .ct-modal-detail-table tbody tr:hover .ct-modal-partner-id-dropdown--display .ct-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.ct-modal-partner-type-arrow--external {
  visibility: hidden;
}

.ct-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.ct-modal-partner-type-dropdown--external .ct-modal-partner-type-value {
  color: #555555;
}

.ct-modal-partner-id-dropdown--external .ct-modal-partner-id-value {
  color: #555555;
}

.ct-modal-detail-table-container--external .ct-modal-detail-table td.ct-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.ct-modal-partner-header-section--external .ct-modal-form-input--display {
  color: #555555;
}

.ct-modal-detail-table td.ct-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.ct-modal-tab-content--display .ct-modal-detail-table td.ct-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.ct-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ct-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ct-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ct-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.ct-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.ct-modal-partner-id-item--placeholder {
  cursor: default;
}

.ct-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.ct-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.ct-modal-partner-id-separator {
  color: #999999;
}

.ct-modal-partner-id-name {
  color: #666666;
}

.ct-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ct-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.ct-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.ct-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ct-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ct-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ct-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ct-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ct-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ct-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.ct-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.ct-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.ct-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.ct-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.ct-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ct-modal-data-flow-stage--completed .ct-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ct-modal-data-flow-stage--active .ct-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ct-modal-data-flow-stage--completed .ct-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-data-flow-stage--active .ct-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.ct-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.ct-modal-data-flow-stage--completed .ct-modal-data-flow-stage-label {
  color: #138B4C;
}

.ct-modal-data-flow-stage--active .ct-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.ct-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.ct-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.ct-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.ct-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.ct-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.ct-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ct-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.ct-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ct-modal-data-flow-document--active .ct-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.ct-modal-data-flow-document-fold {
  display: none;
}

.ct-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.ct-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.ct-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.ct-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.ct-modal-data-flow-document-icon-wrapper--active .ct-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.ct-modal-data-flow-document--active .ct-modal-data-flow-document-title {
  color: #138B4C;
}

.ct-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.ct-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.ct-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.ct-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.ct-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.ct-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.ct-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.ct-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.ct-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ct-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.ct-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.ct-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.ct-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.ct-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.ct-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.ct-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.ct-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.ct-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.ct-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ct-modal-terms-area-button .ct-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.ct-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.ct-modal-tab-content--display .ct-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.ct-modal-tab-content--display .ct-modal-terms-area-button .ct-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.ct-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ct-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ct-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.ct-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ct-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ct-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ct-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.ct-modal-data-flow-2-row {
  display: flex;
}

.ct-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ct-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.ct-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.ct-modal-data-flow-2-row--content .ct-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.ct-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.ct-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.ct-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ct-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-label {
  color: #333333;
}

.ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage-label {
  color: #999999;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--completed .ct-modal-data-flow-2-stage-label {
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--active .ct-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.ct-modal-tab-content--display .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.ct-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.ct-modal-data-flow-2-row--content .ct-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.ct-modal-data-flow-2-row--content .ct-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ct-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ct-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.ct-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.ct-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.ct-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ct-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.ct-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.ct-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ct-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-title,
.ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-title {
  color: #333333;
}

.ct-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.ct-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ct-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.ct-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-title {
  color: #888888;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-title,
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-title {
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--completed .ct-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--active .ct-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-date {
  color: #333333;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.ct-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.ct-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.ct-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.ct-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.ct-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.ct-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.ct-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ct-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ct-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ct-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.ct-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.ct-modal-data-flow-2-grid--external .ct-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.ct-modal-data-flow-2-grid--external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell {
  border-bottom: none;
}

.ct-modal-data-flow-2-grid--external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.ct-modal-data-flow-2-grid--external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell--label::after {
  display: none;
}

.ct-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.ct-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.ct-modal-data-flow-2-row--content-top .ct-modal-data-flow-2-document--buyer.ct-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.ct-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.ct-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ct-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ct-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.ct-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.ct-modal-data-flow-2-stage--external-completed .ct-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.ct-modal-data-flow-2-stage--external-active .ct-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.ct-modal-data-flow-2-stage--external-completed .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.ct-modal-data-flow-2-stage--external-active .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.ct-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.ct-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ct-modal-data-flow-2-document--external .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.ct-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.ct-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.ct-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ct-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.ct-modal-data-flow-2-document--external .ct-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.ct-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.ct-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ct-modal-data-flow-2-document--supplier .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.ct-modal-data-flow-2-document--supplier .ct-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.ct-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.ct-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.ct-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ct-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier .ct-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier .ct-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-completed .ct-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--supplier-active .ct-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.ct-modal-tab-content--data-flow-2-external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.ct-modal-tab-content--data-flow-2-external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external .ct-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external .ct-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.ct-modal-tab-content--display.ct-modal-tab-content--data-flow-2-external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.ct-modal-tab-content--display.ct-modal-tab-content--data-flow-2-external .ct-modal-data-flow-2-row--header .ct-modal-data-flow-2-cell:has(.ct-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-circle,
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external-completed .ct-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external-active .ct-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-icon,
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external-completed .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external-active .ct-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-stage--external .ct-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-completed .ct-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.ct-modal-tab-content--display .ct-modal-data-flow-2-document--external-active .ct-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.ct-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.ct-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.ct-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ct-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.ct-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.ct-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ct-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ct-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ct-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.ct-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.ct-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.ct-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.ct-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.ct-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ct-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.ct-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.ct-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.ct-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.ct-modal-milestone-date-value {
  color: #666666;
}

.ct-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.ct-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.ct-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.ct-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.ct-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.ct-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ct-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.ct-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ct-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.ct-modal-activity-item--display .ct-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.ct-modal-calendar-milestones .ct-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.ct-modal-calendar-milestones .ct-modal-activity-user:hover {
  text-decoration: none;
}

.ct-modal-calendar-milestones .ct-modal-activity-item--display .ct-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.ct-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.ct-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ct-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ct-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ct-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-calendar-nav-btn:hover .ct-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.ct-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.ct-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.ct-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.ct-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.ct-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.ct-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.ct-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.ct-modal-calendar-view-mode-btn--active + .ct-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.ct-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ct-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ct-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.ct-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.ct-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ct-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ct-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.ct-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.ct-modal-calendar-grid-cell:nth-child(7n-1),
.ct-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.ct-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.ct-modal-calendar-grid-day-name:nth-child(6),
.ct-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.ct-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ct-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ct-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.ct-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.ct-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.ct-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.ct-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.ct-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.ct-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ct-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.ct-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ct-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.ct-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ct-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.ct-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ct-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ct-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.ct-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.ct-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ct-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.ct-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ct-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ct-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.ct-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.ct-modal-calendar-weekly-day-column:nth-child(6),
.ct-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.ct-modal-calendar-weekly-day-header:nth-child(6),
.ct-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.ct-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ct-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ct-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ct-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ct-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ct-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ct-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ct-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.ct-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ct-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.ct-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ct-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.ct-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ct-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ct-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.ct-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.ct-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.ct-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ct-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ct-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ct-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ct-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ct-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ct-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ct-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-view {
  border-color: #D0D0D0;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-view-mode-btn--active + .ct-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-milestones-header {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-view-title {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-grid-day-name {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-grid-cell-day {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-weekly-day-name {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-weekly-day-date {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-weekly-event-title {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-daily-header {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-daily-hour-label {
  color: #666666;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-daily-event-title {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar .ct-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.ct-modal-calendar-milestones-header--external {
  color: #333333;
}

.ct-modal-calendar-nav-btn--external .ct-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ct-modal-calendar-nav-btn--external:hover .ct-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.ct-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.ct-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.ct-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ct-modal-calendar-view-mode-btn--active-external + .ct-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ct-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.ct-modal-tab-content--calendar-external .ct-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.ct-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.ct-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.ct-modal-activity-type--external {
  color: #333333;
}

.ct-modal-activity-user--external {
  color: #E67E22;
}

.ct-modal-activity-user--external:hover {
  color: #D35400;
}

.ct-modal-calendar-milestones .ct-modal-activity-user--external {
  color: #E67E22;
}

.ct-modal-calendar-milestones .ct-modal-activity-user--external:hover {
  color: #D35400;
}

.ct-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.ct-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ct-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ct-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ct-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.ct-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ct-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ct-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ct-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.ct-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ct-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ct-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ct-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-milestones-header--external {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-view-mode-btn--active-external + .ct-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-calendar-nav-btn--external .ct-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-activity-type--external {
  color: #333333;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-activity-user--external {
  color: #E67E22;
}

.ct-modal-tab-content--display.ct-modal-tab-content--calendar-external .ct-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.ct-modal-input--error,
.ct-modal-form-input.ct-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.ct-modal-dropdown--error .ct-modal-delivery-type-input,
.ct-modal-dropdown--error .ct-modal-organization-input,
.ct-modal-dropdown--error .ct-modal-sales-structure-input,
.ct-modal-dropdown--error .ct-modal-sales-channel-input,
.ct-modal-dropdown--error .ct-modal-sales-unit-input,
.ct-modal-dropdown--error .ct-modal-territory-input,
.ct-modal-dropdown--error .ct-modal-sales-office-input,
.ct-modal-dropdown--error .ct-modal-sold-to-party-input,
.ct-modal-dropdown--error .ct-modal-deliver-to-party-input,
.ct-modal-dropdown--error .ct-modal-attention-to-deliver-input,
.ct-modal-dropdown--error .ct-modal-incoterm-input,
.ct-modal-dropdown--error .ct-modal-delivery-point-input,
.ct-modal-dropdown--error .ct-modal-shipping-point-input,
.ct-modal-dropdown--error .ct-modal-sales-order-input,
.ct-modal-dropdown--error .ct-modal-sales-team-input,
.ct-modal-dropdown--error .ct-modal-sales-person-input,
.ct-modal-dropdown--error .ct-modal-delivery-priority-input,
.ct-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.ct-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.ct-modal-date-picker-wrapper.ct-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.ct-modal-custom-dropdown {
  position: relative;
}

.ct-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ct-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ct-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ct-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-check {
  color: #999999 !important;
}

.ct-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ct-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ct-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.ct-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ct-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ct-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.ct-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.ct-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.ct-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ct-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ct-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ct-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.ct-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ct-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.ct-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ct-modal-setting-form-label--display {
  color: #333333;
}

.ct-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ct-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-setting-dropdown--active .ct-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.ct-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.ct-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.ct-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ct-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.ct-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.ct-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.ct-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-setting-dropdown-icon.ct-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ct-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ct-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.ct-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.ct-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.ct-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.ct-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.ct-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ct-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ct-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ct-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.ct-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.ct-modal-setting-dropdown-item-separator {
  color: #999999;
}

.ct-modal-setting-dropdown-item-name {
  color: #333333;
}

.ct-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ct-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.ct-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ct-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ct-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ct-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.ct-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.ct-modal-setting-tab-content--print .ct-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ct-modal-setting-tab-content--print .ct-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ct-modal-setting-tab-content--print .ct-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.ct-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.ct-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ct-modal-setting-table thead tr {
  height: 2.25rem;
}

.ct-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.ct-modal-setting-table tbody tr {
  height: 2.25rem;
}

.ct-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.ct-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.ct-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.ct-modal-setting-table--display thead th:nth-child(2),
.ct-modal-setting-table--display thead th:nth-child(3),
.ct-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.ct-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.ct-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.ct-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.ct-modal-setting-table--transfer.ct-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.ct-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.ct-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ct-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.ct-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.ct-modal-setting-table--transfer:not(.ct-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.ct-modal-setting-table--transfer:not(.ct-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.ct-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.ct-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.ct-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.ct-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.ct-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ct-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ct-modal-tab-content--display .ct-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.ct-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.ct-modal-tab-content--display .ct-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.ct-modal-attribute-header-section--external .ct-modal-form-input:focus {
  border-color: #F5B041;
}

.ct-modal-attribute-header-section--external .ct-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.ct-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.ct-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.ct-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.ct-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.ct-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ct-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ct-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.ct-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.ct-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.ct-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ct-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ct-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.ct-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.ct-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ct-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ct-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.ct-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.ct-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.ct-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.ct-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.ct-modal-available-qty-tree-level {
  position: relative;
}

.ct-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.ct-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ct-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ct-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.ct-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.ct-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.ct-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.ct-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.ct-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.ct-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.ct-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.ct-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.ct-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ct-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.ct-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.ct-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.ct-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.ct-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.ct-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.ct-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.ct-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.ct-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.ct-modal-available-qty-tree-batch-header .ct-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.ct-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.ct-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.ct-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ct-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.ct-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.ct-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ct-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ct-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.ct-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ct-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ct-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ct-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.ct-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ct-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ct-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ct-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ct-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.ct-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.ct-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.ct-modal-activity-type--clickable.ct-modal-activity-type--display:hover {
  color: #138B4C;
}

.ct-modal-activity-type--clickable.ct-modal-activity-type--external:hover {
  color: #E67E00;
}

.ct-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ct-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.ct-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ct-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.ct-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ct-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.ct-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ct-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.ct-modal-activity-detail-content .ct-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.ct-modal-activity-detail-modal .ct-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.ct-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.ct-modal-activity-detail-modal .ct-modal-tabs--display .ct-modal-tab {
  color: #333333;
}

.ct-modal-activity-detail-modal .ct-modal-tabs--display .ct-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.ct-modal-activity-detail-modal .ct-modal-tabs--external.ct-modal-tabs--display .ct-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.ct-modal-activity-detail-tab-content--general .ct-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.ct-modal-activity-detail-content .ct-modal-milestone-status {
  margin: 0;
}

.ct-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.ct-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.ct-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ct-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.ct-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.ct-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.ct-modal-activity-detail-pic-chat-wrapper:hover .ct-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.ct-modal-activity-detail-pic-chat-wrapper:hover .ct-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.ct-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.ct-modal-activity-detail-pic--clickable:hover .ct-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.ct-modal-activity-detail-content--external .ct-modal-activity-detail-pic {
  color: #E67E22;
}

.ct-modal-activity-detail-content--external .ct-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.ct-modal-activity-detail-content--external .ct-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.ct-modal-activity-detail-content--external .ct-modal-activity-detail-pic--clickable:hover .ct-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.ct-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.ct-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ct-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ct-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.ct-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.ct-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.ct-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ct-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.ct-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ct-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.ct-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ct-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ct-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ct-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.ct-modal-activity-detail-content--external .ct-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.ct-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.ct-modal-activity-detail-content--external .ct-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ct-modal-activity-detail-content--external .ct-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ct-modal-activity-detail-content--external .ct-modal-activity-detail-document-name {
  color: #E67E22;
}

.ct-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.ct-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.ct-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.ct-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.ct-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.ct-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.ct-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.ct-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.ct-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.ct-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.ct-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.ct-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ct-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.ct-modal-activity-detail-tab-content--general {
  padding: 0;
}

.ct-modal-activity-detail-tab-content--general .ct-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.ct-modal-activity-detail-tab-content--general > div:not(.ct-modal-item-text-info) {
  padding: 0 1.5rem;
}

.ct-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.ct-modal-activity-detail-tab-content--attachment,
.ct-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.ct-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.ct-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.ct-modal-activity-detail-tab-content--attachment .ct-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.ct-modal-activity-detail-tab-content--attachment .ct-modal-batch-assignment-table-section > .ct-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ct-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.ct-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.ct-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ct-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.ct-modal-activity-detail-content--external .ct-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.ct-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.ct-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.ct-modal-activity-detail-content--external .ct-modal-item-text-info {
  background-color: #FEF5E7;
}

.ct-modal-activity-detail-content--external .ct-modal-task-notes-section {
  background-color: #FEF5E7;
}

.ct-modal-task-notes-section .ct-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ct-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.ct-modal-task-notes-textarea.ct-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.ct-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.ct-modal-task-chat-section > .ct-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ct-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.ct-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ct-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ct-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ct-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ct-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.ct-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.ct-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.ct-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.ct-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.ct-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ct-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.ct-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.ct-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.ct-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.ct-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.ct-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ct-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ct-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.ct-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.ct-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.ct-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ct-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.ct-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.ct-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ct-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.ct-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.ct-modal-activity-detail-content--external .ct-modal-task-chat-avatar {
  background-color: #F5B041;
}

.ct-modal-activity-detail-content--external .ct-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.ct-modal-activity-detail-content--external .ct-modal-task-chat-reply-btn {
  color: #E67E22;
}

.ct-modal-activity-detail-content--external .ct-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.ct-modal-dropdown--display .ct-modal-dropdown-item,
.ct-modal-dropdown--display [class*="-item"],
.ct-modal-tags-dropdown--display .ct-modal-tags-dropdown-item,
.ct-modal-baseline-date-dropdown--display .ct-modal-baseline-date-item,
.ct-modal-reference-type-dropdown--display .ct-modal-reference-type-item,
.ct-modal-delivery-priority-dropdown--display .ct-modal-delivery-priority-item,
.ct-modal-organization-dropdown--display .ct-modal-organization-item,
.ct-modal-sales-structure-dropdown--display .ct-modal-sales-structure-item,
.ct-modal-delivery-type-dropdown--display .ct-modal-delivery-type-item,
.ct-modal-sales-channel-dropdown--display .ct-modal-sales-channel-item,
.ct-modal-sales-unit-dropdown--display .ct-modal-sales-unit-item,
.ct-modal-sold-to-party-dropdown--display .ct-modal-sold-to-party-item,
.ct-modal-deliver-to-party-dropdown--display .ct-modal-deliver-to-party-item,
.ct-modal-attention-to-deliver-dropdown--display .ct-modal-attention-to-deliver-item,
.ct-modal-incoterm-dropdown--display .ct-modal-incoterm-item,
.ct-modal-delivery-point-dropdown--display .ct-modal-delivery-point-item,
.ct-modal-shipping-point-dropdown--display .ct-modal-shipping-point-item,
.ct-modal-sales-order-dropdown--display .ct-modal-sales-order-item,
.ct-modal-sales-person-dropdown--display .ct-modal-sales-person-item,
.ct-modal-sales-team-dropdown--display .ct-modal-sales-team-item,
.ct-modal-territory-dropdown--display .ct-modal-territory-item,
.ct-modal-sales-office-dropdown--display .ct-modal-sales-office-item,
.ct-modal-status-dropdown--display .ct-modal-status-item,
.ct-modal-handling-product-dropdown--display .ct-modal-handling-product-item,
.ct-modal-child-uom-dropdown--display .ct-modal-child-uom-item,
.ct-modal-partner-type-dropdown--display .ct-modal-partner-type-item,
.ct-modal-partner-id-dropdown--display .ct-modal-partner-id-item,
.ct-modal-custom-dropdown--display .ct-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.ct-modal-dropdown--display .ct-modal-dropdown-item:hover,
.ct-modal-dropdown--display [class*="-item"]:hover,
.ct-modal-tags-dropdown--display .ct-modal-tags-dropdown-item:hover,
.ct-modal-baseline-date-dropdown--display .ct-modal-baseline-date-item:hover,
.ct-modal-reference-type-dropdown--display .ct-modal-reference-type-item:hover,
.ct-modal-delivery-priority-dropdown--display .ct-modal-delivery-priority-item:hover,
.ct-modal-organization-dropdown--display .ct-modal-organization-item:hover,
.ct-modal-sales-structure-dropdown--display .ct-modal-sales-structure-item:hover,
.ct-modal-delivery-type-dropdown--display .ct-modal-delivery-type-item:hover,
.ct-modal-sales-channel-dropdown--display .ct-modal-sales-channel-item:hover,
.ct-modal-sales-unit-dropdown--display .ct-modal-sales-unit-item:hover,
.ct-modal-sold-to-party-dropdown--display .ct-modal-sold-to-party-item:hover,
.ct-modal-deliver-to-party-dropdown--display .ct-modal-deliver-to-party-item:hover,
.ct-modal-attention-to-deliver-dropdown--display .ct-modal-attention-to-deliver-item:hover,
.ct-modal-incoterm-dropdown--display .ct-modal-incoterm-item:hover,
.ct-modal-delivery-point-dropdown--display .ct-modal-delivery-point-item:hover,
.ct-modal-shipping-point-dropdown--display .ct-modal-shipping-point-item:hover,
.ct-modal-sales-order-dropdown--display .ct-modal-sales-order-item:hover,
.ct-modal-sales-person-dropdown--display .ct-modal-sales-person-item:hover,
.ct-modal-sales-team-dropdown--display .ct-modal-sales-team-item:hover,
.ct-modal-territory-dropdown--display .ct-modal-territory-item:hover,
.ct-modal-sales-office-dropdown--display .ct-modal-sales-office-item:hover,
.ct-modal-status-dropdown--display .ct-modal-status-item:hover,
.ct-modal-handling-product-dropdown--display .ct-modal-handling-product-item:hover,
.ct-modal-child-uom-dropdown--display .ct-modal-child-uom-item:hover,
.ct-modal-partner-type-dropdown--display .ct-modal-partner-type-item:hover,
.ct-modal-partner-id-dropdown--display .ct-modal-partner-id-item:hover,
.ct-modal-custom-dropdown--display .ct-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.ct-modal-dropdown--display [class*="-item--selected"],
.ct-modal-tags-dropdown--display .ct-modal-tags-dropdown-item--selected,
.ct-modal-baseline-date-dropdown--display .ct-modal-baseline-date-item--selected,
.ct-modal-reference-type-dropdown--display .ct-modal-reference-type-item--selected,
.ct-modal-delivery-priority-dropdown--display .ct-modal-delivery-priority-item--selected,
.ct-modal-organization-dropdown--display .ct-modal-organization-item--selected,
.ct-modal-sales-structure-dropdown--display .ct-modal-sales-structure-item--selected,
.ct-modal-delivery-type-dropdown--display .ct-modal-delivery-type-item--selected,
.ct-modal-sales-channel-dropdown--display .ct-modal-sales-channel-item--selected,
.ct-modal-sales-unit-dropdown--display .ct-modal-sales-unit-item--selected,
.ct-modal-sold-to-party-dropdown--display .ct-modal-sold-to-party-item--selected,
.ct-modal-deliver-to-party-dropdown--display .ct-modal-deliver-to-party-item--selected,
.ct-modal-attention-to-deliver-dropdown--display .ct-modal-attention-to-deliver-item--selected,
.ct-modal-incoterm-dropdown--display .ct-modal-incoterm-item--selected,
.ct-modal-delivery-point-dropdown--display .ct-modal-delivery-point-item--selected,
.ct-modal-shipping-point-dropdown--display .ct-modal-shipping-point-item--selected,
.ct-modal-sales-order-dropdown--display .ct-modal-sales-order-item--selected,
.ct-modal-sales-person-dropdown--display .ct-modal-sales-person-item--selected,
.ct-modal-sales-team-dropdown--display .ct-modal-sales-team-item--selected,
.ct-modal-territory-dropdown--display .ct-modal-territory-item--selected,
.ct-modal-sales-office-dropdown--display .ct-modal-sales-office-item--selected,
.ct-modal-status-dropdown--display .ct-modal-status-item--selected,
.ct-modal-handling-product-dropdown--display .ct-modal-handling-product-item--selected,
.ct-modal-child-uom-dropdown--display .ct-modal-child-uom-item--selected,
.ct-modal-partner-type-dropdown--display .ct-modal-partner-type-item--selected,
.ct-modal-partner-id-dropdown--display .ct-modal-partner-id-item--selected,
.ct-modal-custom-dropdown--display .ct-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.ct-modal-dropdown--display [class*="-check"],
.ct-modal-dropdown--display .ct-modal-dropdown-check,
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.ct-modal-dropdown--display [class*="-item-code"],
.ct-modal-dropdown--display [class*="-item-name"],
.ct-modal-dropdown--display [class*="-item-content"],
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-code,
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-name,
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-item,
.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.ct-modal-sold-to-party-dropdown-content--display .ct-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.ct-modal-tags-dropdown--display .ct-modal-tags-item,
.ct-modal-tags-dropdown--display .ct-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-tags-dropdown--display .ct-modal-tags-item:hover {
  background-color: transparent !important;
}

.ct-modal-tags-dropdown--display .ct-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ct-modal-tags-dropdown--display .ct-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item,
.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ct-modal-custom-dropdown-list--display .ct-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/CustomerBilling/CustomerBilling.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.customer-billing-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.customer-billing-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.customer-billing-header {
  margin-bottom: 0;
}

.customer-billing-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.customer-billing-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.customer-billing-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.customer-billing-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.customer-billing-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.customer-billing-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.customer-billing-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.customer-billing-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.customer-billing-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.customer-billing-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.customer-billing-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.customer-billing-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.customer-billing-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.customer-billing-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.customer-billing-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.customer-billing-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.customer-billing-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.customer-billing-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.customer-billing-layout-dropdown-item:last-child {
  border-bottom: none;
}

.customer-billing-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.customer-billing-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.customer-billing-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.customer-billing-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.customer-billing-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.customer-billing-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.customer-billing-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.customer-billing-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-billing-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.customer-billing-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.customer-billing-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.customer-billing-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.customer-billing-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.customer-billing-filter-parameter-wrapper {
  position: relative;
}

.customer-billing-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.customer-billing-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.customer-billing-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.customer-billing-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.customer-billing-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.customer-billing-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.customer-billing-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.customer-billing-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.customer-billing-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.customer-billing-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.customer-billing-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.customer-billing-filter-close:hover {
  background-color: #f0f0f0;
}

.customer-billing-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.customer-billing-filter-group {
  margin-bottom: 1rem;
}

.customer-billing-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.customer-billing-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.customer-billing-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.customer-billing-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.customer-billing-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.customer-billing-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.customer-billing-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.customer-billing-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.customer-billing-filter-org-container {
  flex: 1 1;
  position: relative;
}

.customer-billing-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.customer-billing-filter-org-input:hover {
  border-color: #C2DE54;
}

.customer-billing-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.customer-billing-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.customer-billing-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.customer-billing-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.customer-billing-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.customer-billing-filter-tag-remove:hover {
  color: #000;
}

.customer-billing-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.customer-billing-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.customer-billing-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.customer-billing-filter-org-item:hover {
  background-color: #f5f5f5;
}

.customer-billing-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.customer-billing-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.customer-billing-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.customer-billing-filter-org-code {
  font-weight: 600;
  color: #333;
}

.customer-billing-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.customer-billing-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.customer-billing-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.customer-billing-type-dropdown-item:last-child {
  border-bottom: none;
}

.customer-billing-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.customer-billing-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.customer-billing-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.customer-billing-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.customer-billing-table {
  animation: customerBillingFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes customerBillingFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .customer-billing-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .customer-billing-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .customer-billing-type-dropdown {
    min-width: 11.25rem;
  }

  .customer-billing-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/CustomerBilling/CustomerBillingModal.css ===== */
/* Customer Billing Modal Specific Styles */
.customer-billing-modal {
  overscroll-behavior: contain;
}

.customer-billing-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.cb-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.cb-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.cb-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.cb-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.cb-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.cb-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.cb-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cb-modal-pov-button--external.cb-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.cb-modal-pov-button--external .cb-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-pov-button--external .cb-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.cb-modal-pov-caret--open {
  transform: rotate(180deg);
}

.cb-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.cb-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.cb-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.cb-modal-pov-dropdown-item span {
  flex: 1 1;
}

.cb-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.cb-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.cb-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.cb-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.cb-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.cb-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.cb-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.cb-modal-tabs--display .cb-modal-tab {
  color: #666666;
}

.cb-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.cb-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.cb-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.cb-modal-tabs--display .cb-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cb-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.cb-modal-tabs--external .cb-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cb-modal-tabs--external.cb-modal-tabs--display .cb-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cb-modal-tabs--external .cb-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.cb-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.cb-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.cb-modal-action-button span {
  white-space: nowrap;
}

.cb-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.cb-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.cb-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-modal-action-button--disabled .cb-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.cb-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.cb-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.cb-modal-left-area--full .cb-modal-back-button {
  transition: width 300ms ease;
}

.cb-modal-left-area--full .cb-modal-back-button:hover {
  width: 3.5rem;
}

.cb-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.cb-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.cb-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cb-modal-content--item {
  padding-bottom: 1rem;
}

.cb-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.cb-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.cb-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.cb-modal-attachment-table-container .cb-modal-detail-table thead,
.cb-modal-attachment-table-container .cb-modal-attachment-table thead {
  box-shadow: none !important;
}

.cb-modal-attachment-table-container .cb-modal-detail-table tr,
.cb-modal-attachment-table-container .cb-modal-attachment-table tr {
  box-shadow: none !important;
}

.cb-modal-attachment-table-container .cb-modal-detail-table tbody tr:last-child,
.cb-modal-attachment-table-container .cb-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cb-modal-attachment-table-container .cb-modal-detail-table tbody tr:last-child td,
.cb-modal-attachment-table-container .cb-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.cb-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.cb-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.cb-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.cb-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.cb-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.cb-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.cb-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.cb-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.cb-modal-attachment-filename--external {
  color: #E67E22;
}

.cb-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.cb-modal-tab-content--display .cb-modal-attachment-filename--external {
  color: #E67E22;
}

.cb-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.cb-modal-attachment-size {
  color: #666666;
}

.cb-modal-attachment-date {
  color: #666666;
}

.cb-modal-attachment-uploadedby {
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.cb-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cb-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cb-modal-attachment-browse-btn:focus {
  outline: none;
}

.cb-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cb-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cb-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-attachment-browse-btn--disabled .cb-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cb-modal-tab-content--display .cb-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.cb-modal-tab-content--display .cb-modal-attachment-filename.cb-modal-attachment-filename--external {
  color: #E67E22;
}

.cb-modal-tab-content--display .cb-modal-attachment-type {
  color: #666666;
}

.cb-modal-tab-content--display .cb-modal-attachment-size {
  color: #666666;
}

.cb-modal-tab-content--display .cb-modal-attachment-date {
  color: #666666;
}

.cb-modal-tab-content--display .cb-modal-attachment-uploadedby {
  color: #333333;
}

.cb-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.cb-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.cb-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.cb-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cb-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.cb-modal-tab-content--display .cb-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.cb-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.cb-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.cb-modal-tab-content--display .cb-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.cb-modal-basic-section--external .cb-modal-form-input:focus {
  border-color: #F5B041;
}

.cb-modal-basic-section--external .cb-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.cb-modal-tab-content--external .cb-modal-form-input:focus,
.cb-modal-tab-content--external .cb-modal-form-textarea:focus,
.cb-modal-tab-content--external .cb-modal-custom-dropdown-input:focus,
.cb-modal-tab-content--external .cb-modal-date-input:focus,
.cb-modal-tab-content--external .cb-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.cb-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.cb-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.cb-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.cb-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.cb-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cb-modal-tab-content--display .cb-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.cb-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.cb-modal-tab-content--display .cb-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.cb-modal-partner-header-section--external .cb-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.cb-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cb-modal-tab-content--display .cb-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.cb-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.cb-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.cb-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.cb-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cb-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.cb-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.cb-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.cb-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.cb-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.cb-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.cb-modal-chat-section {
  padding: 1.5rem 0;
}

.cb-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cb-modal-chat-header h3 {
  margin: 0;
}

.cb-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.cb-modal-chat-new-thread .cb-modal-form-textarea {
  min-height: 5rem;
}

.cb-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cb-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cb-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cb-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.cb-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cb-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.cb-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.cb-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.cb-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cb-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.cb-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.cb-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.cb-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cb-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cb-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-chat-user-name {
  color: #333333 !important;
}

.cb-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.cb-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.cb-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.cb-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.cb-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.cb-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.cb-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cb-modal-chat-reply-btn:hover .cb-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.cb-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.cb-modal-chat-replies .cb-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.cb-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.cb-modal-chat-reply-input .cb-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.cb-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cb-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.cb-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.cb-modal-tab-content--display .cb-modal-chat-thread {
  border-color: #E5E5E5;
}

.cb-modal-tab-content--display .cb-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display .cb-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-chat-user-position {
  background-color: #E8F5E9;
}

.cb-modal-tab-content--display .cb-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.cb-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cb-modal-tab-content--display .cb-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.cb-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.cb-modal-notes-header-section--external .cb-modal-form-textarea:focus {
  border-color: #F5B041;
}

.cb-modal-chat-section--external .cb-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.cb-modal-chat-avatar--external {
  background-color: #F5B041;
}

.cb-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.cb-modal-tab-content--display .cb-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-thread {
  border-color: #E5E5E5;
}

.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-message--main {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-user-name {
  color: #333333 !important;
}

.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-user-position {
  background-color: #FDE8D0;
}

.cb-modal-tab-content--display.cb-modal-tab-content--external .cb-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.cb-modal-chat-reply-btn--external {
  color: #E67E22;
}

.cb-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.cb-modal-chat-reply-btn--external .cb-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cb-modal-chat-reply-btn--external:hover .cb-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.cb-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cb-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.cb-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.cb-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.cb-modal-chat-textarea-wrapper {
  position: relative;
}

.cb-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.cb-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cb-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.cb-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.cb-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.cb-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.cb-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cb-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.cb-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.cb-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.cb-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cb-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.cb-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.cb-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.cb-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.cb-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.cb-modal-tab-content--display .cb-modal-table-empty-state-title {
  color: #666666;
}

.cb-modal-tab-content--display .cb-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.cb-modal-partner-header-section + .cb-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.cb-modal-partner-header-section + .cb-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.cb-modal-partner-header-section + .cb-modal-item-content-section .cb-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.cb-modal-partner-header-section + .cb-modal-item-content-section .cb-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.cb-modal-partner-header-section + .cb-modal-item-content-section .cb-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.cb-modal-partner-header-section + .cb-modal-item-content-section .cb-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.cb-modal-partner-header-section + .cb-modal-item-content-section .cb-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.cb-modal-partner-table-container .cb-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.cb-modal-partner-table-container .cb-modal-partner-table th:last-child,
.cb-modal-partner-table-container .cb-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.cb-modal-detail-table-container--external.cb-modal-partner-table-container .cb-modal-partner-table th:last-child,
.cb-modal-detail-table-container--external.cb-modal-partner-table-container .cb-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.cb-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cb-modal-item-header-section .cb-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-tab-content--display .cb-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.cb-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.cb-modal-tab-content--display .cb-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.cb-modal-item-header-section--external .cb-modal-form-input:focus {
  border-color: #F5B041;
}

.cb-modal-item-header-section--external .cb-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.cb-modal-detail-subtabs--external .cb-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.cb-modal-detail-subtabs--external .cb-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.cb-modal-detail-subtabs--external .cb-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.cb-modal-tab-content--display .cb-modal-detail-subtabs--external .cb-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.cb-modal-tab-content--display .cb-modal-detail-subtabs--external .cb-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.cb-modal-tab-content.cb-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.cb-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.cb-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.cb-modal-item-table-wrapper .cb-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.cb-modal-item-table-wrapper .cb-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.cb-modal-item-table-wrapper--terms .cb-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.cb-modal-tab-content--external.cb-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.cb-modal-tab-content--external .cb-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-tab-content--external .cb-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-tab-content--external .cb-modal-item-table-wrapper--terms .cb-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.cb-modal-tab-content--external .cb-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.cb-modal-item-table-wrapper--terms .cb-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.cb-modal-item-table-wrapper--terms .cb-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cb-modal-item-table-wrapper--terms .cb-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.cb-modal-item-table-wrapper--terms .cb-modal-detail-table tr {
  height: auto;
}

.cb-modal-item-table-wrapper--terms .cb-modal-detail-table-container .cb-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.cb-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.cb-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.cb-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cb-modal-volume-input-group .cb-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cb-modal-volume-input-group .cb-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cb-modal-volume-input-group .cb-modal-sla-input-wrapper .cb-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.cb-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cb-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cb-modal-volume-uom-list--display .cb-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-volume-uom-list--display .cb-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.cb-modal-volume-uom-list--display .cb-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-volume-uom-list--display .cb-modal-volume-uom-check {
  color: #999999 !important;
}

.cb-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.cb-modal-volume-uom-dropdown--display .cb-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-modal-volume-uom-dropdown--display .cb-modal-volume-uom-item:hover {
  background-color: transparent;
}

.cb-modal-volume-uom-dropdown--display .cb-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cb-modal-volume-uom-dropdown--display .cb-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.cb-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cb-modal-weight-input-group .cb-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.cb-modal-weight-input-group .cb-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.cb-modal-weight-input-group .cb-modal-sla-input-wrapper .cb-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.cb-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.cb-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-weight-uom-input::placeholder {
  color: #999999;
}

.cb-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.cb-modal-weight-uom-dropdown--display .cb-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-modal-weight-uom-dropdown--display .cb-modal-weight-uom-item:hover {
  background-color: transparent;
}

.cb-modal-weight-uom-dropdown--display .cb-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.cb-modal-weight-uom-dropdown--display .cb-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.cb-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.cb-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.cb-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.cb-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.cb-modal-form-input--display ~ .cb-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.cb-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.cb-modal-form-input--display {
  cursor: default;
}

.cb-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.cb-modal-form-label--display {
  color: #333333 !important;
}

.cb-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.cb-modal-form-label--display .cb-modal-required {
  color: #FF4D4F;
}

.cb-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.cb-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.cb-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.cb-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.cb-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.cb-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.cb-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cb-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.cb-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.cb-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.cb-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.cb-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.cb-modal-sla-spinner-btn:disabled .cb-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cb-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sla-spinner-btn:hover .cb-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.cb-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.cb-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.cb-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.cb-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.cb-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.cb-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.cb-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.cb-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.cb-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.cb-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.cb-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.cb-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.cb-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.cb-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.cb-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.cb-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.cb-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.cb-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.cb-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.cb-modal-stage-dropdown-input--display .cb-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.cb-modal-stage-dropdown-input--display .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.cb-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.cb-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.cb-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.cb-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.cb-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cb-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.cb-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.cb-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.cb-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.cb-modal-accordion-header--display {
  color: #333333;
}

.cb-modal-accordion-header--display.cb-modal-accordion-header--active {
  color: #333333;
}

.cb-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.cb-modal-accordion-header--display .cb-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.cb-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.cb-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.cb-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.cb-modal-stage-main-title--display {
  color: #138B4C;
}

.cb-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-stage-title--display {
  color: #333333;
}

.cb-modal-stage-current {
  margin-bottom: 1.875rem;
}

.cb-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.cb-modal-stage-label--display {
  color: #666666;
}

.cb-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-stage-subtitle--display {
  color: #333333;
}

.cb-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.cb-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.cb-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.cb-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.cb-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.cb-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cb-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.cb-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.cb-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cb-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.cb-modal-download-button:active {
  background-color: #E0E0E0;
}

.cb-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-download-button--display .cb-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.cb-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.cb-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.cb-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.cb-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.cb-modal-timeline-item--display .cb-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.cb-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.cb-modal-timeline-badge--inactive .cb-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.cb-modal-timeline-item--display .cb-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.cb-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.cb-modal-timeline-item--display .cb-modal-timeline-line {
  background-color: #138B4C;
}

.cb-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cb-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.cb-modal-timeline-status--display {
  color: #333333;
}

.cb-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.cb-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.cb-modal-timeline-date--display {
  color: #666666;
}

.cb-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.cb-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.cb-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.cb-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cb-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cb-modal-timeline-document--display {
  color: #138B4C;
}

.cb-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.cb-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.cb-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.cb-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.cb-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.cb-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.cb-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.cb-modal-activity-item--display .cb-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.cb-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.cb-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.cb-modal-activity-item--display .cb-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.cb-modal-activity-item--display .cb-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.cb-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.cb-modal-activity-item--display .cb-modal-activity-line {
  background-color: #138B4C;
}

.cb-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.cb-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.cb-modal-activity-type--display {
  color: #333333;
}

.cb-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.cb-modal-activity-header--display {
  color: #666666;
}

.cb-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cb-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.cb-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.cb-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.cb-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.cb-modal-activity-change--display .cb-modal-activity-field {
  color: #333333;
}

.cb-modal-activity-change--display .cb-modal-activity-new {
  color: #138B4C;
}

.cb-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.cb-modal-activity-date--display {
  color: #666666;
}

.cb-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.cb-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.cb-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cb-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.cb-modal-activity-more--display {
  color: #138B4C;
}

.cb-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-activity-more--display .cb-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.cb-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.cb-modal-reference-table thead {
  background-color: #F9F9F9;
}

.cb-modal-tab-content--display .cb-modal-reference-table thead {
  background-color: #FAFAFA;
}

.cb-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.cb-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.cb-modal-tab-content--display .cb-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.cb-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.cb-modal-tab-content--display .cb-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.cb-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.cb-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.cb-modal-detail-subtab:hover {
  color: #138B4C;
}

.cb-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.cb-modal-tab-content--display .cb-modal-detail-subtab {
  color: #666666;
}

.cb-modal-tab-content--display .cb-modal-detail-subtab:hover {
  color: #138B4C;
}

.cb-modal-tab-content--display .cb-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.cb-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.cb-modal-tab-content.cb-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.cb-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-detail-delivery-wrapper .cb-modal-form-label {
  flex-shrink: 0;
}

.cb-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.cb-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.cb-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cb-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cb-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cb-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cb-modal-detail-table-container .cb-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cb-modal-detail-table-container .cb-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cb-modal-detail-table-container .cb-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.cb-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.cb-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cb-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.cb-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.cb-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.cb-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.cb-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-detail-table th,
.cb-modal-tab-content--display .cb-modal-packaging-table th,
.cb-modal-tab-content--display .cb-modal-partner-table th,
.cb-modal-tab-content--display .cb-modal-attachment-table th {
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-detail-table td,
.cb-modal-tab-content--display .cb-modal-packaging-table td,
.cb-modal-tab-content--display .cb-modal-partner-table td,
.cb-modal-tab-content--display .cb-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-description,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-text,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-batch,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-serial,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-so-item,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-package-no,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-product-type,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-product-group,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-product-category,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cb-modal-tab-content--display .cb-modal-detail-table tbody tr:hover .cb-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-description,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-text,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-batch,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-serial,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-so-item,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-package-no,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-type,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-group,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-category,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .cb-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.cb-modal-detail-table-container .cb-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.cb-modal-detail-table-container .cb-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.cb-modal-detail-table-container--external .cb-modal-detail-table td {
  color: #555555 !important;
}

.cb-modal-detail-table-container .cb-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.cb-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.cb-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cb-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.cb-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.cb-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.cb-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.cb-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.cb-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.cb-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cb-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cb-modal-detail-table tbody tr:hover .detail-table-description,
.cb-modal-detail-table tbody tr:hover .detail-table-text,
.cb-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cb-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cb-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cb-modal-detail-table tbody tr:hover .detail-table-batch,
.cb-modal-detail-table tbody tr:hover .detail-table-serial,
.cb-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cb-modal-detail-table tbody tr:hover .detail-table-so-item,
.cb-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cb-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cb-modal-detail-table tbody tr:hover .detail-table-package-no,
.cb-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cb-modal-detail-table tbody tr:hover .detail-table-product-type,
.cb-modal-detail-table tbody tr:hover .detail-table-product-group,
.cb-modal-detail-table tbody tr:hover .detail-table-product-category,
.cb-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cb-modal-detail-table tbody tr:hover .cb-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-description,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-text,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-available-qty,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-batch,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-serial,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-sales-order,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-so-item,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-pr-item,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-package-no,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-type,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-group,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-category,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .detail-table-product-variant,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .cb-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.cb-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cb-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.cb-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.cb-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.cb-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.cb-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cb-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.cb-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cb-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.cb-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.cb-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.cb-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.cb-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.cb-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.cb-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.cb-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.cb-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.cb-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.cb-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.cb-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.cb-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.cb-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cb-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.cb-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cb-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.cb-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.cb-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cb-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.cb-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.cb-modal-add-item-btn--disabled .cb-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.cb-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.cb-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.cb-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.cb-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cb-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cb-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.cb-modal-sales-order-table-container .cb-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.cb-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.cb-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.cb-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.cb-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.cb-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.cb-modal-table-input:focus {
  outline: none;
}

.cb-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.cb-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.cb-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cb-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.cb-modal-tags-container {
  position: relative;
  width: 100%;
}

.cb-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cb-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cb-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.cb-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.cb-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.cb-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.cb-modal-tags-input--display .cb-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.cb-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.cb-modal-tag-remove:hover {
  color: #333333;
}

.cb-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.cb-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cb-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.cb-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.cb-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.cb-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.cb-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.cb-modal-status-container {
  position: relative;
  width: 100%;
}

.cb-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cb-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cb-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.cb-modal-status-placeholder {
  color: #999999;
}

.cb-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.cb-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cb-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cb-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-status-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-status-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.cb-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.cb-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.cb-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.cb-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.cb-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.cb-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.cb-modal-status-input--display .cb-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.cb-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.cb-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cb-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.cb-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.cb-modal-stage-dropdown-placeholder {
  color: #999999;
}

.cb-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.cb-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.cb-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.cb-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.cb-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.cb-modal-stage--created .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.cb-modal-stage--approved .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.cb-modal-stage--processed .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.cb-modal-stage--picked .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.cb-modal-stage--packed .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.cb-modal-stage--planned .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.cb-modal-stage--loaded .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.cb-modal-stage--issued .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.cb-modal-stage--departed .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.cb-modal-stage--arrived .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.cb-modal-stage--unloaded .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.cb-modal-stage--delivered .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.cb-modal-stage--confirmed .cb-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.cb-modal-stage--billed .cb-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.cb-modal-stage-dropdown-input .cb-modal-stage,
.cb-modal-stage-dropdown-item .cb-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.cb-modal-baseline-date-dropdown {
  position: relative;
}

.cb-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cb-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.cb-modal-reference-type-dropdown {
  position: relative;
}

.cb-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cb-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.cb-modal-delivery-priority-dropdown {
  position: relative;
}

.cb-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cb-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.cb-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.cb-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.cb-modal-delivery-priority-separator {
  color: #666666;
}

.cb-modal-delivery-priority-name {
  color: #333333;
}

.cb-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.cb-modal-organization-dropdown {
  position: relative;
}

.cb-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cb-modal-organization-dropdown-content--display .cb-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-organization-dropdown-content--display .cb-modal-organization-item:hover {
  background-color: transparent !important;
}

.cb-modal-organization-dropdown-content--display .cb-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-organization-dropdown-content--display .cb-modal-organization-code,
.cb-modal-organization-dropdown-content--display .cb-modal-organization-name,
.cb-modal-organization-dropdown-content--display .cb-modal-organization-separator {
  color: #999999 !important;
}

.cb-modal-organization-dropdown-content--display .cb-modal-organization-check {
  color: #999999 !important;
}

.cb-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-organization-separator {
  color: #999999;
}

.cb-modal-organization-name {
  color: #333333;
}

.cb-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.cb-modal-sales-structure-dropdown {
  position: relative;
}

.cb-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.cb-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cb-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-sales-structure-separator {
  color: #999999;
}

.cb-modal-sales-structure-name {
  color: #333333;
}

.cb-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.cb-modal-delivery-type-dropdown {
  position: relative;
}

.cb-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.cb-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cb-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cb-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.cb-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.cb-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.cb-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.cb-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-delivery-type-separator {
  color: #999999;
}

.cb-modal-delivery-type-description {
  color: #333333;
}

.cb-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.cb-modal-content::-webkit-scrollbar,
.cb-modal-stage-content::-webkit-scrollbar,


.cb-modal-content::-webkit-scrollbar-track,
.cb-modal-stage-content::-webkit-scrollbar-track,


.cb-modal-content::-webkit-scrollbar-thumb,
.cb-modal-stage-content::-webkit-scrollbar-thumb,


.cb-modal-content::-webkit-scrollbar-thumb:hover,
.cb-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.cb-modal-sales-channel-dropdown {
  position: relative;
}

.cb-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cb-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-sales-channel-separator {
  color: #999999;
}

.cb-modal-sales-channel-name {
  color: #333333;
}

.cb-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.cb-modal-sales-unit-dropdown {
  position: relative;
}

.cb-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cb-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-sales-unit-separator {
  color: #999999;
}

.cb-modal-sales-unit-name {
  color: #333333;
}

.cb-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.cb-modal-organization-item--placeholder,
.cb-modal-sales-structure-item--placeholder,
.cb-modal-sales-channel-item--placeholder,
.cb-modal-sales-unit-item--placeholder,
.cb-modal-territory-item--placeholder,
.cb-modal-sales-office-item--placeholder,
.cb-modal-sold-to-party-item--placeholder,
.cb-modal-deliver-to-party-item--placeholder,
.cb-modal-attention-to-deliver-item--placeholder,
.cb-modal-incoterm-item--placeholder,
.cb-modal-delivery-point-item--placeholder,
.cb-modal-shipping-point-item--placeholder,
.cb-modal-sales-order-item--placeholder,
.cb-modal-sales-team-item--placeholder,
.cb-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.cb-modal-organization-item--placeholder:hover,
.cb-modal-sales-structure-item--placeholder:hover,
.cb-modal-sales-channel-item--placeholder:hover,
.cb-modal-sales-unit-item--placeholder:hover,
.cb-modal-territory-item--placeholder:hover,
.cb-modal-sales-office-item--placeholder:hover,
.cb-modal-sold-to-party-item--placeholder:hover,
.cb-modal-deliver-to-party-item--placeholder:hover,
.cb-modal-attention-to-deliver-item--placeholder:hover,
.cb-modal-incoterm-item--placeholder:hover,
.cb-modal-delivery-point-item--placeholder:hover,
.cb-modal-shipping-point-item--placeholder:hover,
.cb-modal-sales-order-item--placeholder:hover,
.cb-modal-sales-team-item--placeholder:hover,
.cb-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.cb-modal-sold-to-party-dropdown {
  position: relative;
}

.cb-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-sold-to-party-input:focus,
.cb-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.cb-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cb-modal-sold-to-party-separator {
  color: #999999;
}

.cb-modal-sold-to-party-name {
  color: #333333;
}

.cb-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.cb-modal-deliver-to-party-dropdown {
  position: relative;
}

.cb-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cb-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.cb-modal-deliver-to-party-separator {
  color: #999999;
}

.cb-modal-deliver-to-party-name {
  color: #333333;
}

.cb-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.cb-modal-attention-to-deliver-dropdown {
  position: relative;
}
.cb-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.cb-modal-attention-to-deliver-separator {
  color: #999999;
}
.cb-modal-attention-to-deliver-name {
  color: #333333;
}
.cb-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.cb-modal-incoterm-dropdown {
  position: relative;
}
.cb-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.cb-modal-incoterm-separator {
  color: #999999;
}
.cb-modal-incoterm-name {
  color: #333333;
}
.cb-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.cb-modal-delivery-point-dropdown {
  position: relative;
}
.cb-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cb-modal-delivery-point-separator {
  color: #999999;
}
.cb-modal-delivery-point-name {
  color: #333333;
}
.cb-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.cb-modal-shipping-point-dropdown {
  position: relative;
}
.cb-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cb-modal-shipping-point-separator {
  color: #999999;
}
.cb-modal-shipping-point-name {
  color: #333333;
}
.cb-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.cb-modal-sales-order-dropdown {
  position: relative;
}
.cb-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.cb-modal-sales-order-separator {
  color: #999999;
}
.cb-modal-sales-order-name {
  color: #333333;
}
.cb-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.cb-modal-date-picker {
  position: relative;
}
.cb-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.cb-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.cb-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.cb-modal-date-input::-webkit-datetime-edit-text,
.cb-modal-date-input::-webkit-datetime-edit-month-field,
.cb-modal-date-input::-webkit-datetime-edit-day-field,
.cb-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.cb-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.cb-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.cb-modal-sales-person-dropdown {
  position: relative;
}
.cb-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.cb-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.cb-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.cb-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.cb-modal-sales-person-separator {
  color: #999999;
}
.cb-modal-sales-person-name {
  color: #333333;
}
.cb-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.cb-modal-sales-team-dropdown {
  position: relative;
}
.cb-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.cb-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.cb-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.cb-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.cb-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.cb-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cb-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.cb-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.cb-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.cb-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cb-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.cb-modal-sales-team-separator {
  color: #999999;
}
.cb-modal-sales-team-name {
  color: #333333;
}
.cb-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.cb-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.cb-modal-territory-dropdown {
  position: relative;
}

.cb-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cb-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-territory-separator {
  color: #999999;
}

.cb-modal-territory-name {
  color: #333333;
}

.cb-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.cb-modal-sales-office-dropdown {
  position: relative;
}

.cb-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.cb-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.cb-modal-sales-office-separator {
  color: #999999;
}

.cb-modal-sales-office-name {
  color: #333333;
}

.cb-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.cb-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cb-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.cb-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.cb-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cb-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cb-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cb-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-table-dropdown-input:focus {
  outline: none;
}

.cb-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.cb-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cb-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.cb-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.cb-modal-delivery-type-list::-webkit-scrollbar,
.cb-modal-stage-dropdown-list::-webkit-scrollbar,
.cb-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cb-modal-delivery-type-list::-webkit-scrollbar-track,
.cb-modal-stage-dropdown-list::-webkit-scrollbar-track,
.cb-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-delivery-type-list::-webkit-scrollbar-thumb,
.cb-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.cb-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cb-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.cb-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.cb-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.cb-modal-wrapper,
.cb-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.customer-billing-modal,
.cb-modal-wrapper,
.cb-modal-wrapper *,
.cb-modal-content,
.cb-modal-data-flow-2-container,
.cb-modal-data-flow-container,
.cb-modal-calendar-container,
.cb-modal-calendar-milestones-list,
.cb-modal-calendar-view,
.cb-modal-calendar-yearly,
.cb-modal-calendar-monthly,
.cb-modal-calendar-weekly,
.cb-modal-calendar-weekly-body,
.cb-modal-calendar-daily,
.cb-modal-calendar-daily-timeline,
.cb-modal-calendar-grid,
.cb-modal-calendar-grid-body,
.cb-modal-detail-table-container,
.cb-modal-item-table-wrapper,
.cb-modal-attachment-table-container,
.cb-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.cb-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cb-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cb-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.cb-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.cb-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.cb-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.cb-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.cb-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.cb-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-tab-content--display .cb-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.cb-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-tab-content--display .cb-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cb-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cb-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.cb-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) {
  font-weight: 600;
}

.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) .cb-modal-packaging-input,
.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) .cb-modal-packaging-input--display,
.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) .cb-modal-handling-product-input,
.cb-modal-packaging-row--unassigned:not(.cb-modal-packaging-row--expanded) .cb-modal-handling-product-input--display {
  font-weight: 600;
}

.cb-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.cb-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row td.cb-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row td.cb-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row td.cb-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td.cb-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded td.cb-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row--expanded:hover td.cb-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display,
.cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display,
.cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.cb-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.cb-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-tab-content--display .cb-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.cb-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-tab-content--display .cb-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.cb-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.cb-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.cb-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.cb-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.cb-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.cb-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.cb-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.cb-modal-packaging-detail-table th:first-child,
.cb-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.cb-modal-packaging-detail-table th:nth-child(2),
.cb-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.cb-modal-packaging-detail-table th:nth-child(3),
.cb-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.cb-modal-packaging-detail-table td:nth-child(4),
.cb-modal-packaging-detail-table td:nth-child(6),
.cb-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.cb-modal-packaging-detail-table td:nth-child(5),
.cb-modal-packaging-detail-table td:nth-child(7),
.cb-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.cb-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.cb-modal-tab-content--display .cb-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display .cb-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.cb-modal-tab-content--display .cb-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.cb-modal-tab-content--display .cb-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.cb-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.cb-modal-packaging-table td:last-child,
.cb-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.cb-modal-packaging-table td:last-child .cb-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.cb-modal-detail-table-container--external .cb-modal-packaging-table th:last-child,
.cb-modal-detail-table-container--external .cb-modal-packaging-table td.cb-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.cb-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.cb-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cb-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cb-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.cb-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.cb-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.cb-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.cb-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.cb-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.cb-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.cb-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.cb-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.cb-modal-packaging-child-table tr {
  border: none !important;
}

.cb-modal-packaging-child-table thead,
.cb-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.cb-modal-packaging-child-table th:first-child,
.cb-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.cb-modal-packaging-child-table th:nth-child(2),
.cb-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.cb-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.cb-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.cb-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.cb-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.cb-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.cb-modal-packaging-child-table th:nth-child(3),
.cb-modal-packaging-child-table td:nth-child(3),
.cb-modal-packaging-child-table th:nth-child(4),
.cb-modal-packaging-child-table td:nth-child(4),
.cb-modal-packaging-child-table th:nth-child(5),
.cb-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.cb-modal-packaging-child-table th:nth-child(6),
.cb-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.cb-modal-packaging-child-table th:nth-child(7),
.cb-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.cb-modal-detail-table-container--external .cb-modal-packaging-child-table th:last-child,
.cb-modal-detail-table-container--external .cb-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.cb-modal-packaging-child-table td:last-child .cb-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.cb-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.cb-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cb-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.cb-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.cb-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row {
  transition: none !important;
}

.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display,
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display:focus,
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display,
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display:focus,
.cb-modal-tab-content--display .cb-modal-detail-table-container .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display:focus,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display:focus,
.cb-modal-tab-content--display .cb-modal-detail-table-container--external .cb-modal-packaging-table tbody tr.cb-modal-packaging-row:hover td .cb-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.cb-modal-detail-table-container--external .cb-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.cb-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cb-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cb-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.cb-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.cb-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.cb-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.cb-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.cb-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.cb-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.cb-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.cb-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.cb-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.cb-modal-detail-table-container--external .cb-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.cb-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-item--display {
  color: #999999 !important;
}

.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-code,
.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-name,
.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-separator {
  color: #999999 !important;
}

.cb-modal-handling-product-dropdown-content--display .cb-modal-handling-product-check {
  color: #999999 !important;
}

.cb-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.cb-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.cb-modal-handling-product-dropdown-content--narrow .cb-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.cb-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.cb-modal-packaging-detail-table .cb-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.cb-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.cb-modal-detail-table-container--dropdown-open .cb-modal-detail-table {
  overflow: visible;
}

.cb-modal-detail-table-container--dropdown-open .cb-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.cb-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cb-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cb-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.cb-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.cb-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.cb-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.cb-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.cb-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.cb-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.cb-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.cb-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.cb-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.cb-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.cb-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.cb-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.cb-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.cb-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.cb-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.cb-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.cb-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.cb-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-item:hover {
  background-color: transparent;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-item--placeholder {
  display: none;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-code,
.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-name,
.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-separator {
  color: #555555;
}

.cb-modal-handling-product-dropdown-content--view-only .cb-modal-handling-product-check {
  color: #888888;
}

.cb-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.cb-modal-handling-product-separator {
  color: #999999;
}

.cb-modal-handling-product-name {
  color: #333333;
}

.cb-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.cb-modal-handling-product-item--placeholder {
  cursor: default;
}

.cb-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.cb-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.cb-modal-detail-table td:has(.cb-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.cb-modal-detail-table td .cb-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.cb-modal-detail-table td .cb-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.cb-modal-detail-table td .cb-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.cb-modal-detail-table td .cb-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.cb-modal-detail-table td .cb-modal-handling-product-input--display,
.cb-modal-detail-table td .cb-modal-handling-product-input--display:focus,
.cb-modal-detail-table td .cb-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display,
.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display:focus,
.cb-modal-detail-table-container .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display:focus,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover td .cb-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.cb-modal-detail-table td .cb-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.cb-modal-detail-table td .cb-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.cb-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cb-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cb-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.cb-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-table-text-icon-btn--filled:not(.cb-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.cb-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.cb-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cb-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.cb-modal-table-text-icon-btn--display.cb-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.cb-modal-table-text-icon-btn--display.cb-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-table-text-icon-btn--display.cb-modal-table-text-icon-btn--external.cb-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.cb-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.cb-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.cb-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cb-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.cb-modal-serial-assignment-btn {
  width: 10.625rem;
}

.cb-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.cb-modal-batch-assignment-btn--filled .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.cb-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.cb-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.cb-modal-batch-assignment-btn--display .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-batch-assignment-btn--display.cb-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.cb-modal-batch-assignment-btn--display.cb-modal-batch-assignment-btn--filled .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.cb-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.cb-modal-secured-qty-btn.cb-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.cb-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.cb-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.cb-modal-secured-qty-btn--grey .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.cb-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cb-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.cb-modal-batch-assignment-btn--partial .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.cb-modal-batch-assignment-btn--display.cb-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.cb-modal-batch-assignment-btn--display.cb-modal-batch-assignment-btn--partial .cb-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.cb-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.cb-modal-secured-qty-modal .cb-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.cb-modal-secured-qty-modal .cb-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cb-modal-secured-qty-modal.cb-modal-batch-assignment-modal--display .cb-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.cb-modal-secured-qty-modal .cb-modal-item-text-content {
  overflow-x: hidden;
}

.cb-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.cb-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.cb-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cb-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.cb-modal-batch-assignment-modal--display .cb-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.cb-modal-batch-assignment-modal--display .cb-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.cb-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.cb-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.cb-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.cb-modal-secured-qty-lock-btn--open .cb-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.cb-modal-secured-qty-lock-btn--locked .cb-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.cb-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.cb-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.cb-modal-batch-assignment-modal .cb-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.cb-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.cb-modal-batch-assignment-modal .cb-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.cb-modal-batch-assignment-modal .cb-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.cb-modal-batch-assignment-modal.cb-modal-batch-assignment-modal--display .cb-modal-item-text-info {
  background-color: #F2F8EA;
}

.cb-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cb-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.cb-modal-batch-assignment-info-group {
  flex: 1 1;
}

.cb-modal-batch-assignment-info-group .cb-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cb-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.cb-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cb-modal-batch-assignment-table-section .cb-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cb-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.cb-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.cb-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cb-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cb-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.cb-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.cb-modal-batch-assignment-table th,
.cb-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.cb-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.cb-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.cb-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cb-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cb-modal-batch-assignment-table tbody td:has(.cb-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.cb-modal-batch-assignment-table tbody td:has(.cb-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.cb-modal-batch-assignment-table tbody td:nth-child(2),
.cb-modal-batch-assignment-table tbody td:nth-child(3),
.cb-modal-batch-assignment-table tbody td:nth-child(4),
.cb-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.cb-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.cb-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cb-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cb-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.cb-modal-batch-assignment-modal--display .cb-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.cb-modal-batch-assignment-modal--display .cb-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.cb-modal-batch-assignment-modal--display .cb-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-batch-assignment-modal--display .cb-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.cb-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.cb-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.cb-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.cb-modal-batch-assignment-table .cb-modal-placeholder-text {
  color: #CCCCCC;
}

.cb-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.cb-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.cb-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.cb-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.cb-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.cb-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.cb-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.cb-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.cb-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cb-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.cb-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.cb-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.cb-modal-batch-assignment-table td.batch-table-frozen-batch,
table.cb-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.cb-modal-batch-assignment-table th.batch-table-frozen-batch,
table.cb-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.cb-modal-batch-assignment-table th.batch-table-frozen-assign,
table.cb-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.cb-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.cb-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.cb-modal-item-text-info {
  margin-bottom: 1rem;
}

.cb-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cb-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.cb-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cb-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.cb-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.cb-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.cb-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.cb-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-item-text-modal .modal-header .modal-title,
.cb-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.cb-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.cb-modal-item-text-label--display {
  color: #333333;
}

.cb-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.cb-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.cb-modal-item-text-modal .cb-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.cb-modal-item-text-modal .cb-modal-item-text-textarea-wrapper .cb-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.cb-modal-item-text-textarea {
  overflow-y: auto !important;
}

.cb-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.cb-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cb-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.cb-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.cb-modal-add-do-item-modal .cb-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.cb-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.cb-modal-add-do-item-dropdown-section .cb-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.cb-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cb-modal-add-do-item-table-section .cb-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cb-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.cb-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.cb-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.cb-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.cb-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.cb-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.cb-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.cb-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.cb-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.cb-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.cb-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.cb-modal-detail-table td:first-child .cb-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.cb-modal-detail-table td:first-child .cb-modal-partner-type-input {
  padding-left: 0.625rem;
}

.cb-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cb-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cb-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cb-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cb-modal-partner-type-dropdown--display .cb-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cb-modal-partner-type-dropdown-content--display .cb-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-partner-type-dropdown-content--display .cb-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.cb-modal-partner-type-dropdown-content--display .cb-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-partner-type-dropdown-content--display .cb-modal-partner-type-check {
  color: #999999 !important;
}

.cb-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cb-modal-partner-type-dropdown--display .cb-modal-partner-type-value {
  color: #555555;
}

.cb-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cb-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.cb-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.cb-modal-partner-type-item--placeholder {
  cursor: default;
}

.cb-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.cb-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cb-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.cb-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.cb-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.cb-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.cb-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.cb-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.cb-modal-partner-id-dropdown--display .cb-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-code,
.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-name,
.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-separator {
  color: #999999 !important;
}

.cb-modal-partner-id-dropdown-content--display .cb-modal-partner-id-check {
  color: #999999 !important;
}

.cb-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cb-modal-partner-id-dropdown--display .cb-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.cb-modal-detail-table tbody tr:hover .cb-modal-partner-type-dropdown--display .cb-modal-partner-type-input-wrapper,
.cb-modal-detail-table tbody tr:hover .cb-modal-partner-id-dropdown--display .cb-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .cb-modal-partner-type-dropdown--display .cb-modal-partner-type-input-wrapper,
.cb-modal-detail-table-container--external .cb-modal-detail-table tbody tr:hover .cb-modal-partner-id-dropdown--display .cb-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.cb-modal-partner-type-arrow--external {
  visibility: hidden;
}

.cb-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.cb-modal-partner-type-dropdown--external .cb-modal-partner-type-value {
  color: #555555;
}

.cb-modal-partner-id-dropdown--external .cb-modal-partner-id-value {
  color: #555555;
}

.cb-modal-detail-table-container--external .cb-modal-detail-table td.cb-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.cb-modal-partner-header-section--external .cb-modal-form-input--display {
  color: #555555;
}

.cb-modal-detail-table td.cb-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.cb-modal-tab-content--display .cb-modal-detail-table td.cb-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.cb-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.cb-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.cb-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.cb-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.cb-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.cb-modal-partner-id-item--placeholder {
  cursor: default;
}

.cb-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.cb-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.cb-modal-partner-id-separator {
  color: #999999;
}

.cb-modal-partner-id-name {
  color: #666666;
}

.cb-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cb-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.cb-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.cb-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cb-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cb-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cb-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cb-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cb-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cb-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.cb-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.cb-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.cb-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.cb-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.cb-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.cb-modal-data-flow-stage--completed .cb-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cb-modal-data-flow-stage--active .cb-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cb-modal-data-flow-stage--completed .cb-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-data-flow-stage--active .cb-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.cb-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.cb-modal-data-flow-stage--completed .cb-modal-data-flow-stage-label {
  color: #138B4C;
}

.cb-modal-data-flow-stage--active .cb-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.cb-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.cb-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.cb-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.cb-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.cb-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.cb-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cb-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.cb-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.cb-modal-data-flow-document--active .cb-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.cb-modal-data-flow-document-fold {
  display: none;
}

.cb-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.cb-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.cb-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.cb-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.cb-modal-data-flow-document-icon-wrapper--active .cb-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.cb-modal-data-flow-document--active .cb-modal-data-flow-document-title {
  color: #138B4C;
}

.cb-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.cb-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.cb-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.cb-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.cb-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.cb-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.cb-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.cb-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.cb-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cb-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.cb-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.cb-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.cb-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.cb-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.cb-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.cb-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.cb-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.cb-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.cb-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.cb-modal-terms-area-button .cb-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.cb-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.cb-modal-tab-content--display .cb-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.cb-modal-tab-content--display .cb-modal-terms-area-button .cb-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.cb-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cb-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.cb-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cb-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cb-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cb-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cb-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.cb-modal-data-flow-2-row {
  display: flex;
}

.cb-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cb-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.cb-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.cb-modal-data-flow-2-row--content .cb-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.cb-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.cb-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.cb-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cb-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-label {
  color: #333333;
}

.cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage-label {
  color: #999999;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--completed .cb-modal-data-flow-2-stage-label {
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--active .cb-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.cb-modal-tab-content--display .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.cb-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.cb-modal-data-flow-2-row--content .cb-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.cb-modal-data-flow-2-row--content .cb-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cb-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cb-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.cb-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.cb-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.cb-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cb-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.cb-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.cb-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cb-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-title,
.cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-title {
  color: #333333;
}

.cb-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.cb-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cb-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.cb-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-title {
  color: #888888;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-title,
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-title {
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--completed .cb-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--active .cb-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-date {
  color: #333333;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.cb-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.cb-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.cb-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.cb-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.cb-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.cb-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.cb-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.cb-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.cb-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.cb-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.cb-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.cb-modal-data-flow-2-grid--external .cb-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.cb-modal-data-flow-2-grid--external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell {
  border-bottom: none;
}

.cb-modal-data-flow-2-grid--external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.cb-modal-data-flow-2-grid--external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell--label::after {
  display: none;
}

.cb-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.cb-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.cb-modal-data-flow-2-row--content-top .cb-modal-data-flow-2-document--buyer.cb-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.cb-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.cb-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cb-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cb-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.cb-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.cb-modal-data-flow-2-stage--external-completed .cb-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.cb-modal-data-flow-2-stage--external-active .cb-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.cb-modal-data-flow-2-stage--external-completed .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.cb-modal-data-flow-2-stage--external-active .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.cb-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.cb-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cb-modal-data-flow-2-document--external .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.cb-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.cb-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.cb-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.cb-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.cb-modal-data-flow-2-document--external .cb-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.cb-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.cb-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cb-modal-data-flow-2-document--supplier .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.cb-modal-data-flow-2-document--supplier .cb-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.cb-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.cb-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.cb-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.cb-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier .cb-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier .cb-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-completed .cb-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--supplier-active .cb-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.cb-modal-tab-content--data-flow-2-external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.cb-modal-tab-content--data-flow-2-external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external .cb-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external .cb-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.cb-modal-tab-content--display.cb-modal-tab-content--data-flow-2-external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.cb-modal-tab-content--display.cb-modal-tab-content--data-flow-2-external .cb-modal-data-flow-2-row--header .cb-modal-data-flow-2-cell:has(.cb-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-circle,
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external-completed .cb-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external-active .cb-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-icon,
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external-completed .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external-active .cb-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-stage--external .cb-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-completed .cb-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.cb-modal-tab-content--display .cb-modal-data-flow-2-document--external-active .cb-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.cb-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.cb-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.cb-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cb-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.cb-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.cb-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cb-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cb-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cb-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.cb-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.cb-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.cb-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.cb-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.cb-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cb-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.cb-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.cb-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.cb-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.cb-modal-milestone-date-value {
  color: #666666;
}

.cb-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.cb-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.cb-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.cb-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.cb-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.cb-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cb-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.cb-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cb-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.cb-modal-activity-item--display .cb-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.cb-modal-calendar-milestones .cb-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.cb-modal-calendar-milestones .cb-modal-activity-user:hover {
  text-decoration: none;
}

.cb-modal-calendar-milestones .cb-modal-activity-item--display .cb-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.cb-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cb-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cb-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.cb-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.cb-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-calendar-nav-btn:hover .cb-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.cb-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.cb-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.cb-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.cb-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.cb-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.cb-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.cb-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.cb-modal-calendar-view-mode-btn--active + .cb-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.cb-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cb-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.cb-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.cb-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cb-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cb-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.cb-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.cb-modal-calendar-grid-cell:nth-child(7n-1),
.cb-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.cb-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.cb-modal-calendar-grid-day-name:nth-child(6),
.cb-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.cb-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cb-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cb-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.cb-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.cb-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.cb-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.cb-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cb-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.cb-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cb-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.cb-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cb-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.cb-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.cb-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.cb-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.cb-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.cb-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.cb-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cb-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.cb-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cb-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cb-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.cb-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.cb-modal-calendar-weekly-day-column:nth-child(6),
.cb-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.cb-modal-calendar-weekly-day-header:nth-child(6),
.cb-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.cb-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cb-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cb-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cb-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cb-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cb-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cb-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cb-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.cb-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.cb-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.cb-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.cb-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.cb-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cb-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.cb-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.cb-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.cb-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.cb-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cb-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.cb-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.cb-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cb-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.cb-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.cb-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-view {
  border-color: #D0D0D0;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-view-mode-btn--active + .cb-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-milestones-header {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-view-title {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-grid-day-name {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-grid-cell-day {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-weekly-day-name {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-weekly-day-date {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-weekly-event-title {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-daily-header {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-daily-hour-label {
  color: #666666;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-daily-event-title {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar .cb-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.cb-modal-calendar-milestones-header--external {
  color: #333333;
}

.cb-modal-calendar-nav-btn--external .cb-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cb-modal-calendar-nav-btn--external:hover .cb-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.cb-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.cb-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.cb-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cb-modal-calendar-view-mode-btn--active-external + .cb-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cb-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.cb-modal-tab-content--calendar-external .cb-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.cb-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.cb-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.cb-modal-activity-type--external {
  color: #333333;
}

.cb-modal-activity-user--external {
  color: #E67E22;
}

.cb-modal-activity-user--external:hover {
  color: #D35400;
}

.cb-modal-calendar-milestones .cb-modal-activity-user--external {
  color: #E67E22;
}

.cb-modal-calendar-milestones .cb-modal-activity-user--external:hover {
  color: #D35400;
}

.cb-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.cb-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cb-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cb-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cb-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.cb-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cb-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cb-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cb-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.cb-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.cb-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.cb-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.cb-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-milestones-header--external {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-view-mode-btn--active-external + .cb-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-calendar-nav-btn--external .cb-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-activity-type--external {
  color: #333333;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-activity-user--external {
  color: #E67E22;
}

.cb-modal-tab-content--display.cb-modal-tab-content--calendar-external .cb-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.cb-modal-input--error,
.cb-modal-form-input.cb-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.cb-modal-dropdown--error .cb-modal-delivery-type-input,
.cb-modal-dropdown--error .cb-modal-organization-input,
.cb-modal-dropdown--error .cb-modal-sales-structure-input,
.cb-modal-dropdown--error .cb-modal-sales-channel-input,
.cb-modal-dropdown--error .cb-modal-sales-unit-input,
.cb-modal-dropdown--error .cb-modal-territory-input,
.cb-modal-dropdown--error .cb-modal-sales-office-input,
.cb-modal-dropdown--error .cb-modal-sold-to-party-input,
.cb-modal-dropdown--error .cb-modal-deliver-to-party-input,
.cb-modal-dropdown--error .cb-modal-attention-to-deliver-input,
.cb-modal-dropdown--error .cb-modal-incoterm-input,
.cb-modal-dropdown--error .cb-modal-delivery-point-input,
.cb-modal-dropdown--error .cb-modal-shipping-point-input,
.cb-modal-dropdown--error .cb-modal-sales-order-input,
.cb-modal-dropdown--error .cb-modal-sales-team-input,
.cb-modal-dropdown--error .cb-modal-sales-person-input,
.cb-modal-dropdown--error .cb-modal-delivery-priority-input,
.cb-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.cb-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.cb-modal-date-picker-wrapper.cb-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.cb-modal-custom-dropdown {
  position: relative;
}

.cb-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cb-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.cb-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.cb-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.cb-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-check {
  color: #999999 !important;
}

.cb-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.cb-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.cb-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.cb-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.cb-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cb-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.cb-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.cb-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.cb-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cb-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cb-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.cb-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.cb-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cb-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.cb-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.cb-modal-setting-form-label--display {
  color: #333333;
}

.cb-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.cb-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-setting-dropdown--active .cb-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.cb-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.cb-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.cb-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.cb-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.cb-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.cb-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.cb-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-setting-dropdown-icon.cb-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.cb-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.cb-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.cb-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.cb-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.cb-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.cb-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.cb-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.cb-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.cb-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.cb-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.cb-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.cb-modal-setting-dropdown-item-separator {
  color: #999999;
}

.cb-modal-setting-dropdown-item-name {
  color: #333333;
}

.cb-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.cb-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.cb-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.cb-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.cb-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.cb-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.cb-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.cb-modal-setting-tab-content--print .cb-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.cb-modal-setting-tab-content--print .cb-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cb-modal-setting-tab-content--print .cb-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.cb-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.cb-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.cb-modal-setting-table thead tr {
  height: 2.25rem;
}

.cb-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.cb-modal-setting-table tbody tr {
  height: 2.25rem;
}

.cb-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.cb-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.cb-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.cb-modal-setting-table--display thead th:nth-child(2),
.cb-modal-setting-table--display thead th:nth-child(3),
.cb-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.cb-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.cb-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.cb-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.cb-modal-setting-table--transfer.cb-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.cb-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.cb-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cb-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.cb-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.cb-modal-setting-table--transfer:not(.cb-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.cb-modal-setting-table--transfer:not(.cb-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.cb-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.cb-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.cb-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.cb-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.cb-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.cb-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cb-modal-tab-content--display .cb-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.cb-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.cb-modal-tab-content--display .cb-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.cb-modal-attribute-header-section--external .cb-modal-form-input:focus {
  border-color: #F5B041;
}

.cb-modal-attribute-header-section--external .cb-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.cb-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.cb-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.cb-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.cb-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.cb-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cb-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cb-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.cb-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.cb-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.cb-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cb-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cb-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.cb-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.cb-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cb-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cb-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.cb-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.cb-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.cb-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.cb-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.cb-modal-available-qty-tree-level {
  position: relative;
}

.cb-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.cb-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cb-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.cb-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.cb-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.cb-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.cb-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.cb-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.cb-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.cb-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.cb-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.cb-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.cb-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cb-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.cb-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.cb-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.cb-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.cb-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.cb-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.cb-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.cb-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.cb-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.cb-modal-available-qty-tree-batch-header .cb-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.cb-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.cb-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.cb-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.cb-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.cb-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.cb-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.cb-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.cb-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.cb-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.cb-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.cb-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.cb-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.cb-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.cb-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cb-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.cb-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.cb-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.cb-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.cb-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.cb-modal-activity-type--clickable.cb-modal-activity-type--display:hover {
  color: #138B4C;
}

.cb-modal-activity-type--clickable.cb-modal-activity-type--external:hover {
  color: #E67E00;
}

.cb-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cb-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.cb-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cb-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.cb-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cb-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.cb-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.cb-modal-activity-detail-content .cb-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.cb-modal-activity-detail-modal .cb-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.cb-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.cb-modal-activity-detail-modal .cb-modal-tabs--display .cb-modal-tab {
  color: #333333;
}

.cb-modal-activity-detail-modal .cb-modal-tabs--display .cb-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.cb-modal-activity-detail-modal .cb-modal-tabs--external.cb-modal-tabs--display .cb-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.cb-modal-activity-detail-tab-content--general .cb-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.cb-modal-activity-detail-content .cb-modal-milestone-status {
  margin: 0;
}

.cb-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.cb-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.cb-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cb-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.cb-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.cb-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.cb-modal-activity-detail-pic-chat-wrapper:hover .cb-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.cb-modal-activity-detail-pic-chat-wrapper:hover .cb-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.cb-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.cb-modal-activity-detail-pic--clickable:hover .cb-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.cb-modal-activity-detail-content--external .cb-modal-activity-detail-pic {
  color: #E67E22;
}

.cb-modal-activity-detail-content--external .cb-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.cb-modal-activity-detail-content--external .cb-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.cb-modal-activity-detail-content--external .cb-modal-activity-detail-pic--clickable:hover .cb-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.cb-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.cb-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.cb-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.cb-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.cb-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.cb-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.cb-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cb-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.cb-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.cb-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.cb-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cb-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.cb-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cb-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.cb-modal-activity-detail-content--external .cb-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.cb-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.cb-modal-activity-detail-content--external .cb-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.cb-modal-activity-detail-content--external .cb-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.cb-modal-activity-detail-content--external .cb-modal-activity-detail-document-name {
  color: #E67E22;
}

.cb-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.cb-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.cb-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.cb-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.cb-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.cb-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.cb-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.cb-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.cb-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.cb-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.cb-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.cb-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.cb-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.cb-modal-activity-detail-tab-content--general {
  padding: 0;
}

.cb-modal-activity-detail-tab-content--general .cb-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.cb-modal-activity-detail-tab-content--general > div:not(.cb-modal-item-text-info) {
  padding: 0 1.5rem;
}

.cb-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.cb-modal-activity-detail-tab-content--attachment,
.cb-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.cb-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.cb-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.cb-modal-activity-detail-tab-content--attachment .cb-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.cb-modal-activity-detail-tab-content--attachment .cb-modal-batch-assignment-table-section > .cb-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cb-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.cb-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.cb-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.cb-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.cb-modal-activity-detail-content--external .cb-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.cb-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.cb-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.cb-modal-activity-detail-content--external .cb-modal-item-text-info {
  background-color: #FEF5E7;
}

.cb-modal-activity-detail-content--external .cb-modal-task-notes-section {
  background-color: #FEF5E7;
}

.cb-modal-task-notes-section .cb-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cb-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.cb-modal-task-notes-textarea.cb-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.cb-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.cb-modal-task-chat-section > .cb-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cb-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.cb-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cb-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cb-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cb-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.cb-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.cb-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.cb-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.cb-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cb-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.cb-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.cb-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.cb-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.cb-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.cb-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.cb-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.cb-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.cb-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.cb-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.cb-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.cb-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.cb-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.cb-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.cb-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.cb-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.cb-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.cb-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.cb-modal-activity-detail-content--external .cb-modal-task-chat-avatar {
  background-color: #F5B041;
}

.cb-modal-activity-detail-content--external .cb-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.cb-modal-activity-detail-content--external .cb-modal-task-chat-reply-btn {
  color: #E67E22;
}

.cb-modal-activity-detail-content--external .cb-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.cb-modal-dropdown--display .cb-modal-dropdown-item,
.cb-modal-dropdown--display [class*="-item"],
.cb-modal-tags-dropdown--display .cb-modal-tags-dropdown-item,
.cb-modal-baseline-date-dropdown--display .cb-modal-baseline-date-item,
.cb-modal-reference-type-dropdown--display .cb-modal-reference-type-item,
.cb-modal-delivery-priority-dropdown--display .cb-modal-delivery-priority-item,
.cb-modal-organization-dropdown--display .cb-modal-organization-item,
.cb-modal-sales-structure-dropdown--display .cb-modal-sales-structure-item,
.cb-modal-delivery-type-dropdown--display .cb-modal-delivery-type-item,
.cb-modal-sales-channel-dropdown--display .cb-modal-sales-channel-item,
.cb-modal-sales-unit-dropdown--display .cb-modal-sales-unit-item,
.cb-modal-sold-to-party-dropdown--display .cb-modal-sold-to-party-item,
.cb-modal-deliver-to-party-dropdown--display .cb-modal-deliver-to-party-item,
.cb-modal-attention-to-deliver-dropdown--display .cb-modal-attention-to-deliver-item,
.cb-modal-incoterm-dropdown--display .cb-modal-incoterm-item,
.cb-modal-delivery-point-dropdown--display .cb-modal-delivery-point-item,
.cb-modal-shipping-point-dropdown--display .cb-modal-shipping-point-item,
.cb-modal-sales-order-dropdown--display .cb-modal-sales-order-item,
.cb-modal-sales-person-dropdown--display .cb-modal-sales-person-item,
.cb-modal-sales-team-dropdown--display .cb-modal-sales-team-item,
.cb-modal-territory-dropdown--display .cb-modal-territory-item,
.cb-modal-sales-office-dropdown--display .cb-modal-sales-office-item,
.cb-modal-status-dropdown--display .cb-modal-status-item,
.cb-modal-handling-product-dropdown--display .cb-modal-handling-product-item,
.cb-modal-child-uom-dropdown--display .cb-modal-child-uom-item,
.cb-modal-partner-type-dropdown--display .cb-modal-partner-type-item,
.cb-modal-partner-id-dropdown--display .cb-modal-partner-id-item,
.cb-modal-custom-dropdown--display .cb-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.cb-modal-dropdown--display .cb-modal-dropdown-item:hover,
.cb-modal-dropdown--display [class*="-item"]:hover,
.cb-modal-tags-dropdown--display .cb-modal-tags-dropdown-item:hover,
.cb-modal-baseline-date-dropdown--display .cb-modal-baseline-date-item:hover,
.cb-modal-reference-type-dropdown--display .cb-modal-reference-type-item:hover,
.cb-modal-delivery-priority-dropdown--display .cb-modal-delivery-priority-item:hover,
.cb-modal-organization-dropdown--display .cb-modal-organization-item:hover,
.cb-modal-sales-structure-dropdown--display .cb-modal-sales-structure-item:hover,
.cb-modal-delivery-type-dropdown--display .cb-modal-delivery-type-item:hover,
.cb-modal-sales-channel-dropdown--display .cb-modal-sales-channel-item:hover,
.cb-modal-sales-unit-dropdown--display .cb-modal-sales-unit-item:hover,
.cb-modal-sold-to-party-dropdown--display .cb-modal-sold-to-party-item:hover,
.cb-modal-deliver-to-party-dropdown--display .cb-modal-deliver-to-party-item:hover,
.cb-modal-attention-to-deliver-dropdown--display .cb-modal-attention-to-deliver-item:hover,
.cb-modal-incoterm-dropdown--display .cb-modal-incoterm-item:hover,
.cb-modal-delivery-point-dropdown--display .cb-modal-delivery-point-item:hover,
.cb-modal-shipping-point-dropdown--display .cb-modal-shipping-point-item:hover,
.cb-modal-sales-order-dropdown--display .cb-modal-sales-order-item:hover,
.cb-modal-sales-person-dropdown--display .cb-modal-sales-person-item:hover,
.cb-modal-sales-team-dropdown--display .cb-modal-sales-team-item:hover,
.cb-modal-territory-dropdown--display .cb-modal-territory-item:hover,
.cb-modal-sales-office-dropdown--display .cb-modal-sales-office-item:hover,
.cb-modal-status-dropdown--display .cb-modal-status-item:hover,
.cb-modal-handling-product-dropdown--display .cb-modal-handling-product-item:hover,
.cb-modal-child-uom-dropdown--display .cb-modal-child-uom-item:hover,
.cb-modal-partner-type-dropdown--display .cb-modal-partner-type-item:hover,
.cb-modal-partner-id-dropdown--display .cb-modal-partner-id-item:hover,
.cb-modal-custom-dropdown--display .cb-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.cb-modal-dropdown--display [class*="-item--selected"],
.cb-modal-tags-dropdown--display .cb-modal-tags-dropdown-item--selected,
.cb-modal-baseline-date-dropdown--display .cb-modal-baseline-date-item--selected,
.cb-modal-reference-type-dropdown--display .cb-modal-reference-type-item--selected,
.cb-modal-delivery-priority-dropdown--display .cb-modal-delivery-priority-item--selected,
.cb-modal-organization-dropdown--display .cb-modal-organization-item--selected,
.cb-modal-sales-structure-dropdown--display .cb-modal-sales-structure-item--selected,
.cb-modal-delivery-type-dropdown--display .cb-modal-delivery-type-item--selected,
.cb-modal-sales-channel-dropdown--display .cb-modal-sales-channel-item--selected,
.cb-modal-sales-unit-dropdown--display .cb-modal-sales-unit-item--selected,
.cb-modal-sold-to-party-dropdown--display .cb-modal-sold-to-party-item--selected,
.cb-modal-deliver-to-party-dropdown--display .cb-modal-deliver-to-party-item--selected,
.cb-modal-attention-to-deliver-dropdown--display .cb-modal-attention-to-deliver-item--selected,
.cb-modal-incoterm-dropdown--display .cb-modal-incoterm-item--selected,
.cb-modal-delivery-point-dropdown--display .cb-modal-delivery-point-item--selected,
.cb-modal-shipping-point-dropdown--display .cb-modal-shipping-point-item--selected,
.cb-modal-sales-order-dropdown--display .cb-modal-sales-order-item--selected,
.cb-modal-sales-person-dropdown--display .cb-modal-sales-person-item--selected,
.cb-modal-sales-team-dropdown--display .cb-modal-sales-team-item--selected,
.cb-modal-territory-dropdown--display .cb-modal-territory-item--selected,
.cb-modal-sales-office-dropdown--display .cb-modal-sales-office-item--selected,
.cb-modal-status-dropdown--display .cb-modal-status-item--selected,
.cb-modal-handling-product-dropdown--display .cb-modal-handling-product-item--selected,
.cb-modal-child-uom-dropdown--display .cb-modal-child-uom-item--selected,
.cb-modal-partner-type-dropdown--display .cb-modal-partner-type-item--selected,
.cb-modal-partner-id-dropdown--display .cb-modal-partner-id-item--selected,
.cb-modal-custom-dropdown--display .cb-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.cb-modal-dropdown--display [class*="-check"],
.cb-modal-dropdown--display .cb-modal-dropdown-check,
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.cb-modal-dropdown--display [class*="-item-code"],
.cb-modal-dropdown--display [class*="-item-name"],
.cb-modal-dropdown--display [class*="-item-content"],
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-code,
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-name,
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-item,
.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.cb-modal-sold-to-party-dropdown-content--display .cb-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.cb-modal-tags-dropdown--display .cb-modal-tags-item,
.cb-modal-tags-dropdown--display .cb-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-tags-dropdown--display .cb-modal-tags-item:hover {
  background-color: transparent !important;
}

.cb-modal-tags-dropdown--display .cb-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cb-modal-tags-dropdown--display .cb-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item,
.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.cb-modal-custom-dropdown-list--display .cb-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* Payment Tab Styles */
.cb-modal-payment-container { padding: 1rem; }
.cb-modal-payment-schedule-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.cb-modal-payment-schedule-table th { background-color: #fafafa; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
.cb-modal-payment-schedule-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }
.cb-modal-payment-schedule-table tr:hover { background-color: #f9f9f9; }
.cb-modal-payment-status-badge { display: inline-block; padding: 2px 0.5rem; border-radius: 0.625rem; font-size: 0.6875rem; font-weight: 600; }
.cb-modal-aging-container { padding: 1rem; }
.cb-modal-aging-summary { display: flex; gap: 1rem; margin-bottom: 1rem; }
.cb-modal-aging-bucket { flex: 1 1; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 0.25rem; text-align: center; }
.cb-modal-aging-bucket-label { font-size: 0.6875rem; color: #666; margin-bottom: 0.25rem; }
.cb-modal-aging-bucket-value { font-size: 1.125rem; font-weight: 700; }
.cb-modal-aging-bucket-count { font-size: 0.6875rem; color: #999; margin-top: 2px; }
.cb-modal-aging-bar { height: 0.5rem; background-color: #e0e0e0; border-radius: 0.25rem; overflow: hidden; margin-top: 0.5rem; }
.cb-modal-aging-bar-fill { height: 100%; border-radius: 0.25rem; transition: width 0.3s ease; }
.cb-modal-dunning-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 1rem; }
.cb-modal-dunning-table th { background-color: #fafafa; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
.cb-modal-dunning-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }

/* ===== from pages/Sales/DeliveryOrder/DeliveryOrder.css ===== */
/* Delivery Order Wrapper - prevent page scroll */
.delivery-order-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Delivery Order Container */
.delivery-order-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.delivery-order-header {
  margin-bottom: 0;
}

.delivery-order-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Delivery Control - Exact copy of third-nav-control */
.delivery-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.delivery-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.delivery-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.delivery-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.delivery-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.delivery-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.delivery-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.delivery-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.delivery-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.delivery-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.delivery-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.delivery-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.delivery-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.delivery-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.delivery-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.delivery-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.delivery-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.delivery-layout-dropdown-item:last-child {
  border-bottom: none;
}

.delivery-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.delivery-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.delivery-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.delivery-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.delivery-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.delivery-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.delivery-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.delivery-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.delivery-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.delivery-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.delivery-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.delivery-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.delivery-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.delivery-filter-parameter-wrapper {
  position: relative;
}

.delivery-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.delivery-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.delivery-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.delivery-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.delivery-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.delivery-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.delivery-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.delivery-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.delivery-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.delivery-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.delivery-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.delivery-filter-close:hover {
  background-color: #f0f0f0;
}

.delivery-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.delivery-filter-group {
  margin-bottom: 1rem;
}

.delivery-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.delivery-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.delivery-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.delivery-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.delivery-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.delivery-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.delivery-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.delivery-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.delivery-filter-org-container {
  flex: 1 1;
  position: relative;
}

.delivery-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.delivery-filter-org-input:hover {
  border-color: #C2DE54;
}

.delivery-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.delivery-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.delivery-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.delivery-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.delivery-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.delivery-filter-tag-remove:hover {
  color: #000;
}

.delivery-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.delivery-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.delivery-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.delivery-filter-org-item:hover {
  background-color: #f5f5f5;
}

.delivery-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.delivery-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.delivery-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.delivery-filter-org-code {
  font-weight: 600;
  color: #333;
}

.delivery-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.delivery-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.delivery-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.delivery-type-dropdown-item:last-child {
  border-bottom: none;
}

.delivery-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.delivery-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.delivery-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.delivery-order-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Delivery Order Table */
.delivery-order-table {
  animation: fadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .delivery-order-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .delivery-order-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .delivery-type-dropdown {
    min-width: 11.25rem;
  }

  .delivery-order-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}
/* ===== from pages/Sales/DeliveryOrder/DeliveryOrderModal.css ===== */
/* Delivery Order Modal Specific Styles */
.delivery-order-modal {
  overscroll-behavior: contain;
}

/* ==========================================
   PAGE MODE — render modal content inline, no overlay
   ========================================== */
.do-page-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-align: left;
}

.do-page-wrapper .modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  z-index: auto !important;
  animation: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

.do-page-wrapper .modal-backdrop .modal,
.do-page-wrapper .modal-backdrop .modal.modal--fullscreen {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  min-height: 0 !important;
}

.delivery-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.do-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.do-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 16.25rem;
}

.do-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.do-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.do-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.do-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.do-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.do-modal-pov-button--external.do-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.do-modal-pov-button--external .do-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-pov-button--external .do-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.do-modal-pov-caret--open {
  transform: rotate(180deg);
}

.do-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 16.25rem;
  margin-top: 2px;
  overflow: hidden;
}

.do-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.do-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.do-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.do-modal-pov-dropdown-item span {
  flex: 0 0 auto;
}

.do-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.do-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.do-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.do-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.do-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.do-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.do-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.do-modal-tabs--display .do-modal-tab {
  color: #666666;
}

.do-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.do-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.do-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.do-modal-tabs--display .do-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.do-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.do-modal-tabs--external .do-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.do-modal-tabs--external.do-modal-tabs--display .do-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.do-modal-tabs--external .do-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.do-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.do-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.do-modal-action-button span {
  white-space: nowrap;
}

.do-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.do-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.do-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.do-modal-action-button--disabled .do-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.do-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.do-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.do-modal-left-area--full .do-modal-back-button {
  transition: width 300ms ease;
}

.do-modal-left-area--full .do-modal-back-button:hover {
  width: 3.5rem;
}

.do-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.do-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
  /* Hide scrollbar — still scrollable via wheel/trackpad. Matches the
     same fix applied to .so-modal-content so all non-no-scroll tabs
     stay flush to the right edge. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}

.do-modal-content::-webkit-scrollbar {
  display: none; /* Chrome / Safari / new Edge */
}

.do-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.do-modal-content--item {
  padding-bottom: 1rem;
}

.do-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.do-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.do-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.do-modal-attachment-table-container .do-modal-detail-table thead,
.do-modal-attachment-table-container .do-modal-attachment-table thead {
  box-shadow: none !important;
}

.do-modal-attachment-table-container .do-modal-detail-table tr,
.do-modal-attachment-table-container .do-modal-attachment-table tr {
  box-shadow: none !important;
}

.do-modal-attachment-table-container .do-modal-detail-table tbody tr:last-child,
.do-modal-attachment-table-container .do-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.do-modal-attachment-table-container .do-modal-detail-table tbody tr:last-child td,
.do-modal-attachment-table-container .do-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.do-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.do-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.do-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.do-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.do-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.do-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.do-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.do-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.do-modal-attachment-filename--external {
  color: #E67E22;
}

.do-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.do-modal-tab-content--display .do-modal-attachment-filename--external {
  color: #E67E22;
}

.do-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.do-modal-attachment-size {
  color: #666666;
}

.do-modal-attachment-date {
  color: #666666;
}

.do-modal-attachment-uploadedby {
  color: #333333;
}

.do-modal-tab-content--display .do-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.do-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.do-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.do-modal-attachment-browse-btn:focus {
  outline: none;
}

.do-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.do-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.do-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-attachment-browse-btn--disabled .do-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.do-modal-tab-content--display .do-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.do-modal-tab-content--display .do-modal-attachment-filename.do-modal-attachment-filename--external {
  color: #E67E22;
}

.do-modal-tab-content--display .do-modal-attachment-type {
  color: #666666;
}

.do-modal-tab-content--display .do-modal-attachment-size {
  color: #666666;
}

.do-modal-tab-content--display .do-modal-attachment-date {
  color: #666666;
}

.do-modal-tab-content--display .do-modal-attachment-uploadedby {
  color: #333333;
}

.do-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.do-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.do-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.do-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.do-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.do-modal-tab-content--display .do-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.do-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.do-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.do-modal-tab-content--display .do-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.do-modal-basic-section--external .do-modal-form-input:focus {
  border-color: #F5B041;
}

.do-modal-basic-section--external .do-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.do-modal-tab-content--external .do-modal-form-input:focus,
.do-modal-tab-content--external .do-modal-form-textarea:focus,
.do-modal-tab-content--external .do-modal-custom-dropdown-input:focus,
.do-modal-tab-content--external .do-modal-date-input:focus,
.do-modal-tab-content--external .do-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.do-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.do-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.do-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.do-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.do-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.do-modal-tab-content--display .do-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.do-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.do-modal-tab-content--display .do-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.do-modal-partner-header-section--external .do-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.do-modal-notes-header-section {
  background-color: #FFFFFF;
  margin: 0 -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.do-modal-notes-header-section > * {
  width: 100%;
  max-width: 62.5rem;
}

.do-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.do-modal-tab-content--display .do-modal-notes-header-section {
  background-color: #FFFFFF;
}

/* Notes Checkbox Styles */
.do-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.do-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.do-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.do-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.do-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.do-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.do-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.do-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.do-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.do-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.do-modal-chat-section {
  padding: 1.5rem 0;
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
}

.do-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.do-modal-chat-header h3 {
  margin: 0;
}

.do-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.do-modal-chat-new-thread .do-modal-form-textarea {
  min-height: 5rem;
}

.do-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.do-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.do-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.do-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.do-modal-chat-message--main {
  background-color: #FAFAFA;
}

.do-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.do-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.do-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.do-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.do-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.do-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.do-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.do-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.do-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.do-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-tab-content--display .do-modal-chat-user-name {
  color: #333333 !important;
}

.do-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.do-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.do-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.do-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.do-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.do-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.do-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.do-modal-chat-reply-btn:hover .do-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.do-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.do-modal-chat-replies .do-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.do-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.do-modal-chat-reply-input .do-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.do-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.do-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.do-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.do-modal-tab-content--display .do-modal-chat-thread {
  border-color: #E5E5E5;
}

.do-modal-tab-content--display .do-modal-chat-message--main {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display .do-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.do-modal-tab-content--display .do-modal-chat-user-position {
  background-color: #E8F5E9;
}

.do-modal-tab-content--display .do-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling — plain layout like Additional/Custom sections (no full-bleed, no extra top padding) */
.do-modal-notes-header-section--external {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0 0 1.5rem 0;
  border-bottom: none;
}

.do-modal-tab-content--display .do-modal-notes-header-section--external {
  background-color: #FFFFFF;
}

.do-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.do-modal-notes-header-section--external .do-modal-form-textarea:focus {
  border-color: #F5B041;
}

.do-modal-chat-section--external .do-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.do-modal-chat-avatar--external {
  background-color: #F5B041;
}

.do-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.do-modal-tab-content--display .do-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-thread {
  border-color: #E5E5E5;
}

.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-message--main {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-user-name {
  color: #333333 !important;
}

.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-user-position {
  background-color: #FDE8D0;
}

.do-modal-tab-content--display.do-modal-tab-content--external .do-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.do-modal-chat-reply-btn--external {
  color: #E67E22;
}

.do-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.do-modal-chat-reply-btn--external .do-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.do-modal-chat-reply-btn--external:hover .do-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.do-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.do-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.do-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.do-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.do-modal-chat-textarea-wrapper {
  position: relative;
}

.do-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.do-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.do-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.do-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.do-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.do-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.do-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.do-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.do-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.do-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.do-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.do-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.do-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.do-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.do-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.do-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.do-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.do-modal-tab-content--display .do-modal-table-empty-state-title {
  color: #666666;
}

.do-modal-tab-content--display .do-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.do-modal-partner-header-section + .do-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.do-modal-partner-header-section + .do-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.do-modal-partner-header-section + .do-modal-item-content-section .do-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.do-modal-partner-header-section + .do-modal-item-content-section .do-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.do-modal-partner-header-section + .do-modal-item-content-section .do-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.do-modal-partner-header-section + .do-modal-item-content-section .do-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.do-modal-partner-header-section + .do-modal-item-content-section .do-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.do-modal-partner-table-container .do-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.do-modal-partner-table-container .do-modal-partner-table th:last-child,
.do-modal-partner-table-container .do-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.do-modal-detail-table-container--external.do-modal-partner-table-container .do-modal-partner-table th:last-child,
.do-modal-detail-table-container--external.do-modal-partner-table-container .do-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.do-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.do-modal-item-header-section .do-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-tab-content--display .do-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.do-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.do-modal-tab-content--display .do-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.do-modal-item-header-section--external .do-modal-form-input:focus {
  border-color: #F5B041;
}

.do-modal-item-header-section--external .do-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.do-modal-detail-subtabs--external .do-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.do-modal-detail-subtabs--external .do-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.do-modal-detail-subtabs--external .do-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.do-modal-tab-content--display .do-modal-detail-subtabs--external .do-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.do-modal-tab-content--display .do-modal-detail-subtabs--external .do-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.do-modal-tab-content.do-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.do-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.do-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.do-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.do-modal-item-table-wrapper .do-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.do-modal-item-table-wrapper .do-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.do-modal-item-table-wrapper--terms .do-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.do-modal-tab-content--external.do-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.do-modal-tab-content--external .do-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.do-modal-tab-content--external .do-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.do-modal-tab-content--external .do-modal-item-table-wrapper--terms .do-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.do-modal-tab-content--external .do-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.do-modal-item-table-wrapper--terms .do-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.do-modal-item-table-wrapper--terms .do-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.do-modal-item-table-wrapper--terms .do-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #FCFCFC;
}

.do-modal-item-table-wrapper--terms .do-modal-detail-table tr {
  height: auto;
}

.do-modal-item-table-wrapper--terms .do-modal-detail-table-container .do-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.do-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.do-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.do-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.do-modal-volume-input-group .do-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.do-modal-volume-input-group .do-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.do-modal-volume-input-group .do-modal-sla-input-wrapper .do-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.do-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.do-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.do-modal-volume-uom-list--display .do-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-volume-uom-list--display .do-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.do-modal-volume-uom-list--display .do-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-volume-uom-list--display .do-modal-volume-uom-check {
  color: #999999 !important;
}

.do-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.do-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.do-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.do-modal-volume-uom-dropdown--display .do-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.do-modal-volume-uom-dropdown--display .do-modal-volume-uom-item:hover {
  background-color: transparent;
}

.do-modal-volume-uom-dropdown--display .do-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.do-modal-volume-uom-dropdown--display .do-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.do-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.do-modal-weight-input-group .do-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.do-modal-weight-input-group .do-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.do-modal-weight-input-group .do-modal-sla-input-wrapper .do-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.do-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.do-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-weight-uom-input::placeholder {
  color: #999999;
}

.do-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.do-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.do-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.do-modal-weight-uom-dropdown--display .do-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.do-modal-weight-uom-dropdown--display .do-modal-weight-uom-item:hover {
  background-color: transparent;
}

.do-modal-weight-uom-dropdown--display .do-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.do-modal-weight-uom-dropdown--display .do-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.do-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.do-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.do-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.do-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.do-modal-form-input--display ~ .do-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.do-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.do-modal-form-input--display {
  cursor: default;
}

.do-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.do-modal-form-label--display {
  color: #333333 !important;
}

.do-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.do-modal-form-label--display .do-modal-required {
  color: #FF4D4F;
}

.do-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.do-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.do-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.do-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.do-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.do-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.do-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.do-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.do-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.do-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.do-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.do-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.do-modal-sla-spinner-btn:disabled .do-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.do-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sla-spinner-btn:hover .do-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.do-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.do-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.do-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.do-modal-divider {
  /* Bleed past the parent's 40px horizontal padding so the line spans
     the full modal width (matching .do-modal-partner-header-section's
     full-width border-bottom). */
  width: calc(100% + 5rem);
  position: relative;
  left: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.do-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.do-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.do-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.do-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.do-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.do-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.do-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.do-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.do-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.do-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.do-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.do-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.do-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.do-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.do-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.do-modal-stage-dropdown-input--display .do-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.do-modal-stage-dropdown-input--display .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.do-modal-stage-section {
  width: 25.6%;
  min-width: 19rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.do-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.do-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.do-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.do-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.do-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.do-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.do-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.do-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.do-modal-accordion-header--display {
  color: #333333;
}

.do-modal-accordion-header--display.do-modal-accordion-header--active {
  color: #333333;
}

.do-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.do-modal-accordion-header--display .do-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.do-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.do-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.do-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.do-modal-stage-main-title--display {
  color: #138B4C;
}

.do-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-stage-title--display {
  color: #333333;
}

.do-modal-stage-current {
  margin-bottom: 1.875rem;
}

.do-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.do-modal-stage-label--display {
  color: #666666;
}

.do-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-stage-subtitle--display {
  color: #333333;
}

.do-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.do-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.do-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.do-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.do-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.do-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.do-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.do-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.do-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.do-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.do-modal-download-button:active {
  background-color: #E0E0E0;
}

.do-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-download-button--display .do-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.do-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.do-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.do-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.do-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.do-modal-timeline-item--display .do-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.do-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.do-modal-timeline-badge--inactive .do-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.do-modal-timeline-item--display .do-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.do-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.do-modal-timeline-item--display .do-modal-timeline-line {
  background-color: #138B4C;
}

.do-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.do-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.do-modal-timeline-status--display {
  color: #333333;
}

.do-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.do-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.do-modal-timeline-date--display {
  color: #666666;
}

.do-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.do-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.do-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.do-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.do-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.do-modal-timeline-document--display {
  color: #138B4C;
}

.do-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.do-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.do-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.do-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.do-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.do-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.do-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.do-modal-activity-item--display .do-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.do-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.do-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.do-modal-activity-item--display .do-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.do-modal-activity-item--display .do-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.do-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.do-modal-activity-item--display .do-modal-activity-line {
  background-color: #138B4C;
}

.do-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.do-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.do-modal-activity-type--display {
  color: #333333;
}

.do-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.do-modal-activity-header--display {
  color: #666666;
}

.do-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.do-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.do-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.do-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.do-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.do-modal-activity-change--display .do-modal-activity-field {
  color: #333333;
}

.do-modal-activity-change--display .do-modal-activity-new {
  color: #138B4C;
}

.do-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.do-modal-activity-date--display {
  color: #666666;
}

.do-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.do-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.do-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.do-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.do-modal-activity-more--display {
  color: #138B4C;
}

.do-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-activity-more--display .do-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.do-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.do-modal-reference-table thead {
  background-color: #FCFCFC;
}

.do-modal-tab-content--display .do-modal-reference-table thead {
  background-color: #FAFAFA;
}

.do-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.do-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.do-modal-tab-content--display .do-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.do-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.do-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.do-modal-tab-content--display .do-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.do-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.do-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.do-modal-detail-subtab:hover {
  color: #138B4C;
}

.do-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.do-modal-tab-content--display .do-modal-detail-subtab {
  color: #666666;
}

.do-modal-tab-content--display .do-modal-detail-subtab:hover {
  color: #138B4C;
}

.do-modal-tab-content--display .do-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.do-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.do-modal-tab-content.do-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.do-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.do-modal-detail-delivery-wrapper .do-modal-form-label {
  flex-shrink: 0;
}

.do-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.do-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.do-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.do-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.do-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.do-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.do-modal-detail-table-container .do-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.do-modal-detail-table-container .do-modal-detail-table thead {
  background-color: #FCFCFC;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.do-modal-detail-table-container .do-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #FCFCFC;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-detail-table-container .do-modal-detail-table th:not(.detail-table-frozen-item):not(.detail-table-frozen-product):not(.detail-table-frozen-description) {
  position: relative;
}

/* Column resize handle for detail tables */
.do-modal-detail-table .do-modal-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3125rem;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 20;
}

.do-modal-detail-table .do-modal-column-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.do-modal-detail-table .do-modal-column-resize-handle:hover::after {
  background-color: #408952;
}

.do-modal-detail-table .do-modal-column-resize-handle--active::after {
  background-color: #408952;
}

/* Sortable table header hover effect */
.do-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.do-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.do-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.do-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.do-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.do-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.do-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-detail-table th,
.do-modal-tab-content--display .do-modal-packaging-table th,
.do-modal-tab-content--display .do-modal-partner-table th,
.do-modal-tab-content--display .do-modal-attachment-table th {
  color: #333333;
}

.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-detail-table td,
.do-modal-tab-content--display .do-modal-packaging-table td,
.do-modal-tab-content--display .do-modal-partner-table td,
.do-modal-tab-content--display .do-modal-attachment-table td {
  color: #333333;
}

/* Display Mode - ALL cells uniform background */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Display Mode - ALL child elements inside cells must be transparent */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-detail-table tbody td * {
  background-color: transparent !important;
  background: transparent !important;
}


/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-frozen-product,
tbody tr:hover .detail-table-frozen-description,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-description,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-text,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-available-qty,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-batch,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-serial,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-sales-order,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-so-item,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-pr-item,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-package-no,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-product-type,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-product-group,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-product-category,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .detail-table-product-variant,
.do-modal-tab-content--display .do-modal-detail-table tbody tr:hover .do-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-frozen-product,
tbody tr:hover .detail-table-frozen-description,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-description,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-text,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-available-qty,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-batch,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-serial,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-sales-order,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-so-item,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-pr-item,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-package-no,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-type,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-group,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-category,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-variant,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .do-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.do-modal-detail-table-container .do-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.do-modal-detail-table-container .do-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.do-modal-detail-table-container .do-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.do-modal-detail-table-container--external .do-modal-detail-table td {
  color: #555555 !important;
}

.do-modal-detail-table-container .do-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  box-sizing: border-box;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Error state for detail-table cells — recolor the input's existing 1px
   transparent border-bottom to red. Matches the subtle single-line style used
   by the Multiple Sales Order table. */
.do-modal-detail-table td .do-modal-handling-product-input.do-modal-table-cell--error,
.do-modal-detail-table td .do-modal-handling-product-input.do-modal-table-cell--error:focus,
.do-modal-detail-table td .do-modal-handling-product-input.do-modal-table-cell--error:hover {
  border-bottom-color: #DC3545 !important;
}

/* Frozen columns for detail table */
.do-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FCFCFC !important;
  min-width: 5rem;
}

.do-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.do-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #FCFCFC !important;
  color: #555555;
}

.do-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #FCFCFC !important;
  min-width: 10rem;
}

.do-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.do-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #FCFCFC !important;
  color: #555555;
}

.do-modal-detail-table .detail-table-frozen-description {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
  background-color: #FCFCFC !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
  min-width: 12.5rem;
}

.do-modal-detail-table thead .detail-table-frozen-description {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.do-modal-detail-table tbody td.detail-table-frozen-description {
  background-color: #FCFCFC !important;
  color: #555555;
}

/* Description column - non-editable style */
.do-modal-detail-table tbody td.detail-table-description {
  background-color: #FCFCFC;
  color: #555555;
}

/* Text column - non-editable style */
.do-modal-detail-table tbody td.detail-table-text {
  background-color: #FCFCFC;
}

/* Remaining Qty column - non-editable style */
.do-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.do-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Secured Qty column - display mode style */
.do-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Batch column - display mode style */
.do-modal-detail-table tbody td.detail-table-batch {
  background-color: #FCFCFC;
  color: #555555;
}

/* Serial Number column - display mode style */
.do-modal-detail-table tbody td.detail-table-serial {
  background-color: #FCFCFC;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.do-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #FCFCFC;
}

/* SO Item column - non-editable style */
.do-modal-detail-table tbody td.detail-table-so-item {
  background-color: #FCFCFC;
}

/* Purchase Requisition column - non-editable style */
.do-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #FCFCFC;
}

/* PR Item column - non-editable style */
.do-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #FCFCFC;
}

/* Package No. column - non-editable style */
.do-modal-detail-table tbody td.detail-table-package-no {
  background-color: #FCFCFC;
}

/* Shipment No. column - non-editable style */
.do-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #FCFCFC;
}

/* Product Type column - non-editable style */
.do-modal-detail-table tbody td.detail-table-product-type {
  background-color: #FCFCFC;
}

/* Product Group column - non-editable style */
.do-modal-detail-table tbody td.detail-table-product-group {
  background-color: #FCFCFC;
}

/* Product Category column - non-editable style */
.do-modal-detail-table tbody td.detail-table-product-category {
  background-color: #FCFCFC;
}

/* Product Variant column - non-editable style */
.do-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #FCFCFC;
}

.do-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.do-modal-detail-table tbody tr:hover .detail-table-frozen-product,
tbody tr:hover .detail-table-frozen-description,
.do-modal-detail-table tbody tr:hover .detail-table-description,
.do-modal-detail-table tbody tr:hover .detail-table-text,
.do-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.do-modal-detail-table tbody tr:hover .detail-table-available-qty,
.do-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.do-modal-detail-table tbody tr:hover .detail-table-batch,
.do-modal-detail-table tbody tr:hover .detail-table-serial,
.do-modal-detail-table tbody tr:hover .detail-table-sales-order,
.do-modal-detail-table tbody tr:hover .detail-table-so-item,
.do-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.do-modal-detail-table tbody tr:hover .detail-table-pr-item,
.do-modal-detail-table tbody tr:hover .detail-table-package-no,
.do-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.do-modal-detail-table tbody tr:hover .detail-table-product-type,
.do-modal-detail-table tbody tr:hover .detail-table-product-group,
.do-modal-detail-table tbody tr:hover .detail-table-product-category,
.do-modal-detail-table tbody tr:hover .detail-table-product-variant,
.do-modal-detail-table tbody tr:hover .do-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-frozen-product,
tbody tr:hover .detail-table-frozen-description,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-description,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-text,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-available-qty,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-batch,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-serial,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-sales-order,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-so-item,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-pr-item,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-package-no,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-type,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-group,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-category,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .detail-table-product-variant,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .do-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.do-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.do-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.do-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.do-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.do-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.do-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.do-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.do-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.do-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.do-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.do-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.do-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.do-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.do-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.do-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.do-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for delete cell */
.do-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Edit Icon Button */
.do-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.do-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.do-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.do-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.do-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.do-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.do-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.do-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.do-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.do-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.do-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.do-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.do-modal-add-item-btn--disabled .do-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.do-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.do-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.do-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.do-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.do-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.do-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table thead {
  background-color: #FCFCFC;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #FCFCFC;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.do-modal-sales-order-table-container .do-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.do-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FCFCFC !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.do-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.do-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #FCFCFC !important;
}

.do-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.do-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.do-modal-table-input:focus {
  outline: none;
}

.do-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.do-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.do-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.do-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.do-modal-tags-container {
  position: relative;
  width: 100%;
}

.do-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.do-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.do-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.do-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.do-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.do-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.do-modal-tags-input--display .do-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.do-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.do-modal-tag-remove:hover {
  color: #333333;
}

.do-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.do-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.do-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.do-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.do-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.do-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.do-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #FCFCFC;
}

.do-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.do-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.do-modal-status-container {
  position: relative;
  width: 100%;
}

.do-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.do-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.do-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.do-modal-status-placeholder {
  color: #999999;
}

.do-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.do-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.do-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.do-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-status-item:hover {
  background-color: #F5F5F5;
}

.do-modal-status-item--selected {
  background-color: #E8F5E9;
}

.do-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.do-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.do-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.do-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.do-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.do-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.do-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.do-modal-status-input--display .do-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.do-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.do-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.do-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.do-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.do-modal-stage-dropdown-placeholder {
  color: #999999;
}

.do-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.do-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.do-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.do-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.do-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.do-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.do-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.do-modal-stage--created .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.do-modal-stage--approved .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.do-modal-stage--processed .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.do-modal-stage--picked .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.do-modal-stage--packed .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.do-modal-stage--planned .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.do-modal-stage--loaded .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.do-modal-stage--issued .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.do-modal-stage--departed .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.do-modal-stage--arrived .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.do-modal-stage--unloaded .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.do-modal-stage--delivered .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.do-modal-stage--confirmed .do-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.do-modal-stage--billed .do-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.do-modal-stage-dropdown-input .do-modal-stage,
.do-modal-stage-dropdown-item .do-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.do-modal-baseline-date-dropdown {
  position: relative;
}

.do-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.do-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.do-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.do-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.do-modal-reference-type-dropdown {
  position: relative;
}

.do-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.do-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.do-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.do-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.do-modal-delivery-priority-dropdown {
  position: relative;
}

.do-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.do-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.do-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.do-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.do-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.do-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.do-modal-delivery-priority-separator {
  color: #666666;
}

.do-modal-delivery-priority-name {
  color: #333333;
}

.do-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.do-modal-organization-dropdown {
  position: relative;
}

.do-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.do-modal-organization-dropdown-content--display .do-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-organization-dropdown-content--display .do-modal-organization-item:hover {
  background-color: transparent !important;
}

.do-modal-organization-dropdown-content--display .do-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-organization-dropdown-content--display .do-modal-organization-code,
.do-modal-organization-dropdown-content--display .do-modal-organization-name,
.do-modal-organization-dropdown-content--display .do-modal-organization-separator {
  color: #999999 !important;
}

.do-modal-organization-dropdown-content--display .do-modal-organization-check {
  color: #999999 !important;
}

.do-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.do-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.do-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-organization-separator {
  color: #999999;
}

.do-modal-organization-name {
  color: #333333;
}

.do-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.do-modal-sales-structure-dropdown {
  position: relative;
}

.do-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.do-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.do-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.do-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.do-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-sales-structure-separator {
  color: #999999;
}

.do-modal-sales-structure-name {
  color: #333333;
}

.do-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.do-modal-delivery-type-dropdown {
  position: relative;
}

.do-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.do-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.do-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.do-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.do-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.do-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.do-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.do-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.do-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.do-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-delivery-type-separator {
  color: #999999;
}

.do-modal-delivery-type-description {
  color: #333333;
}

.do-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.do-modal-content::-webkit-scrollbar,
.do-modal-stage-content::-webkit-scrollbar,


.do-modal-content::-webkit-scrollbar-track,
.do-modal-stage-content::-webkit-scrollbar-track,


.do-modal-content::-webkit-scrollbar-thumb,
.do-modal-stage-content::-webkit-scrollbar-thumb,


.do-modal-content::-webkit-scrollbar-thumb:hover,
.do-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.do-modal-sales-channel-dropdown {
  position: relative;
}

.do-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.do-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.do-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.do-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-sales-channel-separator {
  color: #999999;
}

.do-modal-sales-channel-name {
  color: #333333;
}

.do-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.do-modal-sales-unit-dropdown {
  position: relative;
}

.do-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.do-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.do-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.do-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-sales-unit-separator {
  color: #999999;
}

.do-modal-sales-unit-name {
  color: #333333;
}

.do-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.do-modal-organization-item--placeholder,
.do-modal-sales-structure-item--placeholder,
.do-modal-sales-channel-item--placeholder,
.do-modal-sales-unit-item--placeholder,
.do-modal-territory-item--placeholder,
.do-modal-sales-office-item--placeholder,
.do-modal-sold-to-party-item--placeholder,
.do-modal-deliver-to-party-item--placeholder,
.do-modal-attention-to-deliver-item--placeholder,
.do-modal-incoterm-item--placeholder,
.do-modal-delivery-point-item--placeholder,
.do-modal-shipping-point-item--placeholder,
.do-modal-sales-order-item--placeholder,
.do-modal-sales-team-item--placeholder,
.do-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.do-modal-organization-item--placeholder:hover,
.do-modal-sales-structure-item--placeholder:hover,
.do-modal-sales-channel-item--placeholder:hover,
.do-modal-sales-unit-item--placeholder:hover,
.do-modal-territory-item--placeholder:hover,
.do-modal-sales-office-item--placeholder:hover,
.do-modal-sold-to-party-item--placeholder:hover,
.do-modal-deliver-to-party-item--placeholder:hover,
.do-modal-attention-to-deliver-item--placeholder:hover,
.do-modal-incoterm-item--placeholder:hover,
.do-modal-delivery-point-item--placeholder:hover,
.do-modal-shipping-point-item--placeholder:hover,
.do-modal-sales-order-item--placeholder:hover,
.do-modal-sales-team-item--placeholder:hover,
.do-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.do-modal-sold-to-party-dropdown {
  position: relative;
}

.do-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-sold-to-party-input:focus,
.do-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.do-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.do-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.do-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.do-modal-sold-to-party-separator {
  color: #999999;
}

.do-modal-sold-to-party-name {
  color: #333333;
}

.do-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.do-modal-deliver-to-party-dropdown {
  position: relative;
}

.do-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.do-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.do-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.do-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.do-modal-deliver-to-party-separator {
  color: #999999;
}

.do-modal-deliver-to-party-name {
  color: #333333;
}

.do-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.do-modal-attention-to-deliver-dropdown {
  position: relative;
}
.do-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.do-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.do-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.do-modal-attention-to-deliver-separator {
  color: #999999;
}
.do-modal-attention-to-deliver-name {
  color: #333333;
}
.do-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.do-modal-incoterm-dropdown {
  position: relative;
}
.do-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.do-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.do-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.do-modal-incoterm-separator {
  color: #999999;
}
.do-modal-incoterm-name {
  color: #333333;
}
.do-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.do-modal-delivery-point-dropdown {
  position: relative;
}
.do-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.do-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.do-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.do-modal-delivery-point-separator {
  color: #999999;
}
.do-modal-delivery-point-name {
  color: #333333;
}
.do-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.do-modal-shipping-point-dropdown {
  position: relative;
}
.do-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.do-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.do-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.do-modal-shipping-point-separator {
  color: #999999;
}
.do-modal-shipping-point-name {
  color: #333333;
}
.do-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.do-modal-sales-order-dropdown {
  position: relative;
}
.do-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.do-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.do-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.do-modal-sales-order-separator {
  color: #999999;
}
.do-modal-sales-order-name {
  color: #333333;
}
.do-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.do-modal-date-picker {
  position: relative;
}
.do-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.do-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.do-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.do-modal-date-input::-webkit-datetime-edit-text,
.do-modal-date-input::-webkit-datetime-edit-month-field,
.do-modal-date-input::-webkit-datetime-edit-day-field,
.do-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.do-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.do-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Representative Dropdown Styles */
.do-modal-sales-person-dropdown {
  position: relative;
}
.do-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.do-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.do-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.do-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.do-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.do-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.do-modal-sales-person-separator {
  color: #999999;
}
.do-modal-sales-person-name {
  color: #333333;
}
.do-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.do-modal-sales-team-dropdown {
  position: relative;
}
.do-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.do-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.do-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.do-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.do-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.do-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.do-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.do-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.do-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.do-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.do-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.do-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.do-modal-sales-team-separator {
  color: #999999;
}
.do-modal-sales-team-name {
  color: #333333;
}
.do-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.do-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.do-modal-territory-dropdown {
  position: relative;
}

.do-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.do-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.do-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.do-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-territory-separator {
  color: #999999;
}

.do-modal-territory-name {
  color: #333333;
}

.do-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.do-modal-sales-office-dropdown {
  position: relative;
}

.do-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.do-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.do-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.do-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.do-modal-sales-office-separator {
  color: #999999;
}

.do-modal-sales-office-name {
  color: #333333;
}

.do-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.do-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.do-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.do-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.do-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.do-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.do-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.do-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.do-modal-table-dropdown-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary, #138B4C);
  outline: none;
}

.do-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Error state for table dropdown inputs — recolor the td's bottom border red
   so the underline aligns exactly with the column's existing cell border.
   Neutralize the input's own border (which would otherwise render a second
   red line 4px above the cell edge due to the generic .do-modal-input--error
   rule) so only a single red line shows at the exact cell bottom. */
.do-modal-reference-table td:has(.do-modal-table-dropdown-input.do-modal-input--error) {
  border-bottom-color: #DC3545 !important;
}
.do-modal-reference-table td .do-modal-table-dropdown-input.do-modal-input--error,
.do-modal-reference-table td .do-modal-table-dropdown-input.do-modal-input--error:focus,
.do-modal-reference-table td .do-modal-table-dropdown-input.do-modal-input--error:hover {
  border-color: transparent !important;
  border-bottom-color: transparent !important;
}

.do-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.do-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-dropdown-content {
  position: absolute;
  /* Offset = td bottom padding (4px) + td bottom border (1px) + small visual gap (3px)
     so the dropdown sits just below the cell's bottom border, not flush against it. */
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}


.do-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.do-modal-delivery-type-list::-webkit-scrollbar,
.do-modal-stage-dropdown-list::-webkit-scrollbar,
.do-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.do-modal-delivery-type-list::-webkit-scrollbar-track,
.do-modal-stage-dropdown-list::-webkit-scrollbar-track,
.do-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-delivery-type-list::-webkit-scrollbar-thumb,
.do-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.do-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.do-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.do-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.do-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.do-modal-wrapper,
.do-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.delivery-order-modal,
.do-modal-wrapper,
.do-modal-wrapper *,
.do-modal-content,
.do-modal-data-flow-2-container,
.do-modal-data-flow-container,
.do-modal-calendar-container,
.do-modal-calendar-milestones-list,
.do-modal-calendar-view,
.do-modal-calendar-yearly,
.do-modal-calendar-monthly,
.do-modal-calendar-weekly,
.do-modal-calendar-weekly-body,
.do-modal-calendar-daily,
.do-modal-calendar-daily-timeline,
.do-modal-calendar-grid,
.do-modal-calendar-grid-body,
.do-modal-detail-table-container,
.do-modal-item-table-wrapper,
.do-modal-attachment-table-container,
.do-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.do-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.do-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.do-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.do-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.do-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.do-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.do-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #FCFCFC;
}

.do-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #FCFCFC;
}

.do-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-tab-content--display .do-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.do-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-tab-content--display .do-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.do-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.do-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.do-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) {
  font-weight: 600;
}

.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) .do-modal-packaging-input,
.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) .do-modal-packaging-input--display,
.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) .do-modal-handling-product-input,
.do-modal-packaging-row--unassigned:not(.do-modal-packaging-row--expanded) .do-modal-handling-product-input--display {
  font-weight: 600;
}

.do-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.do-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row td.do-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row td.do-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row td.do-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td.do-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded td.do-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row--expanded:hover td.do-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display,
.do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display,
.do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.do-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.do-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-tab-content--display .do-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.do-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-tab-content--display .do-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.do-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.do-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.do-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.do-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.do-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.do-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.do-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.do-modal-packaging-detail-table th:first-child,
.do-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.do-modal-packaging-detail-table th:nth-child(2),
.do-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.do-modal-packaging-detail-table th:nth-child(3),
.do-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.do-modal-packaging-detail-table td:nth-child(4),
.do-modal-packaging-detail-table td:nth-child(6),
.do-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.do-modal-packaging-detail-table td:nth-child(5),
.do-modal-packaging-detail-table td:nth-child(7),
.do-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.do-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.do-modal-tab-content--display .do-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display .do-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.do-modal-tab-content--display .do-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.do-modal-tab-content--display .do-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.do-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.do-modal-packaging-table td:last-child,
.do-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.do-modal-packaging-table td:last-child .do-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.do-modal-detail-table-container--external .do-modal-packaging-table th:last-child,
.do-modal-detail-table-container--external .do-modal-packaging-table td.do-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.do-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.do-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.do-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.do-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.do-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.do-modal-packaging-child-table thead {
  background-color: #FCFCFC !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.do-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.do-modal-packaging-child-table tbody tr {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table tbody tr:hover {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table th {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table td {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table th:hover {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table td:hover {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table tbody tr:hover td {
  background-color: #FCFCFC !important;
}

.do-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.do-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.do-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.do-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.do-modal-packaging-child-table tr {
  border: none !important;
}

.do-modal-packaging-child-table thead,
.do-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.do-modal-packaging-child-table th:first-child,
.do-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.do-modal-packaging-child-table th:nth-child(2),
.do-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.do-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.do-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.do-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.do-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.do-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.do-modal-packaging-child-table th:nth-child(3),
.do-modal-packaging-child-table td:nth-child(3),
.do-modal-packaging-child-table th:nth-child(4),
.do-modal-packaging-child-table td:nth-child(4),
.do-modal-packaging-child-table th:nth-child(5),
.do-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.do-modal-packaging-child-table th:nth-child(6),
.do-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.do-modal-packaging-child-table th:nth-child(7),
.do-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.do-modal-detail-table-container--external .do-modal-packaging-child-table th:last-child,
.do-modal-detail-table-container--external .do-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.do-modal-packaging-child-table td:last-child .do-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.do-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.do-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.do-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.do-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.do-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row {
  transition: none !important;
}

.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display,
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display:focus,
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display,
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display:focus,
.do-modal-tab-content--display .do-modal-detail-table-container .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display:focus,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display:focus,
.do-modal-tab-content--display .do-modal-detail-table-container--external .do-modal-packaging-table tbody tr.do-modal-packaging-row:hover td .do-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.do-modal-detail-table-container--external .do-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.do-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.do-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.do-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: none;
  cursor: pointer;
  margin: 0;
}

.do-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.do-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input — non-editable #FCFCFC */
.do-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.do-modal-handling-product-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.do-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.do-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.do-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.do-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.do-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.do-modal-detail-table-container--external .do-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.do-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
  cursor: pointer;
}

/* Display mode dropdown content styling */
.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-item--display {
  color: #999999 !important;
}

.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-code,
.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-name,
.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-separator {
  color: #999999 !important;
}

.do-modal-handling-product-dropdown-content--display .do-modal-handling-product-check {
  color: #999999 !important;
}

.do-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.do-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.do-modal-handling-product-dropdown-content--narrow .do-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.do-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.do-modal-packaging-detail-table .do-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.do-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.do-modal-detail-table-container--dropdown-open .do-modal-detail-table {
  overflow: visible;
}

.do-modal-detail-table-container--dropdown-open .do-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.do-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.do-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.do-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.do-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.do-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.do-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.do-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.do-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.do-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.do-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.do-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.do-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.do-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.do-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.do-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.do-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.do-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.do-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.do-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.do-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.do-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.do-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.do-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-item:hover {
  background-color: transparent;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-item--placeholder {
  display: none;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-code,
.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-name,
.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-separator {
  color: #555555;
}

.do-modal-handling-product-dropdown-content--view-only .do-modal-handling-product-check {
  color: #888888;
}

.do-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.do-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.do-modal-handling-product-separator {
  color: #999999;
}

.do-modal-handling-product-name {
  color: #333333;
}

.do-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.do-modal-handling-product-item--placeholder {
  cursor: default;
}

.do-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.do-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.do-modal-detail-table td:has(.do-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

/* Frozen cells must keep sticky even with dropdown inside */
.do-modal-detail-table td.detail-table-frozen-item:has(.do-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.do-modal-detail-table td.detail-table-frozen-product:has(.do-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
}

.do-modal-detail-table td.detail-table-frozen-description:has(.do-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
}

.do-modal-detail-table td .do-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.do-modal-detail-table td .do-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.do-modal-detail-table td .do-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
}

.do-modal-detail-table td .do-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.do-modal-detail-table td .do-modal-handling-product-input--display,
.do-modal-detail-table td .do-modal-handling-product-input--display:focus,
.do-modal-detail-table td .do-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display,
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display:focus,
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display:focus,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Edit mode - editable input green on row hover (Internal PoV) */
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input,
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input:focus,
.do-modal-detail-table-container .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input:hover {
  background-color: #EDF5EC !important;
}

/* Edit mode - editable input orange on row hover (External PoV) */
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input:focus,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover td .do-modal-handling-product-input:hover {
  background-color: #FFF8F0 !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.do-modal-detail-table td .do-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.do-modal-detail-table td .do-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.do-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.do-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.do-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.do-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-table-text-icon-btn--filled:not(.do-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.do-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.do-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.do-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.do-modal-table-text-icon-btn--display.do-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.do-modal-table-text-icon-btn--display.do-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-table-text-icon-btn--display.do-modal-table-text-icon-btn--external.do-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.do-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.do-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.do-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.do-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.do-modal-serial-assignment-btn {
  width: 10.625rem;
}

.do-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.do-modal-batch-assignment-btn--filled .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.do-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.do-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.do-modal-batch-assignment-btn--display .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-batch-assignment-btn--display.do-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.do-modal-batch-assignment-btn--display.do-modal-batch-assignment-btn--filled .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.do-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.do-modal-secured-qty-btn.do-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.do-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.do-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.do-modal-secured-qty-btn--grey .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.do-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.do-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.do-modal-batch-assignment-btn--partial .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.do-modal-batch-assignment-btn--display.do-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.do-modal-batch-assignment-btn--display.do-modal-batch-assignment-btn--partial .do-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.do-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.do-modal-secured-qty-modal .do-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.do-modal-secured-qty-modal .do-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.do-modal-secured-qty-modal.do-modal-batch-assignment-modal--display .do-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.do-modal-secured-qty-modal .do-modal-item-text-content {
  overflow-x: hidden;
}

.do-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.do-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.do-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.do-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.do-modal-batch-assignment-modal--display .do-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.do-modal-batch-assignment-modal--display .do-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.do-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.do-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.do-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.do-modal-secured-qty-lock-btn--open .do-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.do-modal-secured-qty-lock-btn--locked .do-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.do-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.do-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.do-modal-batch-assignment-modal .do-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.do-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.do-modal-batch-assignment-modal .do-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.do-modal-batch-assignment-modal .do-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.do-modal-batch-assignment-modal.do-modal-batch-assignment-modal--display .do-modal-item-text-info {
  background-color: #F2F8EA;
}

.do-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.do-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.do-modal-batch-assignment-info-group {
  flex: 1 1;
}

.do-modal-batch-assignment-info-group .do-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.do-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.do-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.do-modal-batch-assignment-table-section .do-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.do-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.do-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.do-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.do-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.do-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.do-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.do-modal-batch-assignment-table th,
.do-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.do-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.do-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.do-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.do-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.do-modal-batch-assignment-table tbody td:has(.do-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.do-modal-batch-assignment-table tbody td:has(.do-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.do-modal-batch-assignment-table tbody td:nth-child(2),
.do-modal-batch-assignment-table tbody td:nth-child(3),
.do-modal-batch-assignment-table tbody td:nth-child(4),
.do-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.do-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.do-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.do-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.do-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.do-modal-batch-assignment-modal--display .do-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.do-modal-batch-assignment-modal--display .do-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.do-modal-batch-assignment-modal--display .do-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-batch-assignment-modal--display .do-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.do-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.do-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.do-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.do-modal-batch-assignment-table .do-modal-placeholder-text {
  color: #CCCCCC;
}

.do-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.do-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.do-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.do-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.do-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.do-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.do-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.do-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.do-modal-batch-assignment-table th.batch-table-frozen-batch,
table.do-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.do-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.do-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.do-modal-batch-assignment-table td.batch-table-frozen-batch,
table.do-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.do-modal-batch-assignment-table th.batch-table-frozen-batch,
table.do-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.do-modal-batch-assignment-table th.batch-table-frozen-assign,
table.do-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.do-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.do-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.do-modal-item-text-info {
  margin-bottom: 1rem;
}

.do-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.do-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.do-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.do-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.do-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.do-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.do-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.do-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-item-text-modal .modal-header .modal-title,
.do-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.do-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.do-modal-item-text-label--display {
  color: #333333;
}

.do-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.do-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.do-modal-item-text-modal .do-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.do-modal-item-text-modal .do-modal-item-text-textarea-wrapper .do-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.do-modal-item-text-textarea {
  overflow-y: auto !important;
}

.do-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.do-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.do-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.do-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.do-modal-add-do-item-modal .do-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.do-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.do-modal-add-do-item-dropdown-section .do-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.do-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.do-modal-add-do-item-table-section .do-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.do-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.do-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.do-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.do-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.do-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.do-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.do-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.do-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.do-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.do-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

/* Large variant — used by Sales Order Item modal and reusable by DO */
.do-modal-add-item-modal--large.do-modal-add-do-item-modal {
  min-width: min(69.375rem, calc(100vw - 2.5rem)) !important;
  max-width: min(69.375rem, calc(100vw - 2.5rem)) !important;
  max-height: calc(100vh - 2.5rem) !important;
}

.do-modal-add-item-modal--large .do-modal-item-text-content {
  min-height: min(37.5rem, calc(100vh - 12.5rem));
  max-height: min(37.5rem, calc(100vh - 12.5rem)) !important;
}

/* Remove the gap between the checkbox column and the next column for every table
   inside the SO/DO reference list modals. */
.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th:first-child,
.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td:first-child {
  padding-right: 0 !important;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th:nth-child(2),
.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td:nth-child(2) {
  padding-left: 0 !important;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-dropdown-section {
  max-width: 33%;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th {
  font-size: 0.75rem;
  padding: 0.625rem 0.75rem;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-input {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.do-modal-add-item-modal--large .modal-header .modal-title,
.do-modal-add-item-modal--large .modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.do-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.do-modal-detail-table td:first-child .do-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.do-modal-detail-table td:first-child .do-modal-partner-type-input {
  padding-left: 0.625rem;
}

.do-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.do-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.do-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.do-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.do-modal-partner-type-dropdown--display .do-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.do-modal-partner-type-dropdown-content--display .do-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-partner-type-dropdown-content--display .do-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.do-modal-partner-type-dropdown-content--display .do-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-partner-type-dropdown-content--display .do-modal-partner-type-check {
  color: #999999 !important;
}

.do-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.do-modal-partner-type-dropdown--display .do-modal-partner-type-value {
  color: #555555;
}

.do-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.do-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.do-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.do-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.do-modal-partner-type-item--placeholder {
  cursor: default;
}

.do-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.do-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.do-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.do-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.do-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.do-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.do-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.do-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.do-modal-partner-id-dropdown--display .do-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-code,
.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-name,
.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-separator {
  color: #999999 !important;
}

.do-modal-partner-id-dropdown-content--display .do-modal-partner-id-check {
  color: #999999 !important;
}

.do-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.do-modal-partner-id-dropdown--display .do-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.do-modal-detail-table tbody tr:hover .do-modal-partner-type-dropdown--display .do-modal-partner-type-input-wrapper,
.do-modal-detail-table tbody tr:hover .do-modal-partner-id-dropdown--display .do-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .do-modal-partner-type-dropdown--display .do-modal-partner-type-input-wrapper,
.do-modal-detail-table-container--external .do-modal-detail-table tbody tr:hover .do-modal-partner-id-dropdown--display .do-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.do-modal-partner-type-arrow--external {
  visibility: hidden;
}

.do-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.do-modal-partner-type-dropdown--external .do-modal-partner-type-value {
  color: #555555;
}

.do-modal-partner-id-dropdown--external .do-modal-partner-id-value {
  color: #555555;
}

.do-modal-detail-table-container--external .do-modal-detail-table td.do-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.do-modal-partner-header-section--external .do-modal-form-input--display {
  color: #555555;
}

.do-modal-detail-table td.do-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.do-modal-tab-content--display .do-modal-detail-table td.do-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.do-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.do-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.do-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.do-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.do-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.do-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.do-modal-partner-id-item--placeholder {
  cursor: default;
}

.do-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.do-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.do-modal-partner-id-separator {
  color: #999999;
}

.do-modal-partner-id-name {
  color: #666666;
}

.do-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.do-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.do-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.do-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.do-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.do-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.do-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.do-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.do-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.do-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.do-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.do-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.do-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.do-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.do-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.do-modal-data-flow-stage--completed .do-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.do-modal-data-flow-stage--active .do-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.do-modal-data-flow-stage--completed .do-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-data-flow-stage--active .do-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.do-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.do-modal-data-flow-stage--completed .do-modal-data-flow-stage-label {
  color: #138B4C;
}

.do-modal-data-flow-stage--active .do-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.do-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.do-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.do-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.do-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.do-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.do-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.do-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.do-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.do-modal-data-flow-document--active .do-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.do-modal-data-flow-document-fold {
  display: none;
}

.do-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.do-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.do-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.do-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.do-modal-data-flow-document-icon-wrapper--active .do-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.do-modal-data-flow-document--active .do-modal-data-flow-document-title {
  color: #138B4C;
}

.do-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.do-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.do-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.do-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.do-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.do-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.do-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.do-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.do-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.do-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.do-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.do-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.do-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.do-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.do-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.do-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.do-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.do-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.do-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.do-modal-terms-area-button .do-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.do-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.do-modal-tab-content--display .do-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.do-modal-tab-content--display .do-modal-terms-area-button .do-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.do-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.do-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.do-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.do-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.do-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.do-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.do-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.do-modal-data-flow-2-row {
  display: flex;
}

.do-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.do-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.do-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.do-modal-data-flow-2-row--content .do-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.do-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.do-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.do-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.do-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-label {
  color: #333333;
}

.do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.do-modal-tab-content--display .do-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage-label {
  color: #999999;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--completed .do-modal-data-flow-2-stage-label {
  color: #333333;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--active .do-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.do-modal-tab-content--display .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.do-modal-tab-content--display .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.do-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.do-modal-data-flow-2-row--content .do-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.do-modal-data-flow-2-row--content .do-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.do-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.do-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.do-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.do-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.do-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.do-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.do-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.do-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.do-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-title,
.do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-title {
  color: #333333;
}

.do-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.do-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.do-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.do-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.do-modal-tab-content--display .do-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-title {
  color: #888888;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-title,
.do-modal-tab-content--display .do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-title {
  color: #333333;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--completed .do-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--active .do-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-date {
  color: #333333;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.do-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.do-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.do-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.do-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.do-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.do-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.do-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.do-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.do-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.do-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.do-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.do-modal-data-flow-2-grid--external .do-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  border-bottom: 1px solid #D0D0D0;
}

.do-modal-data-flow-2-grid--external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell {
  border-bottom: none;
}

.do-modal-data-flow-2-grid--external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell--label {
  background-color: #FCFCFC;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.do-modal-data-flow-2-grid--external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell--label::after {
  display: none;
}

.do-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.do-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.do-modal-data-flow-2-row--content-top .do-modal-data-flow-2-document--buyer.do-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.do-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.do-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.do-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.do-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.do-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.do-modal-data-flow-2-stage--external-completed .do-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.do-modal-data-flow-2-stage--external-active .do-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.do-modal-data-flow-2-stage--external-completed .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.do-modal-data-flow-2-stage--external-active .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.do-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.do-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.do-modal-data-flow-2-document--external .do-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.do-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.do-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.do-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.do-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.do-modal-data-flow-2-document--external .do-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.do-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.do-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.do-modal-data-flow-2-document--supplier .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.do-modal-data-flow-2-document--supplier .do-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.do-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.do-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.do-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.do-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier .do-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier .do-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-completed .do-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--supplier-active .do-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.do-modal-tab-content--data-flow-2-external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.do-modal-tab-content--data-flow-2-external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external .do-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external .do-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external .do-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.do-modal-tab-content--display.do-modal-tab-content--data-flow-2-external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.do-modal-tab-content--display.do-modal-tab-content--data-flow-2-external .do-modal-data-flow-2-row--header .do-modal-data-flow-2-cell:has(.do-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-circle,
.do-modal-tab-content--display .do-modal-data-flow-2-stage--external-completed .do-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--external-active .do-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-icon,
.do-modal-tab-content--display .do-modal-data-flow-2-stage--external-completed .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-stage--external-active .do-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-stage--external .do-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.do-modal-tab-content--display .do-modal-data-flow-2-document--external-completed .do-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.do-modal-tab-content--display .do-modal-data-flow-2-document--external-active .do-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.do-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.do-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.do-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.do-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.do-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.do-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.do-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.do-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.do-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.do-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.do-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.do-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.do-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.do-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.do-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.do-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.do-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.do-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.do-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.do-modal-milestone-date-value {
  color: #666666;
}

.do-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.do-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.do-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.do-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.do-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.do-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.do-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.do-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.do-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.do-modal-activity-item--display .do-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.do-modal-calendar-milestones .do-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.do-modal-calendar-milestones .do-modal-activity-user:hover {
  text-decoration: none;
}

.do-modal-calendar-milestones .do-modal-activity-item--display .do-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.do-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.do-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.do-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.do-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.do-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-calendar-nav-btn:hover .do-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.do-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.do-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.do-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.do-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.do-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.do-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.do-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.do-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.do-modal-calendar-view-mode-btn--active + .do-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.do-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.do-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.do-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.do-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.do-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.do-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.do-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.do-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.do-modal-calendar-grid-cell:nth-child(7n-1),
.do-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.do-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.do-modal-calendar-grid-day-name:nth-child(6),
.do-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.do-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.do-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.do-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.do-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.do-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.do-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.do-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.do-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.do-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.do-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.do-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.do-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.do-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.do-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.do-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.do-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.do-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.do-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.do-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.do-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.do-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.do-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.do-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.do-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.do-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.do-modal-calendar-weekly-day-column:nth-child(6),
.do-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.do-modal-calendar-weekly-day-header:nth-child(6),
.do-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.do-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.do-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.do-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.do-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.do-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.do-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.do-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.do-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.do-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.do-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.do-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.do-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.do-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.do-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.do-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.do-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.do-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.do-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.do-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.do-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.do-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.do-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.do-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.do-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.do-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-view {
  border-color: #D0D0D0;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-view-mode-btn--active + .do-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-milestones-header {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-view-title {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-grid-day-name {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-grid-cell-day {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-weekly-day-name {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-weekly-day-date {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-weekly-event-title {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-daily-header {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-daily-hour-label {
  color: #666666;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-daily-event-title {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar .do-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.do-modal-calendar-milestones-header--external {
  color: #333333;
}

.do-modal-calendar-nav-btn--external .do-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.do-modal-calendar-nav-btn--external:hover .do-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.do-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.do-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.do-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.do-modal-calendar-view-mode-btn--active-external + .do-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.do-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.do-modal-tab-content--calendar-external .do-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.do-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.do-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.do-modal-activity-type--external {
  color: #333333;
}

.do-modal-activity-user--external {
  color: #E67E22;
}

.do-modal-activity-user--external:hover {
  color: #D35400;
}

.do-modal-calendar-milestones .do-modal-activity-user--external {
  color: #E67E22;
}

.do-modal-calendar-milestones .do-modal-activity-user--external:hover {
  color: #D35400;
}

.do-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.do-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.do-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.do-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.do-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.do-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.do-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.do-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.do-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.do-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.do-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.do-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.do-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-milestones-header--external {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-view-mode-btn--active-external + .do-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-calendar-nav-btn--external .do-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-activity-type--external {
  color: #333333;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-activity-user--external {
  color: #E67E22;
}

.do-modal-tab-content--display.do-modal-tab-content--calendar-external .do-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.do-modal-input--error,
.do-modal-form-input.do-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.do-modal-dropdown--error .do-modal-delivery-type-input,
.do-modal-dropdown--error .do-modal-organization-input,
.do-modal-dropdown--error .do-modal-sales-structure-input,
.do-modal-dropdown--error .do-modal-sales-channel-input,
.do-modal-dropdown--error .do-modal-sales-unit-input,
.do-modal-dropdown--error .do-modal-territory-input,
.do-modal-dropdown--error .do-modal-sales-office-input,
.do-modal-dropdown--error .do-modal-sold-to-party-input,
.do-modal-dropdown--error .do-modal-deliver-to-party-input,
.do-modal-dropdown--error .do-modal-attention-to-deliver-input,
.do-modal-dropdown--error .do-modal-incoterm-input,
.do-modal-dropdown--error .do-modal-delivery-point-input,
.do-modal-dropdown--error .do-modal-shipping-point-input,
.do-modal-dropdown--error .do-modal-sales-order-input,
.do-modal-dropdown--error .do-modal-sales-team-input,
.do-modal-dropdown--error .do-modal-sales-person-input,
.do-modal-dropdown--error .do-modal-delivery-priority-input,
.do-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.do-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.do-modal-date-picker-wrapper.do-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.do-modal-custom-dropdown {
  position: relative;
}

.do-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.do-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.do-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.do-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.do-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-check {
  color: #999999 !important;
}

.do-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.do-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.do-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.do-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.do-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.do-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.do-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.do-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.do-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.do-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.do-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.do-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.do-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.do-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.do-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.do-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.do-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.do-modal-setting-form-label--display {
  color: #333333;
}

.do-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.do-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-setting-dropdown--active .do-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.do-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.do-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.do-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.do-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.do-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.do-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.do-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-setting-dropdown-icon.do-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.do-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.do-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.do-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.do-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.do-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.do-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.do-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.do-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.do-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.do-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.do-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.do-modal-setting-dropdown-item-separator {
  color: #999999;
}

.do-modal-setting-dropdown-item-name {
  color: #333333;
}

.do-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.do-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.do-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.do-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.do-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.do-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.do-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.do-modal-setting-tab-content--print .do-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.do-modal-setting-tab-content--print .do-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.do-modal-setting-tab-content--print .do-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FCFCFC;
  z-index: 10;
}

.do-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.do-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.do-modal-setting-table thead tr {
  height: 2.25rem;
}

.do-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.do-modal-setting-table tbody tr {
  height: 2.25rem;
}

.do-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.do-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.do-modal-setting-table tbody td:nth-child(3) {
  background-color: #FCFCFC;
}

/* DO Setting Table Display Mode - keep colorful */
.do-modal-setting-table--display thead th:nth-child(2),
.do-modal-setting-table--display thead th:nth-child(3),
.do-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.do-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.do-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.do-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.do-modal-setting-table--transfer.do-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.do-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.do-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.do-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FCFCFC;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.do-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.do-modal-setting-table--transfer:not(.do-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.do-modal-setting-table--transfer:not(.do-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.do-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.do-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.do-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.do-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.do-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.do-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.do-modal-tab-content--display .do-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.do-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.do-modal-tab-content--display .do-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.do-modal-attribute-header-section--external .do-modal-form-input:focus {
  border-color: #F5B041;
}

.do-modal-attribute-header-section--external .do-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.do-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.do-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.do-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Icon - hover swap from regular to solid */
.do-modal-available-qty-info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  color: #000000;
}

.do-modal-available-qty-info-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
}

.do-modal-available-qty-info-icon--solid {
  display: none;
}

.do-modal-available-qty-info-icon-wrapper:hover .do-modal-available-qty-info-icon--regular,
.do-modal-available-qty-info-icon-wrapper--active .do-modal-available-qty-info-icon--regular {
  display: none;
}

.do-modal-available-qty-info-icon-wrapper:hover .do-modal-available-qty-info-icon--solid,
.do-modal-available-qty-info-icon-wrapper--active .do-modal-available-qty-info-icon--solid {
  display: block;
}

/* Available Qty Info Container */
.do-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.do-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.do-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.do-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.do-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.do-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.do-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.do-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.do-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.do-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.do-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.do-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.do-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.do-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.do-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.do-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.do-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.do-modal-available-qty-tree-level {
  position: relative;
}

.do-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.do-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.do-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.do-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.do-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.do-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.do-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.do-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.do-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.do-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.do-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.do-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.do-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.do-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.do-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.do-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.do-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.do-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.do-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.do-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.do-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.do-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.do-modal-available-qty-tree-batch-header .do-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.do-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.do-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.do-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.do-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.do-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.do-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.do-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.do-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.do-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.do-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.do-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.do-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.do-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.do-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.do-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.do-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.do-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.do-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.do-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.do-modal-activity-type--clickable.do-modal-activity-type--display:hover {
  color: #138B4C;
}

.do-modal-activity-type--clickable.do-modal-activity-type--external:hover {
  color: #E67E00;
}

.do-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.do-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.do-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.do-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.do-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.do-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.do-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.do-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to do-modal-form-label */
.do-modal-activity-detail-content .do-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.do-modal-activity-detail-modal .do-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.do-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.do-modal-activity-detail-modal .do-modal-tabs--display .do-modal-tab {
  color: #333333;
}

.do-modal-activity-detail-modal .do-modal-tabs--display .do-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.do-modal-activity-detail-modal .do-modal-tabs--external.do-modal-tabs--display .do-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.do-modal-activity-detail-tab-content--general .do-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.do-modal-activity-detail-content .do-modal-milestone-status {
  margin: 0;
}

.do-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.do-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.do-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.do-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

/* Field-level chat icon — regular/solid swap on hover */
.so-modal-field-chat-wrapper .so-modal-field-chat-icon--regular { opacity: 1; transition: opacity 150ms ease; }
.so-modal-field-chat-wrapper .so-modal-field-chat-icon--solid { opacity: 0 !important; transition: opacity 150ms ease; }
.so-modal-field-chat-wrapper:hover .so-modal-field-chat-icon--regular { opacity: 0; }
.so-modal-field-chat-wrapper:hover .so-modal-field-chat-icon--solid { opacity: 1 !important; filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(1000%) hue-rotate(100deg) brightness(90%) contrast(95%) !important; }

.do-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.do-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.do-modal-activity-detail-pic-chat-wrapper:hover .do-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.do-modal-activity-detail-pic-chat-wrapper:hover .do-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.do-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.do-modal-activity-detail-pic--clickable:hover .do-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.do-modal-activity-detail-content--external .do-modal-activity-detail-pic {
  color: #E67E22;
}

.do-modal-activity-detail-content--external .do-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.do-modal-activity-detail-content--external .do-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.do-modal-activity-detail-content--external .do-modal-activity-detail-pic--clickable:hover .do-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.do-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.do-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.do-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.do-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.do-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.do-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.do-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.do-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.do-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.do-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.do-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.do-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.do-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.do-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.do-modal-activity-detail-content--external .do-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.do-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.do-modal-activity-detail-content--external .do-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.do-modal-activity-detail-content--external .do-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.do-modal-activity-detail-content--external .do-modal-activity-detail-document-name {
  color: #E67E22;
}

.do-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.do-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.do-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.do-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.do-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.do-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.do-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.do-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.do-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.do-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.do-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.do-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.do-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.do-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.do-modal-activity-detail-tab-content--general {
  padding: 0;
}

.do-modal-activity-detail-tab-content--general .do-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.do-modal-activity-detail-tab-content--general > div:not(.do-modal-item-text-info) {
  padding: 0 1.5rem;
}

.do-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.do-modal-activity-detail-tab-content--attachment,
.do-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.do-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.do-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.do-modal-activity-detail-tab-content--attachment .do-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.do-modal-activity-detail-tab-content--attachment .do-modal-batch-assignment-table-section > .do-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.do-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.do-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.do-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.do-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.do-modal-activity-detail-content--external .do-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.do-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.do-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.do-modal-activity-detail-content--external .do-modal-item-text-info {
  background-color: #FEF5E7;
}

.do-modal-activity-detail-content--external .do-modal-task-notes-section {
  background-color: #FEF5E7;
}

.do-modal-task-notes-section .do-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.do-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.do-modal-task-notes-textarea.do-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.do-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.do-modal-task-chat-section > .do-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.do-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.do-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.do-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.do-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.do-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.do-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.do-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.do-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.do-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.do-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.do-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.do-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.do-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.do-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.do-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.do-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.do-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.do-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.do-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.do-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.do-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.do-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.do-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.do-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.do-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.do-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.do-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.do-modal-activity-detail-content--external .do-modal-task-chat-avatar {
  background-color: #F5B041;
}

.do-modal-activity-detail-content--external .do-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.do-modal-activity-detail-content--external .do-modal-task-chat-reply-btn {
  color: #E67E22;
}

.do-modal-activity-detail-content--external .do-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.do-modal-dropdown--display .do-modal-dropdown-item,
.do-modal-dropdown--display [class*="-item"],
.do-modal-tags-dropdown--display .do-modal-tags-dropdown-item,
.do-modal-baseline-date-dropdown--display .do-modal-baseline-date-item,
.do-modal-reference-type-dropdown--display .do-modal-reference-type-item,
.do-modal-delivery-priority-dropdown--display .do-modal-delivery-priority-item,
.do-modal-organization-dropdown--display .do-modal-organization-item,
.do-modal-sales-structure-dropdown--display .do-modal-sales-structure-item,
.do-modal-delivery-type-dropdown--display .do-modal-delivery-type-item,
.do-modal-sales-channel-dropdown--display .do-modal-sales-channel-item,
.do-modal-sales-unit-dropdown--display .do-modal-sales-unit-item,
.do-modal-sold-to-party-dropdown--display .do-modal-sold-to-party-item,
.do-modal-deliver-to-party-dropdown--display .do-modal-deliver-to-party-item,
.do-modal-attention-to-deliver-dropdown--display .do-modal-attention-to-deliver-item,
.do-modal-incoterm-dropdown--display .do-modal-incoterm-item,
.do-modal-delivery-point-dropdown--display .do-modal-delivery-point-item,
.do-modal-shipping-point-dropdown--display .do-modal-shipping-point-item,
.do-modal-sales-order-dropdown--display .do-modal-sales-order-item,
.do-modal-sales-person-dropdown--display .do-modal-sales-person-item,
.do-modal-sales-team-dropdown--display .do-modal-sales-team-item,
.do-modal-territory-dropdown--display .do-modal-territory-item,
.do-modal-sales-office-dropdown--display .do-modal-sales-office-item,
.do-modal-status-dropdown--display .do-modal-status-item,
.do-modal-handling-product-dropdown--display .do-modal-handling-product-item,
.do-modal-child-uom-dropdown--display .do-modal-child-uom-item,
.do-modal-partner-type-dropdown--display .do-modal-partner-type-item,
.do-modal-partner-id-dropdown--display .do-modal-partner-id-item,
.do-modal-custom-dropdown--display .do-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.do-modal-dropdown--display .do-modal-dropdown-item:hover,
.do-modal-dropdown--display [class*="-item"]:hover,
.do-modal-tags-dropdown--display .do-modal-tags-dropdown-item:hover,
.do-modal-baseline-date-dropdown--display .do-modal-baseline-date-item:hover,
.do-modal-reference-type-dropdown--display .do-modal-reference-type-item:hover,
.do-modal-delivery-priority-dropdown--display .do-modal-delivery-priority-item:hover,
.do-modal-organization-dropdown--display .do-modal-organization-item:hover,
.do-modal-sales-structure-dropdown--display .do-modal-sales-structure-item:hover,
.do-modal-delivery-type-dropdown--display .do-modal-delivery-type-item:hover,
.do-modal-sales-channel-dropdown--display .do-modal-sales-channel-item:hover,
.do-modal-sales-unit-dropdown--display .do-modal-sales-unit-item:hover,
.do-modal-sold-to-party-dropdown--display .do-modal-sold-to-party-item:hover,
.do-modal-deliver-to-party-dropdown--display .do-modal-deliver-to-party-item:hover,
.do-modal-attention-to-deliver-dropdown--display .do-modal-attention-to-deliver-item:hover,
.do-modal-incoterm-dropdown--display .do-modal-incoterm-item:hover,
.do-modal-delivery-point-dropdown--display .do-modal-delivery-point-item:hover,
.do-modal-shipping-point-dropdown--display .do-modal-shipping-point-item:hover,
.do-modal-sales-order-dropdown--display .do-modal-sales-order-item:hover,
.do-modal-sales-person-dropdown--display .do-modal-sales-person-item:hover,
.do-modal-sales-team-dropdown--display .do-modal-sales-team-item:hover,
.do-modal-territory-dropdown--display .do-modal-territory-item:hover,
.do-modal-sales-office-dropdown--display .do-modal-sales-office-item:hover,
.do-modal-status-dropdown--display .do-modal-status-item:hover,
.do-modal-handling-product-dropdown--display .do-modal-handling-product-item:hover,
.do-modal-child-uom-dropdown--display .do-modal-child-uom-item:hover,
.do-modal-partner-type-dropdown--display .do-modal-partner-type-item:hover,
.do-modal-partner-id-dropdown--display .do-modal-partner-id-item:hover,
.do-modal-custom-dropdown--display .do-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.do-modal-dropdown--display [class*="-item--selected"],
.do-modal-tags-dropdown--display .do-modal-tags-dropdown-item--selected,
.do-modal-baseline-date-dropdown--display .do-modal-baseline-date-item--selected,
.do-modal-reference-type-dropdown--display .do-modal-reference-type-item--selected,
.do-modal-delivery-priority-dropdown--display .do-modal-delivery-priority-item--selected,
.do-modal-organization-dropdown--display .do-modal-organization-item--selected,
.do-modal-sales-structure-dropdown--display .do-modal-sales-structure-item--selected,
.do-modal-delivery-type-dropdown--display .do-modal-delivery-type-item--selected,
.do-modal-sales-channel-dropdown--display .do-modal-sales-channel-item--selected,
.do-modal-sales-unit-dropdown--display .do-modal-sales-unit-item--selected,
.do-modal-sold-to-party-dropdown--display .do-modal-sold-to-party-item--selected,
.do-modal-deliver-to-party-dropdown--display .do-modal-deliver-to-party-item--selected,
.do-modal-attention-to-deliver-dropdown--display .do-modal-attention-to-deliver-item--selected,
.do-modal-incoterm-dropdown--display .do-modal-incoterm-item--selected,
.do-modal-delivery-point-dropdown--display .do-modal-delivery-point-item--selected,
.do-modal-shipping-point-dropdown--display .do-modal-shipping-point-item--selected,
.do-modal-sales-order-dropdown--display .do-modal-sales-order-item--selected,
.do-modal-sales-person-dropdown--display .do-modal-sales-person-item--selected,
.do-modal-sales-team-dropdown--display .do-modal-sales-team-item--selected,
.do-modal-territory-dropdown--display .do-modal-territory-item--selected,
.do-modal-sales-office-dropdown--display .do-modal-sales-office-item--selected,
.do-modal-status-dropdown--display .do-modal-status-item--selected,
.do-modal-handling-product-dropdown--display .do-modal-handling-product-item--selected,
.do-modal-child-uom-dropdown--display .do-modal-child-uom-item--selected,
.do-modal-partner-type-dropdown--display .do-modal-partner-type-item--selected,
.do-modal-partner-id-dropdown--display .do-modal-partner-id-item--selected,
.do-modal-custom-dropdown--display .do-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.do-modal-dropdown--display [class*="-check"],
.do-modal-dropdown--display .do-modal-dropdown-check,
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.do-modal-dropdown--display [class*="-item-code"],
.do-modal-dropdown--display [class*="-item-name"],
.do-modal-dropdown--display [class*="-item-content"],
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-code,
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-name,
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-item,
.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.do-modal-sold-to-party-dropdown-content--display .do-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.do-modal-tags-dropdown--display .do-modal-tags-item,
.do-modal-tags-dropdown--display .do-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-tags-dropdown--display .do-modal-tags-item:hover {
  background-color: transparent !important;
}

.do-modal-tags-dropdown--display .do-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.do-modal-tags-dropdown--display .do-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item,
.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.do-modal-custom-dropdown-list--display .do-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Dispatching/Dispatching.css ===== */
/* Dispatch Wrapper - prevent page scroll */
.dispatching-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Dispatch Container */
.dispatching-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.dispatching-header {
  margin-bottom: 0;
}

.dispatching-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Dispatch Control - Exact copy of third-nav-control */
.dispatching-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.dispatching-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.dispatching-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dispatching-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dispatching-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.dispatching-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.dispatching-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.dispatching-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.dispatching-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.dispatching-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.dispatching-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.dispatching-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.dispatching-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dispatching-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dispatching-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.dispatching-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.dispatching-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.dispatching-layout-dropdown-item:last-child {
  border-bottom: none;
}

.dispatching-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.dispatching-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.dispatching-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.dispatching-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.dispatching-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.dispatching-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.dispatching-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.dispatching-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dispatching-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dispatching-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.dispatching-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dispatching-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.dispatching-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.dispatching-filter-parameter-wrapper {
  position: relative;
}

.dispatching-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.dispatching-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dispatching-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.dispatching-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dispatching-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.dispatching-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.dispatching-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.dispatching-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.dispatching-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dispatching-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.dispatching-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.dispatching-filter-close:hover {
  background-color: #f0f0f0;
}

.dispatching-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.dispatching-filter-group {
  margin-bottom: 1rem;
}

.dispatching-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.dispatching-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dispatching-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.dispatching-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.dispatching-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.dispatching-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.dispatching-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.dispatching-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.dispatching-filter-org-container {
  flex: 1 1;
  position: relative;
}

.dispatching-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dispatching-filter-org-input:hover {
  border-color: #C2DE54;
}

.dispatching-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.dispatching-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.dispatching-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.dispatching-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.dispatching-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.dispatching-filter-tag-remove:hover {
  color: #000;
}

.dispatching-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.dispatching-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.dispatching-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dispatching-filter-org-item:hover {
  background-color: #f5f5f5;
}

.dispatching-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.dispatching-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.dispatching-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.dispatching-filter-org-code {
  font-weight: 600;
  color: #333;
}

.dispatching-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.dispatching-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.dispatching-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.dispatching-type-dropdown-item:last-child {
  border-bottom: none;
}

.dispatching-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.dispatching-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.dispatching-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.dispatching-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Dispatch Table */
.dispatching-table {
  animation: dispatchingFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes dispatchingFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dispatching-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .dispatching-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .dispatching-type-dropdown {
    min-width: 11.25rem;
  }

  .dispatching-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Dispatching/DispatchingModal.css ===== */
/* Delivery Order Modal Specific Styles */
.dispatching-modal {
  overscroll-behavior: contain;
}

.dispatching-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.dp-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.dp-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.dp-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.dp-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.dp-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.dp-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.dp-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.dp-modal-pov-button--external.dp-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.dp-modal-pov-button--external .dp-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-pov-button--external .dp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.dp-modal-pov-caret--open {
  transform: rotate(180deg);
}

.dp-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.dp-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.dp-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.dp-modal-pov-dropdown-item span {
  flex: 1 1;
}

.dp-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.dp-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.dp-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.dp-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.dp-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.dp-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.dp-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.dp-modal-tabs--display .dp-modal-tab {
  color: #666666;
}

.dp-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.dp-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.dp-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.dp-modal-tabs--display .dp-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.dp-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.dp-modal-tabs--external .dp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.dp-modal-tabs--external.dp-modal-tabs--display .dp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.dp-modal-tabs--external .dp-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.dp-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.dp-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.dp-modal-action-button span {
  white-space: nowrap;
}

.dp-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.dp-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.dp-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.dp-modal-action-button--disabled .dp-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.dp-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.dp-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.dp-modal-left-area--full .dp-modal-back-button {
  transition: width 300ms ease;
}

.dp-modal-left-area--full .dp-modal-back-button:hover {
  width: 3.5rem;
}

.dp-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.dp-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.dp-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dp-modal-content--item {
  padding-bottom: 1rem;
}

.dp-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.dp-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.dp-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.dp-modal-attachment-table-container .dp-modal-detail-table thead,
.dp-modal-attachment-table-container .dp-modal-attachment-table thead {
  box-shadow: none !important;
}

.dp-modal-attachment-table-container .dp-modal-detail-table tr,
.dp-modal-attachment-table-container .dp-modal-attachment-table tr {
  box-shadow: none !important;
}

.dp-modal-attachment-table-container .dp-modal-detail-table tbody tr:last-child,
.dp-modal-attachment-table-container .dp-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.dp-modal-attachment-table-container .dp-modal-detail-table tbody tr:last-child td,
.dp-modal-attachment-table-container .dp-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.dp-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.dp-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.dp-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.dp-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.dp-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.dp-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.dp-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.dp-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.dp-modal-attachment-filename--external {
  color: #E67E22;
}

.dp-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.dp-modal-tab-content--display .dp-modal-attachment-filename--external {
  color: #E67E22;
}

.dp-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.dp-modal-attachment-size {
  color: #666666;
}

.dp-modal-attachment-date {
  color: #666666;
}

.dp-modal-attachment-uploadedby {
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.dp-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.dp-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.dp-modal-attachment-browse-btn:focus {
  outline: none;
}

.dp-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.dp-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.dp-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-attachment-browse-btn--disabled .dp-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.dp-modal-tab-content--display .dp-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.dp-modal-tab-content--display .dp-modal-attachment-filename.dp-modal-attachment-filename--external {
  color: #E67E22;
}

.dp-modal-tab-content--display .dp-modal-attachment-type {
  color: #666666;
}

.dp-modal-tab-content--display .dp-modal-attachment-size {
  color: #666666;
}

.dp-modal-tab-content--display .dp-modal-attachment-date {
  color: #666666;
}

.dp-modal-tab-content--display .dp-modal-attachment-uploadedby {
  color: #333333;
}

.dp-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.dp-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.dp-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.dp-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.dp-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.dp-modal-tab-content--display .dp-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.dp-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.dp-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.dp-modal-tab-content--display .dp-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.dp-modal-basic-section--external .dp-modal-form-input:focus {
  border-color: #F5B041;
}

.dp-modal-basic-section--external .dp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.dp-modal-tab-content--external .dp-modal-form-input:focus,
.dp-modal-tab-content--external .dp-modal-form-textarea:focus,
.dp-modal-tab-content--external .dp-modal-custom-dropdown-input:focus,
.dp-modal-tab-content--external .dp-modal-date-input:focus,
.dp-modal-tab-content--external .dp-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.dp-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.dp-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.dp-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.dp-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.dp-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.dp-modal-tab-content--display .dp-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.dp-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.dp-modal-tab-content--display .dp-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.dp-modal-partner-header-section--external .dp-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.dp-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.dp-modal-tab-content--display .dp-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.dp-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.dp-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.dp-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.dp-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dp-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.dp-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.dp-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.dp-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.dp-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.dp-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.dp-modal-chat-section {
  padding: 1.5rem 0;
}

.dp-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dp-modal-chat-header h3 {
  margin: 0;
}

.dp-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.dp-modal-chat-new-thread .dp-modal-form-textarea {
  min-height: 5rem;
}

.dp-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.dp-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dp-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.dp-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.dp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.dp-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.dp-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.dp-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.dp-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.dp-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.dp-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.dp-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.dp-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.dp-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.dp-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-chat-user-name {
  color: #333333 !important;
}

.dp-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.dp-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.dp-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.dp-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.dp-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.dp-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.dp-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.dp-modal-chat-reply-btn:hover .dp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.dp-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.dp-modal-chat-replies .dp-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.dp-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.dp-modal-chat-reply-input .dp-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.dp-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dp-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.dp-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.dp-modal-tab-content--display .dp-modal-chat-thread {
  border-color: #E5E5E5;
}

.dp-modal-tab-content--display .dp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display .dp-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-chat-user-position {
  background-color: #E8F5E9;
}

.dp-modal-tab-content--display .dp-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.dp-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.dp-modal-tab-content--display .dp-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.dp-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.dp-modal-notes-header-section--external .dp-modal-form-textarea:focus {
  border-color: #F5B041;
}

.dp-modal-chat-section--external .dp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.dp-modal-chat-avatar--external {
  background-color: #F5B041;
}

.dp-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.dp-modal-tab-content--display .dp-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-thread {
  border-color: #E5E5E5;
}

.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-message--main {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-user-name {
  color: #333333 !important;
}

.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-user-position {
  background-color: #FDE8D0;
}

.dp-modal-tab-content--display.dp-modal-tab-content--external .dp-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.dp-modal-chat-reply-btn--external {
  color: #E67E22;
}

.dp-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.dp-modal-chat-reply-btn--external .dp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.dp-modal-chat-reply-btn--external:hover .dp-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.dp-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.dp-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.dp-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.dp-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.dp-modal-chat-textarea-wrapper {
  position: relative;
}

.dp-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.dp-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dp-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.dp-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.dp-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.dp-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.dp-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dp-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.dp-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.dp-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.dp-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.dp-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.dp-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.dp-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.dp-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.dp-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.dp-modal-tab-content--display .dp-modal-table-empty-state-title {
  color: #666666;
}

.dp-modal-tab-content--display .dp-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.dp-modal-partner-header-section + .dp-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.dp-modal-partner-header-section + .dp-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.dp-modal-partner-header-section + .dp-modal-item-content-section .dp-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.dp-modal-partner-header-section + .dp-modal-item-content-section .dp-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.dp-modal-partner-header-section + .dp-modal-item-content-section .dp-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.dp-modal-partner-header-section + .dp-modal-item-content-section .dp-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.dp-modal-partner-header-section + .dp-modal-item-content-section .dp-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.dp-modal-partner-table-container .dp-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.dp-modal-partner-table-container .dp-modal-partner-table th:last-child,
.dp-modal-partner-table-container .dp-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.dp-modal-detail-table-container--external.dp-modal-partner-table-container .dp-modal-partner-table th:last-child,
.dp-modal-detail-table-container--external.dp-modal-partner-table-container .dp-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.dp-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.dp-modal-item-header-section .dp-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-tab-content--display .dp-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.dp-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.dp-modal-tab-content--display .dp-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.dp-modal-item-header-section--external .dp-modal-form-input:focus {
  border-color: #F5B041;
}

.dp-modal-item-header-section--external .dp-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.dp-modal-detail-subtabs--external .dp-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.dp-modal-detail-subtabs--external .dp-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.dp-modal-detail-subtabs--external .dp-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.dp-modal-tab-content--display .dp-modal-detail-subtabs--external .dp-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.dp-modal-tab-content--display .dp-modal-detail-subtabs--external .dp-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.dp-modal-tab-content.dp-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.dp-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.dp-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.dp-modal-item-table-wrapper .dp-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.dp-modal-item-table-wrapper .dp-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.dp-modal-item-table-wrapper--terms .dp-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.dp-modal-tab-content--external.dp-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.dp-modal-tab-content--external .dp-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-tab-content--external .dp-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-tab-content--external .dp-modal-item-table-wrapper--terms .dp-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.dp-modal-tab-content--external .dp-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.dp-modal-item-table-wrapper--terms .dp-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.dp-modal-item-table-wrapper--terms .dp-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dp-modal-item-table-wrapper--terms .dp-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.dp-modal-item-table-wrapper--terms .dp-modal-detail-table tr {
  height: auto;
}

.dp-modal-item-table-wrapper--terms .dp-modal-detail-table-container .dp-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.dp-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.dp-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.dp-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.dp-modal-volume-input-group .dp-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.dp-modal-volume-input-group .dp-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.dp-modal-volume-input-group .dp-modal-sla-input-wrapper .dp-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.dp-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.dp-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.dp-modal-volume-uom-list--display .dp-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-volume-uom-list--display .dp-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.dp-modal-volume-uom-list--display .dp-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-volume-uom-list--display .dp-modal-volume-uom-check {
  color: #999999 !important;
}

.dp-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.dp-modal-volume-uom-dropdown--display .dp-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.dp-modal-volume-uom-dropdown--display .dp-modal-volume-uom-item:hover {
  background-color: transparent;
}

.dp-modal-volume-uom-dropdown--display .dp-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.dp-modal-volume-uom-dropdown--display .dp-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.dp-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.dp-modal-weight-input-group .dp-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.dp-modal-weight-input-group .dp-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.dp-modal-weight-input-group .dp-modal-sla-input-wrapper .dp-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.dp-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.dp-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-weight-uom-input::placeholder {
  color: #999999;
}

.dp-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.dp-modal-weight-uom-dropdown--display .dp-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.dp-modal-weight-uom-dropdown--display .dp-modal-weight-uom-item:hover {
  background-color: transparent;
}

.dp-modal-weight-uom-dropdown--display .dp-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.dp-modal-weight-uom-dropdown--display .dp-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.dp-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.dp-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.dp-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.dp-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.dp-modal-form-input--display ~ .dp-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.dp-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.dp-modal-form-input--display {
  cursor: default;
}

.dp-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.dp-modal-form-label--display {
  color: #333333 !important;
}

.dp-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.dp-modal-form-label--display .dp-modal-required {
  color: #FF4D4F;
}

.dp-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.dp-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.dp-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.dp-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.dp-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.dp-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.dp-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dp-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.dp-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.dp-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.dp-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.dp-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.dp-modal-sla-spinner-btn:disabled .dp-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.dp-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sla-spinner-btn:hover .dp-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.dp-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.dp-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.dp-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.dp-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.dp-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.dp-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.dp-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.dp-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.dp-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.dp-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.dp-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.dp-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.dp-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.dp-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.dp-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.dp-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.dp-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.dp-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.dp-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.dp-modal-stage-dropdown-input--display .dp-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.dp-modal-stage-dropdown-input--display .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.dp-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.dp-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.dp-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.dp-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.dp-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.dp-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.dp-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.dp-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.dp-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.dp-modal-accordion-header--display {
  color: #333333;
}

.dp-modal-accordion-header--display.dp-modal-accordion-header--active {
  color: #333333;
}

.dp-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.dp-modal-accordion-header--display .dp-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.dp-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.dp-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.dp-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.dp-modal-stage-main-title--display {
  color: #138B4C;
}

.dp-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-stage-title--display {
  color: #333333;
}

.dp-modal-stage-current {
  margin-bottom: 1.875rem;
}

.dp-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.dp-modal-stage-label--display {
  color: #666666;
}

.dp-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-stage-subtitle--display {
  color: #333333;
}

.dp-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.dp-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.dp-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.dp-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.dp-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.dp-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dp-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.dp-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.dp-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dp-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.dp-modal-download-button:active {
  background-color: #E0E0E0;
}

.dp-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-download-button--display .dp-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.dp-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.dp-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.dp-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.dp-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.dp-modal-timeline-item--display .dp-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.dp-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.dp-modal-timeline-badge--inactive .dp-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.dp-modal-timeline-item--display .dp-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.dp-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.dp-modal-timeline-item--display .dp-modal-timeline-line {
  background-color: #138B4C;
}

.dp-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dp-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.dp-modal-timeline-status--display {
  color: #333333;
}

.dp-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.dp-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.dp-modal-timeline-date--display {
  color: #666666;
}

.dp-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.dp-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.dp-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.dp-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.dp-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.dp-modal-timeline-document--display {
  color: #138B4C;
}

.dp-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.dp-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.dp-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.dp-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.dp-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.dp-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.dp-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.dp-modal-activity-item--display .dp-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.dp-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.dp-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.dp-modal-activity-item--display .dp-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.dp-modal-activity-item--display .dp-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.dp-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.dp-modal-activity-item--display .dp-modal-activity-line {
  background-color: #138B4C;
}

.dp-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.dp-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.dp-modal-activity-type--display {
  color: #333333;
}

.dp-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.dp-modal-activity-header--display {
  color: #666666;
}

.dp-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.dp-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.dp-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.dp-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.dp-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.dp-modal-activity-change--display .dp-modal-activity-field {
  color: #333333;
}

.dp-modal-activity-change--display .dp-modal-activity-new {
  color: #138B4C;
}

.dp-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.dp-modal-activity-date--display {
  color: #666666;
}

.dp-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.dp-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.dp-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.dp-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.dp-modal-activity-more--display {
  color: #138B4C;
}

.dp-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-activity-more--display .dp-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.dp-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.dp-modal-reference-table thead {
  background-color: #F9F9F9;
}

.dp-modal-tab-content--display .dp-modal-reference-table thead {
  background-color: #FAFAFA;
}

.dp-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.dp-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.dp-modal-tab-content--display .dp-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.dp-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.dp-modal-tab-content--display .dp-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.dp-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.dp-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.dp-modal-detail-subtab:hover {
  color: #138B4C;
}

.dp-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.dp-modal-tab-content--display .dp-modal-detail-subtab {
  color: #666666;
}

.dp-modal-tab-content--display .dp-modal-detail-subtab:hover {
  color: #138B4C;
}

.dp-modal-tab-content--display .dp-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.dp-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.dp-modal-tab-content.dp-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.dp-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-detail-delivery-wrapper .dp-modal-form-label {
  flex-shrink: 0;
}

.dp-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.dp-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.dp-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.dp-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.dp-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.dp-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.dp-modal-detail-table-container .dp-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dp-modal-detail-table-container .dp-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dp-modal-detail-table-container .dp-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.dp-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.dp-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.dp-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.dp-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.dp-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.dp-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.dp-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-detail-table th,
.dp-modal-tab-content--display .dp-modal-packaging-table th,
.dp-modal-tab-content--display .dp-modal-partner-table th,
.dp-modal-tab-content--display .dp-modal-attachment-table th {
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-detail-table td,
.dp-modal-tab-content--display .dp-modal-packaging-table td,
.dp-modal-tab-content--display .dp-modal-partner-table td,
.dp-modal-tab-content--display .dp-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-description,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-text,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-batch,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-serial,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-so-item,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-package-no,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-product-type,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-product-group,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-product-category,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.dp-modal-tab-content--display .dp-modal-detail-table tbody tr:hover .dp-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-description,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-text,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-batch,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-serial,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-so-item,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-package-no,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-type,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-group,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-category,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .dp-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.dp-modal-detail-table-container .dp-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.dp-modal-detail-table-container .dp-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.dp-modal-detail-table-container--external .dp-modal-detail-table td {
  color: #555555 !important;
}

.dp-modal-detail-table-container .dp-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.dp-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.dp-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.dp-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.dp-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.dp-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.dp-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.dp-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Dispatch No. column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.dp-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.dp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.dp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.dp-modal-detail-table tbody tr:hover .detail-table-description,
.dp-modal-detail-table tbody tr:hover .detail-table-text,
.dp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.dp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.dp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.dp-modal-detail-table tbody tr:hover .detail-table-batch,
.dp-modal-detail-table tbody tr:hover .detail-table-serial,
.dp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.dp-modal-detail-table tbody tr:hover .detail-table-so-item,
.dp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.dp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.dp-modal-detail-table tbody tr:hover .detail-table-package-no,
.dp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.dp-modal-detail-table tbody tr:hover .detail-table-product-type,
.dp-modal-detail-table tbody tr:hover .detail-table-product-group,
.dp-modal-detail-table tbody tr:hover .detail-table-product-category,
.dp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.dp-modal-detail-table tbody tr:hover .dp-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-description,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-text,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-available-qty,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-batch,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-serial,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-sales-order,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-so-item,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-pr-item,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-package-no,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-type,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-group,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-category,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .detail-table-product-variant,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .dp-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.dp-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.dp-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.dp-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.dp-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.dp-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.dp-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dp-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.dp-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.dp-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.dp-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.dp-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.dp-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.dp-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.dp-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.dp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.dp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.dp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.dp-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.dp-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.dp-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.dp-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.dp-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dp-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.dp-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dp-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.dp-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.dp-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.dp-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.dp-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.dp-modal-add-item-btn--disabled .dp-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.dp-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Dispatch Table - Same style as Detail Delivery Table */
.dp-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for dispatch table */
.dp-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.dp-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.dp-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.dp-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.dp-modal-sales-order-table-container .dp-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for dispatch table */
.dp-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.dp-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.dp-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.dp-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.dp-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.dp-modal-table-input:focus {
  outline: none;
}

.dp-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.dp-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.dp-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.dp-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.dp-modal-tags-container {
  position: relative;
  width: 100%;
}

.dp-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.dp-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.dp-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.dp-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.dp-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.dp-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.dp-modal-tags-input--display .dp-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.dp-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.dp-modal-tag-remove:hover {
  color: #333333;
}

.dp-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.dp-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.dp-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.dp-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.dp-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.dp-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.dp-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.dp-modal-status-container {
  position: relative;
  width: 100%;
}

.dp-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.dp-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.dp-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.dp-modal-status-placeholder {
  color: #999999;
}

.dp-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.dp-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.dp-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.dp-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-status-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-status-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.dp-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.dp-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.dp-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.dp-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.dp-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.dp-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.dp-modal-status-input--display .dp-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.dp-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.dp-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.dp-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.dp-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.dp-modal-stage-dropdown-placeholder {
  color: #999999;
}

.dp-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.dp-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.dp-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.dp-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.dp-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.dp-modal-stage--created .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.dp-modal-stage--approved .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.dp-modal-stage--processed .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.dp-modal-stage--picked .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.dp-modal-stage--packed .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.dp-modal-stage--planned .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.dp-modal-stage--loaded .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.dp-modal-stage--issued .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.dp-modal-stage--departed .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.dp-modal-stage--arrived .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.dp-modal-stage--unloaded .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.dp-modal-stage--delivered .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.dp-modal-stage--confirmed .dp-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.dp-modal-stage--billed .dp-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.dp-modal-stage-dropdown-input .dp-modal-stage,
.dp-modal-stage-dropdown-item .dp-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.dp-modal-baseline-date-dropdown {
  position: relative;
}

.dp-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.dp-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.dp-modal-reference-type-dropdown {
  position: relative;
}

.dp-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.dp-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.dp-modal-delivery-priority-dropdown {
  position: relative;
}

.dp-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.dp-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.dp-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.dp-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.dp-modal-delivery-priority-separator {
  color: #666666;
}

.dp-modal-delivery-priority-name {
  color: #333333;
}

.dp-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.dp-modal-organization-dropdown {
  position: relative;
}

.dp-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.dp-modal-organization-dropdown-content--display .dp-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-organization-dropdown-content--display .dp-modal-organization-item:hover {
  background-color: transparent !important;
}

.dp-modal-organization-dropdown-content--display .dp-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-organization-dropdown-content--display .dp-modal-organization-code,
.dp-modal-organization-dropdown-content--display .dp-modal-organization-name,
.dp-modal-organization-dropdown-content--display .dp-modal-organization-separator {
  color: #999999 !important;
}

.dp-modal-organization-dropdown-content--display .dp-modal-organization-check {
  color: #999999 !important;
}

.dp-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-organization-separator {
  color: #999999;
}

.dp-modal-organization-name {
  color: #333333;
}

.dp-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.dp-modal-sales-structure-dropdown {
  position: relative;
}

.dp-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.dp-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.dp-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-sales-structure-separator {
  color: #999999;
}

.dp-modal-sales-structure-name {
  color: #333333;
}

.dp-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.dp-modal-delivery-type-dropdown {
  position: relative;
}

.dp-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.dp-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.dp-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.dp-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.dp-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.dp-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.dp-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.dp-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-delivery-type-separator {
  color: #999999;
}

.dp-modal-delivery-type-description {
  color: #333333;
}

.dp-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.dp-modal-content::-webkit-scrollbar,
.dp-modal-stage-content::-webkit-scrollbar,


.dp-modal-content::-webkit-scrollbar-track,
.dp-modal-stage-content::-webkit-scrollbar-track,


.dp-modal-content::-webkit-scrollbar-thumb,
.dp-modal-stage-content::-webkit-scrollbar-thumb,


.dp-modal-content::-webkit-scrollbar-thumb:hover,
.dp-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.dp-modal-sales-channel-dropdown {
  position: relative;
}

.dp-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.dp-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-sales-channel-separator {
  color: #999999;
}

.dp-modal-sales-channel-name {
  color: #333333;
}

.dp-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.dp-modal-sales-unit-dropdown {
  position: relative;
}

.dp-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.dp-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-sales-unit-separator {
  color: #999999;
}

.dp-modal-sales-unit-name {
  color: #333333;
}

.dp-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.dp-modal-organization-item--placeholder,
.dp-modal-sales-structure-item--placeholder,
.dp-modal-sales-channel-item--placeholder,
.dp-modal-sales-unit-item--placeholder,
.dp-modal-territory-item--placeholder,
.dp-modal-sales-office-item--placeholder,
.dp-modal-sold-to-party-item--placeholder,
.dp-modal-deliver-to-party-item--placeholder,
.dp-modal-attention-to-deliver-item--placeholder,
.dp-modal-incoterm-item--placeholder,
.dp-modal-delivery-point-item--placeholder,
.dp-modal-shipping-point-item--placeholder,
.dp-modal-sales-order-item--placeholder,
.dp-modal-sales-team-item--placeholder,
.dp-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.dp-modal-organization-item--placeholder:hover,
.dp-modal-sales-structure-item--placeholder:hover,
.dp-modal-sales-channel-item--placeholder:hover,
.dp-modal-sales-unit-item--placeholder:hover,
.dp-modal-territory-item--placeholder:hover,
.dp-modal-sales-office-item--placeholder:hover,
.dp-modal-sold-to-party-item--placeholder:hover,
.dp-modal-deliver-to-party-item--placeholder:hover,
.dp-modal-attention-to-deliver-item--placeholder:hover,
.dp-modal-incoterm-item--placeholder:hover,
.dp-modal-delivery-point-item--placeholder:hover,
.dp-modal-shipping-point-item--placeholder:hover,
.dp-modal-sales-order-item--placeholder:hover,
.dp-modal-sales-team-item--placeholder:hover,
.dp-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.dp-modal-sold-to-party-dropdown {
  position: relative;
}

.dp-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-sold-to-party-input:focus,
.dp-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.dp-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.dp-modal-sold-to-party-separator {
  color: #999999;
}

.dp-modal-sold-to-party-name {
  color: #333333;
}

.dp-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.dp-modal-deliver-to-party-dropdown {
  position: relative;
}

.dp-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.dp-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.dp-modal-deliver-to-party-separator {
  color: #999999;
}

.dp-modal-deliver-to-party-name {
  color: #333333;
}

.dp-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.dp-modal-attention-to-deliver-dropdown {
  position: relative;
}
.dp-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.dp-modal-attention-to-deliver-separator {
  color: #999999;
}
.dp-modal-attention-to-deliver-name {
  color: #333333;
}
.dp-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.dp-modal-incoterm-dropdown {
  position: relative;
}
.dp-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.dp-modal-incoterm-separator {
  color: #999999;
}
.dp-modal-incoterm-name {
  color: #333333;
}
.dp-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.dp-modal-delivery-point-dropdown {
  position: relative;
}
.dp-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.dp-modal-delivery-point-separator {
  color: #999999;
}
.dp-modal-delivery-point-name {
  color: #333333;
}
.dp-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.dp-modal-shipping-point-dropdown {
  position: relative;
}
.dp-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.dp-modal-shipping-point-separator {
  color: #999999;
}
.dp-modal-shipping-point-name {
  color: #333333;
}
.dp-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Dispatch Dropdown Styles */
.dp-modal-sales-order-dropdown {
  position: relative;
}
.dp-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.dp-modal-sales-order-separator {
  color: #999999;
}
.dp-modal-sales-order-name {
  color: #333333;
}
.dp-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.dp-modal-date-picker {
  position: relative;
}
.dp-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.dp-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.dp-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.dp-modal-date-input::-webkit-datetime-edit-text,
.dp-modal-date-input::-webkit-datetime-edit-month-field,
.dp-modal-date-input::-webkit-datetime-edit-day-field,
.dp-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.dp-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.dp-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.dp-modal-sales-person-dropdown {
  position: relative;
}
.dp-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.dp-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.dp-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.dp-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.dp-modal-sales-person-separator {
  color: #999999;
}
.dp-modal-sales-person-name {
  color: #333333;
}
.dp-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.dp-modal-sales-team-dropdown {
  position: relative;
}
.dp-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.dp-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.dp-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.dp-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.dp-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dp-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dp-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.dp-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.dp-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.dp-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dp-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.dp-modal-sales-team-separator {
  color: #999999;
}
.dp-modal-sales-team-name {
  color: #333333;
}
.dp-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.dp-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.dp-modal-territory-dropdown {
  position: relative;
}

.dp-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.dp-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-territory-separator {
  color: #999999;
}

.dp-modal-territory-name {
  color: #333333;
}

.dp-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.dp-modal-sales-office-dropdown {
  position: relative;
}

.dp-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.dp-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.dp-modal-sales-office-separator {
  color: #999999;
}

.dp-modal-sales-office-name {
  color: #333333;
}

.dp-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Dispatch Section */
.dp-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dp-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.dp-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.dp-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.dp-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.dp-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dp-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-table-dropdown-input:focus {
  outline: none;
}

.dp-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.dp-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.dp-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.dp-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.dp-modal-delivery-type-list::-webkit-scrollbar,
.dp-modal-stage-dropdown-list::-webkit-scrollbar,
.dp-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.dp-modal-delivery-type-list::-webkit-scrollbar-track,
.dp-modal-stage-dropdown-list::-webkit-scrollbar-track,
.dp-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-delivery-type-list::-webkit-scrollbar-thumb,
.dp-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.dp-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.dp-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.dp-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.dp-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.dp-modal-wrapper,
.dp-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.dispatching-modal,
.dp-modal-wrapper,
.dp-modal-wrapper *,
.dp-modal-content,
.dp-modal-data-flow-2-container,
.dp-modal-data-flow-container,
.dp-modal-calendar-container,
.dp-modal-calendar-milestones-list,
.dp-modal-calendar-view,
.dp-modal-calendar-yearly,
.dp-modal-calendar-monthly,
.dp-modal-calendar-weekly,
.dp-modal-calendar-weekly-body,
.dp-modal-calendar-daily,
.dp-modal-calendar-daily-timeline,
.dp-modal-calendar-grid,
.dp-modal-calendar-grid-body,
.dp-modal-detail-table-container,
.dp-modal-item-table-wrapper,
.dp-modal-attachment-table-container,
.dp-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.dp-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.dp-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.dp-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.dp-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.dp-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.dp-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.dp-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.dp-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.dp-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-tab-content--display .dp-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.dp-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-tab-content--display .dp-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.dp-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.dp-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.dp-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) {
  font-weight: 600;
}

.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) .dp-modal-packaging-input,
.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) .dp-modal-packaging-input--display,
.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) .dp-modal-handling-product-input,
.dp-modal-packaging-row--unassigned:not(.dp-modal-packaging-row--expanded) .dp-modal-handling-product-input--display {
  font-weight: 600;
}

.dp-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.dp-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row td.dp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row td.dp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row td.dp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td.dp-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded td.dp-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row--expanded:hover td.dp-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display,
.dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display,
.dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.dp-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.dp-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-tab-content--display .dp-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.dp-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-tab-content--display .dp-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.dp-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.dp-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.dp-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.dp-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.dp-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.dp-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.dp-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.dp-modal-packaging-detail-table th:first-child,
.dp-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.dp-modal-packaging-detail-table th:nth-child(2),
.dp-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.dp-modal-packaging-detail-table th:nth-child(3),
.dp-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.dp-modal-packaging-detail-table td:nth-child(4),
.dp-modal-packaging-detail-table td:nth-child(6),
.dp-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.dp-modal-packaging-detail-table td:nth-child(5),
.dp-modal-packaging-detail-table td:nth-child(7),
.dp-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.dp-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.dp-modal-tab-content--display .dp-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display .dp-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.dp-modal-tab-content--display .dp-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.dp-modal-tab-content--display .dp-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.dp-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.dp-modal-packaging-table td:last-child,
.dp-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.dp-modal-packaging-table td:last-child .dp-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.dp-modal-detail-table-container--external .dp-modal-packaging-table th:last-child,
.dp-modal-detail-table-container--external .dp-modal-packaging-table td.dp-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.dp-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.dp-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.dp-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.dp-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.dp-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.dp-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.dp-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.dp-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.dp-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.dp-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.dp-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.dp-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.dp-modal-packaging-child-table tr {
  border: none !important;
}

.dp-modal-packaging-child-table thead,
.dp-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.dp-modal-packaging-child-table th:first-child,
.dp-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.dp-modal-packaging-child-table th:nth-child(2),
.dp-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.dp-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.dp-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.dp-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.dp-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.dp-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.dp-modal-packaging-child-table th:nth-child(3),
.dp-modal-packaging-child-table td:nth-child(3),
.dp-modal-packaging-child-table th:nth-child(4),
.dp-modal-packaging-child-table td:nth-child(4),
.dp-modal-packaging-child-table th:nth-child(5),
.dp-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.dp-modal-packaging-child-table th:nth-child(6),
.dp-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.dp-modal-packaging-child-table th:nth-child(7),
.dp-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.dp-modal-detail-table-container--external .dp-modal-packaging-child-table th:last-child,
.dp-modal-detail-table-container--external .dp-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.dp-modal-packaging-child-table td:last-child .dp-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.dp-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.dp-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.dp-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.dp-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.dp-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row {
  transition: none !important;
}

.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display,
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display:focus,
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display,
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display:focus,
.dp-modal-tab-content--display .dp-modal-detail-table-container .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display:focus,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display:focus,
.dp-modal-tab-content--display .dp-modal-detail-table-container--external .dp-modal-packaging-table tbody tr.dp-modal-packaging-row:hover td .dp-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.dp-modal-detail-table-container--external .dp-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.dp-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dp-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dp-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.dp-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.dp-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.dp-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.dp-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.dp-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.dp-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.dp-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.dp-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.dp-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.dp-modal-detail-table-container--external .dp-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.dp-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-item--display {
  color: #999999 !important;
}

.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-code,
.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-name,
.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-separator {
  color: #999999 !important;
}

.dp-modal-handling-product-dropdown-content--display .dp-modal-handling-product-check {
  color: #999999 !important;
}

.dp-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.dp-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.dp-modal-handling-product-dropdown-content--narrow .dp-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.dp-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.dp-modal-packaging-detail-table .dp-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.dp-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.dp-modal-detail-table-container--dropdown-open .dp-modal-detail-table {
  overflow: visible;
}

.dp-modal-detail-table-container--dropdown-open .dp-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.dp-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dp-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.dp-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.dp-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.dp-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.dp-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.dp-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.dp-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.dp-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.dp-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.dp-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.dp-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.dp-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.dp-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.dp-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.dp-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.dp-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.dp-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dp-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.dp-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.dp-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-item:hover {
  background-color: transparent;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-item--placeholder {
  display: none;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-code,
.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-name,
.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-separator {
  color: #555555;
}

.dp-modal-handling-product-dropdown-content--view-only .dp-modal-handling-product-check {
  color: #888888;
}

.dp-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.dp-modal-handling-product-separator {
  color: #999999;
}

.dp-modal-handling-product-name {
  color: #333333;
}

.dp-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.dp-modal-handling-product-item--placeholder {
  cursor: default;
}

.dp-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.dp-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.dp-modal-detail-table td:has(.dp-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.dp-modal-detail-table td .dp-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.dp-modal-detail-table td .dp-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.dp-modal-detail-table td .dp-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.dp-modal-detail-table td .dp-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.dp-modal-detail-table td .dp-modal-handling-product-input--display,
.dp-modal-detail-table td .dp-modal-handling-product-input--display:focus,
.dp-modal-detail-table td .dp-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display,
.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display:focus,
.dp-modal-detail-table-container .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display:focus,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover td .dp-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.dp-modal-detail-table td .dp-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.dp-modal-detail-table td .dp-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.dp-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.dp-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.dp-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.dp-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-table-text-icon-btn--filled:not(.dp-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.dp-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.dp-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dp-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.dp-modal-table-text-icon-btn--display.dp-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.dp-modal-table-text-icon-btn--display.dp-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-table-text-icon-btn--display.dp-modal-table-text-icon-btn--external.dp-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.dp-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.dp-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.dp-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.dp-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.dp-modal-serial-assignment-btn {
  width: 10.625rem;
}

.dp-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.dp-modal-batch-assignment-btn--filled .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.dp-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.dp-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.dp-modal-batch-assignment-btn--display .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-batch-assignment-btn--display.dp-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.dp-modal-batch-assignment-btn--display.dp-modal-batch-assignment-btn--filled .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.dp-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.dp-modal-secured-qty-btn.dp-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.dp-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.dp-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.dp-modal-secured-qty-btn--grey .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.dp-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.dp-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.dp-modal-batch-assignment-btn--partial .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.dp-modal-batch-assignment-btn--display.dp-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.dp-modal-batch-assignment-btn--display.dp-modal-batch-assignment-btn--partial .dp-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.dp-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.dp-modal-secured-qty-modal .dp-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.dp-modal-secured-qty-modal .dp-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.dp-modal-secured-qty-modal.dp-modal-batch-assignment-modal--display .dp-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.dp-modal-secured-qty-modal .dp-modal-item-text-content {
  overflow-x: hidden;
}

.dp-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.dp-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.dp-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.dp-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.dp-modal-batch-assignment-modal--display .dp-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.dp-modal-batch-assignment-modal--display .dp-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.dp-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.dp-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.dp-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.dp-modal-secured-qty-lock-btn--open .dp-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.dp-modal-secured-qty-lock-btn--locked .dp-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.dp-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.dp-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.dp-modal-batch-assignment-modal .dp-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.dp-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.dp-modal-batch-assignment-modal .dp-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.dp-modal-batch-assignment-modal .dp-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.dp-modal-batch-assignment-modal.dp-modal-batch-assignment-modal--display .dp-modal-item-text-info {
  background-color: #F2F8EA;
}

.dp-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.dp-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.dp-modal-batch-assignment-info-group {
  flex: 1 1;
}

.dp-modal-batch-assignment-info-group .dp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.dp-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.dp-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dp-modal-batch-assignment-table-section .dp-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.dp-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.dp-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.dp-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.dp-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.dp-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.dp-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.dp-modal-batch-assignment-table th,
.dp-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.dp-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.dp-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.dp-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.dp-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.dp-modal-batch-assignment-table tbody td:has(.dp-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.dp-modal-batch-assignment-table tbody td:has(.dp-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.dp-modal-batch-assignment-table tbody td:nth-child(2),
.dp-modal-batch-assignment-table tbody td:nth-child(3),
.dp-modal-batch-assignment-table tbody td:nth-child(4),
.dp-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.dp-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.dp-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.dp-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dp-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.dp-modal-batch-assignment-modal--display .dp-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.dp-modal-batch-assignment-modal--display .dp-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.dp-modal-batch-assignment-modal--display .dp-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-batch-assignment-modal--display .dp-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.dp-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.dp-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.dp-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.dp-modal-batch-assignment-table .dp-modal-placeholder-text {
  color: #CCCCCC;
}

.dp-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.dp-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.dp-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.dp-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.dp-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.dp-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.dp-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.dp-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.dp-modal-batch-assignment-table th.batch-table-frozen-batch,
table.dp-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.dp-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.dp-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.dp-modal-batch-assignment-table td.batch-table-frozen-batch,
table.dp-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.dp-modal-batch-assignment-table th.batch-table-frozen-batch,
table.dp-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.dp-modal-batch-assignment-table th.batch-table-frozen-assign,
table.dp-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.dp-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.dp-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.dp-modal-item-text-info {
  margin-bottom: 1rem;
}

.dp-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.dp-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.dp-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.dp-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.dp-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.dp-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.dp-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.dp-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-item-text-modal .modal-header .modal-title,
.dp-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.dp-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.dp-modal-item-text-label--display {
  color: #333333;
}

.dp-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.dp-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.dp-modal-item-text-modal .dp-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.dp-modal-item-text-modal .dp-modal-item-text-textarea-wrapper .dp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.dp-modal-item-text-textarea {
  overflow-y: auto !important;
}

.dp-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.dp-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.dp-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.dp-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.dp-modal-add-do-item-modal .dp-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.dp-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.dp-modal-add-do-item-dropdown-section .dp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.dp-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dp-modal-add-do-item-table-section .dp-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.dp-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.dp-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.dp-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.dp-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.dp-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.dp-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.dp-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.dp-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.dp-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.dp-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.dp-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.dp-modal-detail-table td:first-child .dp-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.dp-modal-detail-table td:first-child .dp-modal-partner-type-input {
  padding-left: 0.625rem;
}

.dp-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.dp-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.dp-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.dp-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.dp-modal-partner-type-dropdown--display .dp-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.dp-modal-partner-type-dropdown-content--display .dp-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-partner-type-dropdown-content--display .dp-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.dp-modal-partner-type-dropdown-content--display .dp-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-partner-type-dropdown-content--display .dp-modal-partner-type-check {
  color: #999999 !important;
}

.dp-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.dp-modal-partner-type-dropdown--display .dp-modal-partner-type-value {
  color: #555555;
}

.dp-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.dp-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.dp-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.dp-modal-partner-type-item--placeholder {
  cursor: default;
}

.dp-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.dp-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.dp-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.dp-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.dp-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.dp-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.dp-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.dp-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.dp-modal-partner-id-dropdown--display .dp-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-code,
.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-name,
.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-separator {
  color: #999999 !important;
}

.dp-modal-partner-id-dropdown-content--display .dp-modal-partner-id-check {
  color: #999999 !important;
}

.dp-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.dp-modal-partner-id-dropdown--display .dp-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.dp-modal-detail-table tbody tr:hover .dp-modal-partner-type-dropdown--display .dp-modal-partner-type-input-wrapper,
.dp-modal-detail-table tbody tr:hover .dp-modal-partner-id-dropdown--display .dp-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .dp-modal-partner-type-dropdown--display .dp-modal-partner-type-input-wrapper,
.dp-modal-detail-table-container--external .dp-modal-detail-table tbody tr:hover .dp-modal-partner-id-dropdown--display .dp-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.dp-modal-partner-type-arrow--external {
  visibility: hidden;
}

.dp-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.dp-modal-partner-type-dropdown--external .dp-modal-partner-type-value {
  color: #555555;
}

.dp-modal-partner-id-dropdown--external .dp-modal-partner-id-value {
  color: #555555;
}

.dp-modal-detail-table-container--external .dp-modal-detail-table td.dp-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.dp-modal-partner-header-section--external .dp-modal-form-input--display {
  color: #555555;
}

.dp-modal-detail-table td.dp-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.dp-modal-tab-content--display .dp-modal-detail-table td.dp-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.dp-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.dp-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.dp-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.dp-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.dp-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.dp-modal-partner-id-item--placeholder {
  cursor: default;
}

.dp-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.dp-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.dp-modal-partner-id-separator {
  color: #999999;
}

.dp-modal-partner-id-name {
  color: #666666;
}

.dp-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.dp-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.dp-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.dp-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.dp-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.dp-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.dp-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.dp-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.dp-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.dp-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.dp-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.dp-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.dp-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.dp-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.dp-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.dp-modal-data-flow-stage--completed .dp-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.dp-modal-data-flow-stage--active .dp-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.dp-modal-data-flow-stage--completed .dp-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-data-flow-stage--active .dp-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.dp-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.dp-modal-data-flow-stage--completed .dp-modal-data-flow-stage-label {
  color: #138B4C;
}

.dp-modal-data-flow-stage--active .dp-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.dp-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.dp-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.dp-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.dp-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.dp-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.dp-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.dp-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.dp-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.dp-modal-data-flow-document--active .dp-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.dp-modal-data-flow-document-fold {
  display: none;
}

.dp-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.dp-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.dp-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.dp-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.dp-modal-data-flow-document-icon-wrapper--active .dp-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.dp-modal-data-flow-document--active .dp-modal-data-flow-document-title {
  color: #138B4C;
}

.dp-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.dp-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.dp-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.dp-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.dp-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.dp-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.dp-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.dp-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.dp-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dp-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.dp-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.dp-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.dp-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.dp-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.dp-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.dp-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.dp-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.dp-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.dp-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.dp-modal-terms-area-button .dp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.dp-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.dp-modal-tab-content--display .dp-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.dp-modal-tab-content--display .dp-modal-terms-area-button .dp-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.dp-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.dp-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.dp-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.dp-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.dp-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.dp-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.dp-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.dp-modal-data-flow-2-row {
  display: flex;
}

.dp-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dp-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.dp-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.dp-modal-data-flow-2-row--content .dp-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.dp-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.dp-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.dp-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.dp-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-label {
  color: #333333;
}

.dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage-label {
  color: #999999;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--completed .dp-modal-data-flow-2-stage-label {
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--active .dp-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.dp-modal-tab-content--display .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.dp-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.dp-modal-data-flow-2-row--content .dp-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.dp-modal-data-flow-2-row--content .dp-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.dp-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dp-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.dp-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.dp-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.dp-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.dp-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.dp-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.dp-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.dp-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-title,
.dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-title {
  color: #333333;
}

.dp-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.dp-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.dp-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.dp-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-title {
  color: #888888;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-title,
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-title {
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--completed .dp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--active .dp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-date {
  color: #333333;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.dp-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.dp-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.dp-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.dp-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.dp-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.dp-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.dp-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.dp-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.dp-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.dp-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.dp-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.dp-modal-data-flow-2-grid--external .dp-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.dp-modal-data-flow-2-grid--external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell {
  border-bottom: none;
}

.dp-modal-data-flow-2-grid--external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.dp-modal-data-flow-2-grid--external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell--label::after {
  display: none;
}

.dp-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.dp-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.dp-modal-data-flow-2-row--content-top .dp-modal-data-flow-2-document--buyer.dp-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.dp-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.dp-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dp-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.dp-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.dp-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.dp-modal-data-flow-2-stage--external-completed .dp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.dp-modal-data-flow-2-stage--external-active .dp-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.dp-modal-data-flow-2-stage--external-completed .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.dp-modal-data-flow-2-stage--external-active .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.dp-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.dp-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.dp-modal-data-flow-2-document--external .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.dp-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.dp-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.dp-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.dp-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.dp-modal-data-flow-2-document--external .dp-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.dp-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.dp-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.dp-modal-data-flow-2-document--supplier .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.dp-modal-data-flow-2-document--supplier .dp-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.dp-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.dp-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.dp-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.dp-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier .dp-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier .dp-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-completed .dp-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--supplier-active .dp-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.dp-modal-tab-content--data-flow-2-external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.dp-modal-tab-content--data-flow-2-external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external .dp-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external .dp-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.dp-modal-tab-content--display.dp-modal-tab-content--data-flow-2-external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.dp-modal-tab-content--display.dp-modal-tab-content--data-flow-2-external .dp-modal-data-flow-2-row--header .dp-modal-data-flow-2-cell:has(.dp-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-circle,
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external-completed .dp-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external-active .dp-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-icon,
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external-completed .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external-active .dp-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-stage--external .dp-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-completed .dp-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.dp-modal-tab-content--display .dp-modal-data-flow-2-document--external-active .dp-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.dp-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.dp-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.dp-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.dp-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.dp-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.dp-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.dp-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dp-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dp-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.dp-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.dp-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.dp-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.dp-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.dp-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.dp-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.dp-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.dp-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.dp-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.dp-modal-milestone-date-value {
  color: #666666;
}

.dp-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.dp-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.dp-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.dp-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.dp-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.dp-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.dp-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.dp-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.dp-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.dp-modal-activity-item--display .dp-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.dp-modal-calendar-milestones .dp-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.dp-modal-calendar-milestones .dp-modal-activity-user:hover {
  text-decoration: none;
}

.dp-modal-calendar-milestones .dp-modal-activity-item--display .dp-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.dp-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.dp-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dp-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dp-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.dp-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-calendar-nav-btn:hover .dp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.dp-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.dp-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.dp-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.dp-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.dp-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.dp-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.dp-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.dp-modal-calendar-view-mode-btn--active + .dp-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.dp-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dp-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.dp-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.dp-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.dp-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.dp-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dp-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.dp-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.dp-modal-calendar-grid-cell:nth-child(7n-1),
.dp-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.dp-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.dp-modal-calendar-grid-day-name:nth-child(6),
.dp-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.dp-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.dp-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.dp-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.dp-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.dp-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.dp-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.dp-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.dp-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.dp-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dp-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.dp-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dp-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.dp-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.dp-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.dp-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dp-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.dp-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.dp-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.dp-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.dp-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.dp-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.dp-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dp-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.dp-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.dp-modal-calendar-weekly-day-column:nth-child(6),
.dp-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.dp-modal-calendar-weekly-day-header:nth-child(6),
.dp-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.dp-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.dp-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.dp-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.dp-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.dp-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.dp-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.dp-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.dp-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.dp-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dp-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.dp-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.dp-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.dp-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.dp-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dp-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.dp-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.dp-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.dp-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.dp-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.dp-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.dp-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.dp-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.dp-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.dp-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.dp-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-view {
  border-color: #D0D0D0;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-view-mode-btn--active + .dp-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-milestones-header {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-view-title {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-grid-day-name {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-grid-cell-day {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-weekly-day-name {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-weekly-day-date {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-weekly-event-title {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-daily-header {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-daily-hour-label {
  color: #666666;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-daily-event-title {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar .dp-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.dp-modal-calendar-milestones-header--external {
  color: #333333;
}

.dp-modal-calendar-nav-btn--external .dp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.dp-modal-calendar-nav-btn--external:hover .dp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.dp-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.dp-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.dp-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.dp-modal-calendar-view-mode-btn--active-external + .dp-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.dp-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.dp-modal-tab-content--calendar-external .dp-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.dp-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.dp-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.dp-modal-activity-type--external {
  color: #333333;
}

.dp-modal-activity-user--external {
  color: #E67E22;
}

.dp-modal-activity-user--external:hover {
  color: #D35400;
}

.dp-modal-calendar-milestones .dp-modal-activity-user--external {
  color: #E67E22;
}

.dp-modal-calendar-milestones .dp-modal-activity-user--external:hover {
  color: #D35400;
}

.dp-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.dp-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.dp-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.dp-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.dp-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.dp-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.dp-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.dp-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.dp-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.dp-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.dp-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.dp-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.dp-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-milestones-header--external {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-view-mode-btn--active-external + .dp-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-calendar-nav-btn--external .dp-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-activity-type--external {
  color: #333333;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-activity-user--external {
  color: #E67E22;
}

.dp-modal-tab-content--display.dp-modal-tab-content--calendar-external .dp-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.dp-modal-input--error,
.dp-modal-form-input.dp-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.dp-modal-dropdown--error .dp-modal-delivery-type-input,
.dp-modal-dropdown--error .dp-modal-organization-input,
.dp-modal-dropdown--error .dp-modal-sales-structure-input,
.dp-modal-dropdown--error .dp-modal-sales-channel-input,
.dp-modal-dropdown--error .dp-modal-sales-unit-input,
.dp-modal-dropdown--error .dp-modal-territory-input,
.dp-modal-dropdown--error .dp-modal-sales-office-input,
.dp-modal-dropdown--error .dp-modal-sold-to-party-input,
.dp-modal-dropdown--error .dp-modal-deliver-to-party-input,
.dp-modal-dropdown--error .dp-modal-attention-to-deliver-input,
.dp-modal-dropdown--error .dp-modal-incoterm-input,
.dp-modal-dropdown--error .dp-modal-delivery-point-input,
.dp-modal-dropdown--error .dp-modal-shipping-point-input,
.dp-modal-dropdown--error .dp-modal-sales-order-input,
.dp-modal-dropdown--error .dp-modal-sales-team-input,
.dp-modal-dropdown--error .dp-modal-sales-person-input,
.dp-modal-dropdown--error .dp-modal-delivery-priority-input,
.dp-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.dp-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.dp-modal-date-picker-wrapper.dp-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.dp-modal-custom-dropdown {
  position: relative;
}

.dp-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.dp-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.dp-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.dp-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-check {
  color: #999999 !important;
}

.dp-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.dp-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.dp-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.dp-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.dp-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dp-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.dp-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.dp-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.dp-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.dp-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.dp-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.dp-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.dp-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dp-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.dp-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.dp-modal-setting-form-label--display {
  color: #333333;
}

.dp-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.dp-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-setting-dropdown--active .dp-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.dp-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.dp-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.dp-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.dp-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.dp-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.dp-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.dp-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-setting-dropdown-icon.dp-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.dp-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.dp-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.dp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.dp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.dp-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.dp-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.dp-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.dp-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.dp-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.dp-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.dp-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.dp-modal-setting-dropdown-item-separator {
  color: #999999;
}

.dp-modal-setting-dropdown-item-name {
  color: #333333;
}

.dp-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.dp-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.dp-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.dp-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.dp-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.dp-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.dp-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.dp-modal-setting-tab-content--print .dp-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.dp-modal-setting-tab-content--print .dp-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dp-modal-setting-tab-content--print .dp-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.dp-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.dp-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dp-modal-setting-table thead tr {
  height: 2.25rem;
}

.dp-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.dp-modal-setting-table tbody tr {
  height: 2.25rem;
}

.dp-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.dp-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.dp-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.dp-modal-setting-table--display thead th:nth-child(2),
.dp-modal-setting-table--display thead th:nth-child(3),
.dp-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.dp-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.dp-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.dp-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.dp-modal-setting-table--transfer.dp-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.dp-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.dp-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dp-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.dp-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.dp-modal-setting-table--transfer:not(.dp-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.dp-modal-setting-table--transfer:not(.dp-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.dp-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.dp-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.dp-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.dp-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.dp-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.dp-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.dp-modal-tab-content--display .dp-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.dp-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.dp-modal-tab-content--display .dp-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.dp-modal-attribute-header-section--external .dp-modal-form-input:focus {
  border-color: #F5B041;
}

.dp-modal-attribute-header-section--external .dp-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.dp-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.dp-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.dp-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.dp-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.dp-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.dp-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.dp-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.dp-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.dp-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.dp-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.dp-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.dp-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.dp-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.dp-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.dp-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.dp-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.dp-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.dp-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.dp-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.dp-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.dp-modal-available-qty-tree-level {
  position: relative;
}

.dp-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.dp-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.dp-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.dp-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.dp-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.dp-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.dp-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.dp-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.dp-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.dp-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.dp-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.dp-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.dp-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.dp-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.dp-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.dp-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.dp-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.dp-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.dp-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.dp-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.dp-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.dp-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.dp-modal-available-qty-tree-batch-header .dp-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.dp-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.dp-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.dp-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dp-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.dp-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.dp-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.dp-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.dp-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.dp-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.dp-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.dp-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.dp-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.dp-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.dp-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.dp-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.dp-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.dp-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.dp-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.dp-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.dp-modal-activity-type--clickable.dp-modal-activity-type--display:hover {
  color: #138B4C;
}

.dp-modal-activity-type--clickable.dp-modal-activity-type--external:hover {
  color: #E67E00;
}

.dp-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dp-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.dp-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dp-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.dp-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dp-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.dp-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dp-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to dp-modal-form-label */
.dp-modal-activity-detail-content .dp-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.dp-modal-activity-detail-modal .dp-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.dp-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.dp-modal-activity-detail-modal .dp-modal-tabs--display .dp-modal-tab {
  color: #333333;
}

.dp-modal-activity-detail-modal .dp-modal-tabs--display .dp-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.dp-modal-activity-detail-modal .dp-modal-tabs--external.dp-modal-tabs--display .dp-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.dp-modal-activity-detail-tab-content--general .dp-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.dp-modal-activity-detail-content .dp-modal-milestone-status {
  margin: 0;
}

.dp-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.dp-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.dp-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.dp-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.dp-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.dp-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.dp-modal-activity-detail-pic-chat-wrapper:hover .dp-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.dp-modal-activity-detail-pic-chat-wrapper:hover .dp-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.dp-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.dp-modal-activity-detail-pic--clickable:hover .dp-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.dp-modal-activity-detail-content--external .dp-modal-activity-detail-pic {
  color: #E67E22;
}

.dp-modal-activity-detail-content--external .dp-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.dp-modal-activity-detail-content--external .dp-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.dp-modal-activity-detail-content--external .dp-modal-activity-detail-pic--clickable:hover .dp-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.dp-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.dp-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.dp-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.dp-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.dp-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.dp-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.dp-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.dp-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.dp-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.dp-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.dp-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dp-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.dp-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.dp-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.dp-modal-activity-detail-content--external .dp-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.dp-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.dp-modal-activity-detail-content--external .dp-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.dp-modal-activity-detail-content--external .dp-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.dp-modal-activity-detail-content--external .dp-modal-activity-detail-document-name {
  color: #E67E22;
}

.dp-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.dp-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.dp-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.dp-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.dp-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.dp-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.dp-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.dp-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.dp-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.dp-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.dp-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.dp-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.dp-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.dp-modal-activity-detail-tab-content--general {
  padding: 0;
}

.dp-modal-activity-detail-tab-content--general .dp-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.dp-modal-activity-detail-tab-content--general > div:not(.dp-modal-item-text-info) {
  padding: 0 1.5rem;
}

.dp-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.dp-modal-activity-detail-tab-content--attachment,
.dp-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.dp-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.dp-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.dp-modal-activity-detail-tab-content--attachment .dp-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.dp-modal-activity-detail-tab-content--attachment .dp-modal-batch-assignment-table-section > .dp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.dp-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.dp-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.dp-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.dp-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.dp-modal-activity-detail-content--external .dp-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.dp-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.dp-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.dp-modal-activity-detail-content--external .dp-modal-item-text-info {
  background-color: #FEF5E7;
}

.dp-modal-activity-detail-content--external .dp-modal-task-notes-section {
  background-color: #FEF5E7;
}

.dp-modal-task-notes-section .dp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.dp-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.dp-modal-task-notes-textarea.dp-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.dp-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.dp-modal-task-chat-section > .dp-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.dp-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.dp-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.dp-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dp-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dp-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.dp-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.dp-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.dp-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.dp-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.dp-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.dp-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.dp-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.dp-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.dp-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.dp-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.dp-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.dp-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.dp-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.dp-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.dp-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.dp-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.dp-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.dp-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.dp-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.dp-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.dp-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.dp-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.dp-modal-activity-detail-content--external .dp-modal-task-chat-avatar {
  background-color: #F5B041;
}

.dp-modal-activity-detail-content--external .dp-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.dp-modal-activity-detail-content--external .dp-modal-task-chat-reply-btn {
  color: #E67E22;
}

.dp-modal-activity-detail-content--external .dp-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.dp-modal-dropdown--display .dp-modal-dropdown-item,
.dp-modal-dropdown--display [class*="-item"],
.dp-modal-tags-dropdown--display .dp-modal-tags-dropdown-item,
.dp-modal-baseline-date-dropdown--display .dp-modal-baseline-date-item,
.dp-modal-reference-type-dropdown--display .dp-modal-reference-type-item,
.dp-modal-delivery-priority-dropdown--display .dp-modal-delivery-priority-item,
.dp-modal-organization-dropdown--display .dp-modal-organization-item,
.dp-modal-sales-structure-dropdown--display .dp-modal-sales-structure-item,
.dp-modal-delivery-type-dropdown--display .dp-modal-delivery-type-item,
.dp-modal-sales-channel-dropdown--display .dp-modal-sales-channel-item,
.dp-modal-sales-unit-dropdown--display .dp-modal-sales-unit-item,
.dp-modal-sold-to-party-dropdown--display .dp-modal-sold-to-party-item,
.dp-modal-deliver-to-party-dropdown--display .dp-modal-deliver-to-party-item,
.dp-modal-attention-to-deliver-dropdown--display .dp-modal-attention-to-deliver-item,
.dp-modal-incoterm-dropdown--display .dp-modal-incoterm-item,
.dp-modal-delivery-point-dropdown--display .dp-modal-delivery-point-item,
.dp-modal-shipping-point-dropdown--display .dp-modal-shipping-point-item,
.dp-modal-sales-order-dropdown--display .dp-modal-sales-order-item,
.dp-modal-sales-person-dropdown--display .dp-modal-sales-person-item,
.dp-modal-sales-team-dropdown--display .dp-modal-sales-team-item,
.dp-modal-territory-dropdown--display .dp-modal-territory-item,
.dp-modal-sales-office-dropdown--display .dp-modal-sales-office-item,
.dp-modal-status-dropdown--display .dp-modal-status-item,
.dp-modal-handling-product-dropdown--display .dp-modal-handling-product-item,
.dp-modal-child-uom-dropdown--display .dp-modal-child-uom-item,
.dp-modal-partner-type-dropdown--display .dp-modal-partner-type-item,
.dp-modal-partner-id-dropdown--display .dp-modal-partner-id-item,
.dp-modal-custom-dropdown--display .dp-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.dp-modal-dropdown--display .dp-modal-dropdown-item:hover,
.dp-modal-dropdown--display [class*="-item"]:hover,
.dp-modal-tags-dropdown--display .dp-modal-tags-dropdown-item:hover,
.dp-modal-baseline-date-dropdown--display .dp-modal-baseline-date-item:hover,
.dp-modal-reference-type-dropdown--display .dp-modal-reference-type-item:hover,
.dp-modal-delivery-priority-dropdown--display .dp-modal-delivery-priority-item:hover,
.dp-modal-organization-dropdown--display .dp-modal-organization-item:hover,
.dp-modal-sales-structure-dropdown--display .dp-modal-sales-structure-item:hover,
.dp-modal-delivery-type-dropdown--display .dp-modal-delivery-type-item:hover,
.dp-modal-sales-channel-dropdown--display .dp-modal-sales-channel-item:hover,
.dp-modal-sales-unit-dropdown--display .dp-modal-sales-unit-item:hover,
.dp-modal-sold-to-party-dropdown--display .dp-modal-sold-to-party-item:hover,
.dp-modal-deliver-to-party-dropdown--display .dp-modal-deliver-to-party-item:hover,
.dp-modal-attention-to-deliver-dropdown--display .dp-modal-attention-to-deliver-item:hover,
.dp-modal-incoterm-dropdown--display .dp-modal-incoterm-item:hover,
.dp-modal-delivery-point-dropdown--display .dp-modal-delivery-point-item:hover,
.dp-modal-shipping-point-dropdown--display .dp-modal-shipping-point-item:hover,
.dp-modal-sales-order-dropdown--display .dp-modal-sales-order-item:hover,
.dp-modal-sales-person-dropdown--display .dp-modal-sales-person-item:hover,
.dp-modal-sales-team-dropdown--display .dp-modal-sales-team-item:hover,
.dp-modal-territory-dropdown--display .dp-modal-territory-item:hover,
.dp-modal-sales-office-dropdown--display .dp-modal-sales-office-item:hover,
.dp-modal-status-dropdown--display .dp-modal-status-item:hover,
.dp-modal-handling-product-dropdown--display .dp-modal-handling-product-item:hover,
.dp-modal-child-uom-dropdown--display .dp-modal-child-uom-item:hover,
.dp-modal-partner-type-dropdown--display .dp-modal-partner-type-item:hover,
.dp-modal-partner-id-dropdown--display .dp-modal-partner-id-item:hover,
.dp-modal-custom-dropdown--display .dp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.dp-modal-dropdown--display [class*="-item--selected"],
.dp-modal-tags-dropdown--display .dp-modal-tags-dropdown-item--selected,
.dp-modal-baseline-date-dropdown--display .dp-modal-baseline-date-item--selected,
.dp-modal-reference-type-dropdown--display .dp-modal-reference-type-item--selected,
.dp-modal-delivery-priority-dropdown--display .dp-modal-delivery-priority-item--selected,
.dp-modal-organization-dropdown--display .dp-modal-organization-item--selected,
.dp-modal-sales-structure-dropdown--display .dp-modal-sales-structure-item--selected,
.dp-modal-delivery-type-dropdown--display .dp-modal-delivery-type-item--selected,
.dp-modal-sales-channel-dropdown--display .dp-modal-sales-channel-item--selected,
.dp-modal-sales-unit-dropdown--display .dp-modal-sales-unit-item--selected,
.dp-modal-sold-to-party-dropdown--display .dp-modal-sold-to-party-item--selected,
.dp-modal-deliver-to-party-dropdown--display .dp-modal-deliver-to-party-item--selected,
.dp-modal-attention-to-deliver-dropdown--display .dp-modal-attention-to-deliver-item--selected,
.dp-modal-incoterm-dropdown--display .dp-modal-incoterm-item--selected,
.dp-modal-delivery-point-dropdown--display .dp-modal-delivery-point-item--selected,
.dp-modal-shipping-point-dropdown--display .dp-modal-shipping-point-item--selected,
.dp-modal-sales-order-dropdown--display .dp-modal-sales-order-item--selected,
.dp-modal-sales-person-dropdown--display .dp-modal-sales-person-item--selected,
.dp-modal-sales-team-dropdown--display .dp-modal-sales-team-item--selected,
.dp-modal-territory-dropdown--display .dp-modal-territory-item--selected,
.dp-modal-sales-office-dropdown--display .dp-modal-sales-office-item--selected,
.dp-modal-status-dropdown--display .dp-modal-status-item--selected,
.dp-modal-handling-product-dropdown--display .dp-modal-handling-product-item--selected,
.dp-modal-child-uom-dropdown--display .dp-modal-child-uom-item--selected,
.dp-modal-partner-type-dropdown--display .dp-modal-partner-type-item--selected,
.dp-modal-partner-id-dropdown--display .dp-modal-partner-id-item--selected,
.dp-modal-custom-dropdown--display .dp-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.dp-modal-dropdown--display [class*="-check"],
.dp-modal-dropdown--display .dp-modal-dropdown-check,
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.dp-modal-dropdown--display [class*="-item-code"],
.dp-modal-dropdown--display [class*="-item-name"],
.dp-modal-dropdown--display [class*="-item-content"],
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-code,
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-name,
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-item,
.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.dp-modal-sold-to-party-dropdown-content--display .dp-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.dp-modal-tags-dropdown--display .dp-modal-tags-item,
.dp-modal-tags-dropdown--display .dp-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-tags-dropdown--display .dp-modal-tags-item:hover {
  background-color: transparent !important;
}

.dp-modal-tags-dropdown--display .dp-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.dp-modal-tags-dropdown--display .dp-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item,
.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.dp-modal-custom-dropdown-list--display .dp-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Event/Event.css ===== */
/* Event Wrapper - prevent page scroll */
.event-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Event Container */
.event-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.event-header {
  margin-bottom: 0;
}

.event-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Delivery Control - Exact copy of third-nav-control */
.event-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.event-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.event-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.event-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.event-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.event-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.event-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.event-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.event-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.event-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.event-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.event-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.event-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.event-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.event-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.event-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.event-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.event-layout-dropdown-item:last-child {
  border-bottom: none;
}

.event-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.event-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.event-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.event-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.event-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.event-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.event-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.event-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.event-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.event-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.event-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.event-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.event-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.event-filter-parameter-wrapper {
  position: relative;
}

.event-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.event-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.event-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.event-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.event-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.event-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.event-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.event-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.event-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.event-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.event-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.event-filter-close:hover {
  background-color: #f0f0f0;
}

.event-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.event-filter-group {
  margin-bottom: 1rem;
}

.event-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.event-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.event-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.event-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.event-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.event-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.event-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.event-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.event-filter-org-container {
  flex: 1 1;
  position: relative;
}

.event-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.event-filter-org-input:hover {
  border-color: #C2DE54;
}

.event-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.event-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.event-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.event-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.event-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.event-filter-tag-remove:hover {
  color: #000;
}

.event-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.event-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.event-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.event-filter-org-item:hover {
  background-color: #f5f5f5;
}

.event-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.event-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.event-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.event-filter-org-code {
  font-weight: 600;
  color: #333;
}

.event-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.event-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.event-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.event-type-dropdown-item:last-child {
  border-bottom: none;
}

.event-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.event-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.event-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.event-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Event Table */
.event-table {
  animation: fadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .event-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .event-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .event-type-dropdown {
    min-width: 11.25rem;
  }

  .event-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}
/* ===== from pages/Sales/Event/EventModal.css ===== */
/* Case Modal Specific Styles */
.event-modal {
  overscroll-behavior: contain;
}

.event-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.ev-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.ev-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.ev-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.ev-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.ev-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.ev-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.ev-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ev-modal-pov-button--external.ev-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.ev-modal-pov-button--external .ev-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-pov-button--external .ev-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.ev-modal-pov-caret--open {
  transform: rotate(180deg);
}

.ev-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.ev-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.ev-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.ev-modal-pov-dropdown-item span {
  flex: 1 1;
}

.ev-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.ev-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.ev-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.ev-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.ev-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.ev-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.ev-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.ev-modal-tabs--display .ev-modal-tab {
  color: #666666;
}

.ev-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.ev-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.ev-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.ev-modal-tabs--display .ev-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ev-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.ev-modal-tabs--external .ev-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ev-modal-tabs--external.ev-modal-tabs--display .ev-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ev-modal-tabs--external .ev-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.ev-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.ev-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.ev-modal-action-button span {
  white-space: nowrap;
}

.ev-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.ev-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.ev-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ev-modal-action-button--disabled .ev-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.ev-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.ev-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.ev-modal-left-area--full .ev-modal-back-button {
  transition: width 300ms ease;
}

.ev-modal-left-area--full .ev-modal-back-button:hover {
  width: 3.5rem;
}

.ev-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.ev-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.ev-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ev-modal-content--item {
  padding-bottom: 1rem;
}

.ev-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.ev-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.ev-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.ev-modal-attachment-table-container .ev-modal-detail-table thead,
.ev-modal-attachment-table-container .ev-modal-attachment-table thead {
  box-shadow: none !important;
}

.ev-modal-attachment-table-container .ev-modal-detail-table tr,
.ev-modal-attachment-table-container .ev-modal-attachment-table tr {
  box-shadow: none !important;
}

.ev-modal-attachment-table-container .ev-modal-detail-table tbody tr:last-child,
.ev-modal-attachment-table-container .ev-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ev-modal-attachment-table-container .ev-modal-detail-table tbody tr:last-child td,
.ev-modal-attachment-table-container .ev-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ev-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.ev-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.ev-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.ev-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.ev-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.ev-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.ev-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ev-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.ev-modal-attachment-filename--external {
  color: #E67E22;
}

.ev-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.ev-modal-tab-content--display .ev-modal-attachment-filename--external {
  color: #E67E22;
}

.ev-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.ev-modal-attachment-size {
  color: #666666;
}

.ev-modal-attachment-date {
  color: #666666;
}

.ev-modal-attachment-uploadedby {
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.ev-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ev-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ev-modal-attachment-browse-btn:focus {
  outline: none;
}

.ev-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ev-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ev-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-attachment-browse-btn--disabled .ev-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ev-modal-tab-content--display .ev-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.ev-modal-tab-content--display .ev-modal-attachment-filename.ev-modal-attachment-filename--external {
  color: #E67E22;
}

.ev-modal-tab-content--display .ev-modal-attachment-type {
  color: #666666;
}

.ev-modal-tab-content--display .ev-modal-attachment-size {
  color: #666666;
}

.ev-modal-tab-content--display .ev-modal-attachment-date {
  color: #666666;
}

.ev-modal-tab-content--display .ev-modal-attachment-uploadedby {
  color: #333333;
}

.ev-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.ev-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.ev-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.ev-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ev-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.ev-modal-tab-content--display .ev-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.ev-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.ev-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.ev-modal-tab-content--display .ev-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.ev-modal-basic-section--external .ev-modal-form-input:focus {
  border-color: #F5B041;
}

.ev-modal-basic-section--external .ev-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.ev-modal-tab-content--external .ev-modal-form-input:focus,
.ev-modal-tab-content--external .ev-modal-form-textarea:focus,
.ev-modal-tab-content--external .ev-modal-custom-dropdown-input:focus,
.ev-modal-tab-content--external .ev-modal-date-input:focus,
.ev-modal-tab-content--external .ev-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.ev-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.ev-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.ev-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.ev-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.ev-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ev-modal-tab-content--display .ev-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.ev-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.ev-modal-tab-content--display .ev-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.ev-modal-partner-header-section--external .ev-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.ev-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ev-modal-tab-content--display .ev-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.ev-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.ev-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.ev-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.ev-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ev-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.ev-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.ev-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.ev-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.ev-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.ev-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.ev-modal-chat-section {
  padding: 1.5rem 0;
}

.ev-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ev-modal-chat-header h3 {
  margin: 0;
}

.ev-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.ev-modal-chat-new-thread .ev-modal-form-textarea {
  min-height: 5rem;
}

.ev-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.ev-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ev-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ev-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.ev-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ev-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.ev-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.ev-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.ev-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ev-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.ev-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.ev-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.ev-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ev-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ev-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-chat-user-name {
  color: #333333 !important;
}

.ev-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.ev-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.ev-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.ev-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.ev-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.ev-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.ev-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ev-modal-chat-reply-btn:hover .ev-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.ev-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.ev-modal-chat-replies .ev-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.ev-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.ev-modal-chat-reply-input .ev-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.ev-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ev-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.ev-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.ev-modal-tab-content--display .ev-modal-chat-thread {
  border-color: #E5E5E5;
}

.ev-modal-tab-content--display .ev-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display .ev-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-chat-user-position {
  background-color: #E8F5E9;
}

.ev-modal-tab-content--display .ev-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.ev-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ev-modal-tab-content--display .ev-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.ev-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.ev-modal-notes-header-section--external .ev-modal-form-textarea:focus {
  border-color: #F5B041;
}

.ev-modal-chat-section--external .ev-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.ev-modal-chat-avatar--external {
  background-color: #F5B041;
}

.ev-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.ev-modal-tab-content--display .ev-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-thread {
  border-color: #E5E5E5;
}

.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-message--main {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-user-name {
  color: #333333 !important;
}

.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-user-position {
  background-color: #FDE8D0;
}

.ev-modal-tab-content--display.ev-modal-tab-content--external .ev-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.ev-modal-chat-reply-btn--external {
  color: #E67E22;
}

.ev-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.ev-modal-chat-reply-btn--external .ev-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ev-modal-chat-reply-btn--external:hover .ev-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.ev-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ev-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.ev-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.ev-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.ev-modal-chat-textarea-wrapper {
  position: relative;
}

.ev-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.ev-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ev-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.ev-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.ev-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.ev-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.ev-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ev-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.ev-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.ev-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.ev-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ev-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.ev-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.ev-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.ev-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.ev-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.ev-modal-tab-content--display .ev-modal-table-empty-state-title {
  color: #666666;
}

.ev-modal-tab-content--display .ev-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.ev-modal-partner-header-section + .ev-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.ev-modal-partner-header-section + .ev-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.ev-modal-partner-header-section + .ev-modal-item-content-section .ev-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.ev-modal-partner-header-section + .ev-modal-item-content-section .ev-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.ev-modal-partner-header-section + .ev-modal-item-content-section .ev-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.ev-modal-partner-header-section + .ev-modal-item-content-section .ev-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.ev-modal-partner-header-section + .ev-modal-item-content-section .ev-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.ev-modal-partner-table-container .ev-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.ev-modal-partner-table-container .ev-modal-partner-table th:last-child,
.ev-modal-partner-table-container .ev-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.ev-modal-detail-table-container--external.ev-modal-partner-table-container .ev-modal-partner-table th:last-child,
.ev-modal-detail-table-container--external.ev-modal-partner-table-container .ev-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.ev-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ev-modal-item-header-section .ev-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-tab-content--display .ev-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.ev-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.ev-modal-tab-content--display .ev-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.ev-modal-item-header-section--external .ev-modal-form-input:focus {
  border-color: #F5B041;
}

.ev-modal-item-header-section--external .ev-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.ev-modal-detail-subtabs--external .ev-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.ev-modal-detail-subtabs--external .ev-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.ev-modal-detail-subtabs--external .ev-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.ev-modal-tab-content--display .ev-modal-detail-subtabs--external .ev-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.ev-modal-tab-content--display .ev-modal-detail-subtabs--external .ev-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.ev-modal-tab-content.ev-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.ev-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.ev-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.ev-modal-item-table-wrapper .ev-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.ev-modal-item-table-wrapper .ev-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.ev-modal-item-table-wrapper--terms .ev-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.ev-modal-tab-content--external.ev-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.ev-modal-tab-content--external .ev-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-tab-content--external .ev-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-tab-content--external .ev-modal-item-table-wrapper--terms .ev-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.ev-modal-tab-content--external .ev-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.ev-modal-item-table-wrapper--terms .ev-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.ev-modal-item-table-wrapper--terms .ev-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ev-modal-item-table-wrapper--terms .ev-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.ev-modal-item-table-wrapper--terms .ev-modal-detail-table tr {
  height: auto;
}

.ev-modal-item-table-wrapper--terms .ev-modal-detail-table-container .ev-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.ev-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.ev-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.ev-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ev-modal-volume-input-group .ev-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ev-modal-volume-input-group .ev-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ev-modal-volume-input-group .ev-modal-sla-input-wrapper .ev-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.ev-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ev-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ev-modal-volume-uom-list--display .ev-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-volume-uom-list--display .ev-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.ev-modal-volume-uom-list--display .ev-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-volume-uom-list--display .ev-modal-volume-uom-check {
  color: #999999 !important;
}

.ev-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.ev-modal-volume-uom-dropdown--display .ev-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ev-modal-volume-uom-dropdown--display .ev-modal-volume-uom-item:hover {
  background-color: transparent;
}

.ev-modal-volume-uom-dropdown--display .ev-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ev-modal-volume-uom-dropdown--display .ev-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.ev-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ev-modal-weight-input-group .ev-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.ev-modal-weight-input-group .ev-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.ev-modal-weight-input-group .ev-modal-sla-input-wrapper .ev-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.ev-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.ev-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-weight-uom-input::placeholder {
  color: #999999;
}

.ev-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.ev-modal-weight-uom-dropdown--display .ev-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.ev-modal-weight-uom-dropdown--display .ev-modal-weight-uom-item:hover {
  background-color: transparent;
}

.ev-modal-weight-uom-dropdown--display .ev-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.ev-modal-weight-uom-dropdown--display .ev-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.ev-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.ev-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.ev-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.ev-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.ev-modal-form-input--display ~ .ev-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.ev-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.ev-modal-form-input--display {
  cursor: default;
}

.ev-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.ev-modal-form-label--display {
  color: #333333 !important;
}

.ev-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.ev-modal-form-label--display .ev-modal-required {
  color: #FF4D4F;
}

.ev-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.ev-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.ev-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.ev-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.ev-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.ev-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.ev-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ev-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.ev-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.ev-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.ev-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.ev-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.ev-modal-sla-spinner-btn:disabled .ev-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ev-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sla-spinner-btn:hover .ev-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.ev-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.ev-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.ev-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.ev-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.ev-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.ev-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.ev-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.ev-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.ev-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.ev-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.ev-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.ev-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.ev-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.ev-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.ev-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.ev-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.ev-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.ev-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.ev-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.ev-modal-stage-dropdown-input--display .ev-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.ev-modal-stage-dropdown-input--display .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.ev-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.ev-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.ev-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.ev-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.ev-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ev-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.ev-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.ev-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.ev-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.ev-modal-accordion-header--display {
  color: #333333;
}

.ev-modal-accordion-header--display.ev-modal-accordion-header--active {
  color: #333333;
}

.ev-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.ev-modal-accordion-header--display .ev-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.ev-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.ev-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.ev-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.ev-modal-stage-main-title--display {
  color: #138B4C;
}

.ev-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-stage-title--display {
  color: #333333;
}

.ev-modal-stage-current {
  margin-bottom: 1.875rem;
}

.ev-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.ev-modal-stage-label--display {
  color: #666666;
}

.ev-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-stage-subtitle--display {
  color: #333333;
}

.ev-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.ev-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.ev-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.ev-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.ev-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.ev-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ev-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.ev-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.ev-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ev-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.ev-modal-download-button:active {
  background-color: #E0E0E0;
}

.ev-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-download-button--display .ev-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.ev-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.ev-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.ev-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.ev-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.ev-modal-timeline-item--display .ev-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.ev-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.ev-modal-timeline-badge--inactive .ev-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.ev-modal-timeline-item--display .ev-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.ev-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.ev-modal-timeline-item--display .ev-modal-timeline-line {
  background-color: #138B4C;
}

.ev-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ev-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.ev-modal-timeline-status--display {
  color: #333333;
}

.ev-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.ev-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.ev-modal-timeline-date--display {
  color: #666666;
}

.ev-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.ev-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.ev-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.ev-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ev-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ev-modal-timeline-document--display {
  color: #138B4C;
}

.ev-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.ev-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.ev-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.ev-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.ev-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.ev-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.ev-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.ev-modal-activity-item--display .ev-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.ev-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.ev-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.ev-modal-activity-item--display .ev-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.ev-modal-activity-item--display .ev-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.ev-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.ev-modal-activity-item--display .ev-modal-activity-line {
  background-color: #138B4C;
}

.ev-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.ev-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.ev-modal-activity-type--display {
  color: #333333;
}

.ev-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.ev-modal-activity-header--display {
  color: #666666;
}

.ev-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.ev-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.ev-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.ev-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.ev-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.ev-modal-activity-change--display .ev-modal-activity-field {
  color: #333333;
}

.ev-modal-activity-change--display .ev-modal-activity-new {
  color: #138B4C;
}

.ev-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.ev-modal-activity-date--display {
  color: #666666;
}

.ev-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.ev-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.ev-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ev-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.ev-modal-activity-more--display {
  color: #138B4C;
}

.ev-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-activity-more--display .ev-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.ev-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.ev-modal-reference-table thead {
  background-color: #F9F9F9;
}

.ev-modal-tab-content--display .ev-modal-reference-table thead {
  background-color: #FAFAFA;
}

.ev-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.ev-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.ev-modal-tab-content--display .ev-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.ev-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.ev-modal-tab-content--display .ev-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.ev-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.ev-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.ev-modal-detail-subtab:hover {
  color: #138B4C;
}

.ev-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.ev-modal-tab-content--display .ev-modal-detail-subtab {
  color: #666666;
}

.ev-modal-tab-content--display .ev-modal-detail-subtab:hover {
  color: #138B4C;
}

.ev-modal-tab-content--display .ev-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.ev-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.ev-modal-tab-content.ev-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.ev-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-detail-delivery-wrapper .ev-modal-form-label {
  flex-shrink: 0;
}

.ev-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.ev-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.ev-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ev-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ev-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ev-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ev-modal-detail-table-container .ev-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ev-modal-detail-table-container .ev-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ev-modal-detail-table-container .ev-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.ev-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.ev-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ev-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.ev-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.ev-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.ev-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.ev-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-detail-table th,
.ev-modal-tab-content--display .ev-modal-packaging-table th,
.ev-modal-tab-content--display .ev-modal-partner-table th,
.ev-modal-tab-content--display .ev-modal-attachment-table th {
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-detail-table td,
.ev-modal-tab-content--display .ev-modal-packaging-table td,
.ev-modal-tab-content--display .ev-modal-partner-table td,
.ev-modal-tab-content--display .ev-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-description,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-text,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-batch,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-serial,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-so-item,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-package-no,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-product-type,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-product-group,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-product-category,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ev-modal-tab-content--display .ev-modal-detail-table tbody tr:hover .ev-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-description,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-text,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-batch,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-serial,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-so-item,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-package-no,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-type,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-group,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-category,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .ev-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.ev-modal-detail-table-container .ev-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.ev-modal-detail-table-container .ev-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.ev-modal-detail-table-container--external .ev-modal-detail-table td {
  color: #555555 !important;
}

.ev-modal-detail-table-container .ev-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.ev-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.ev-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ev-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.ev-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.ev-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.ev-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.ev-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.ev-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.ev-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ev-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ev-modal-detail-table tbody tr:hover .detail-table-description,
.ev-modal-detail-table tbody tr:hover .detail-table-text,
.ev-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ev-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ev-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ev-modal-detail-table tbody tr:hover .detail-table-batch,
.ev-modal-detail-table tbody tr:hover .detail-table-serial,
.ev-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ev-modal-detail-table tbody tr:hover .detail-table-so-item,
.ev-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ev-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ev-modal-detail-table tbody tr:hover .detail-table-package-no,
.ev-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ev-modal-detail-table tbody tr:hover .detail-table-product-type,
.ev-modal-detail-table tbody tr:hover .detail-table-product-group,
.ev-modal-detail-table tbody tr:hover .detail-table-product-category,
.ev-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ev-modal-detail-table tbody tr:hover .ev-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-description,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-text,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-available-qty,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-batch,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-serial,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-sales-order,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-so-item,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-pr-item,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-package-no,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-type,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-group,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-category,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .detail-table-product-variant,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .ev-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.ev-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ev-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.ev-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.ev-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.ev-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.ev-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ev-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.ev-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ev-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.ev-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.ev-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.ev-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.ev-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.ev-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.ev-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.ev-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.ev-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.ev-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.ev-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.ev-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.ev-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.ev-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ev-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.ev-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ev-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.ev-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.ev-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ev-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.ev-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.ev-modal-add-item-btn--disabled .ev-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.ev-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Reference Table - Same style as Detail Delivery Table */
.ev-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.ev-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.ev-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ev-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ev-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.ev-modal-sales-order-table-container .ev-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.ev-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.ev-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.ev-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.ev-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.ev-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.ev-modal-table-input:focus {
  outline: none;
}

.ev-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.ev-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.ev-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ev-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.ev-modal-tags-container {
  position: relative;
  width: 100%;
}

.ev-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ev-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ev-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.ev-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.ev-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.ev-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.ev-modal-tags-input--display .ev-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.ev-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.ev-modal-tag-remove:hover {
  color: #333333;
}

.ev-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.ev-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ev-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.ev-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.ev-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.ev-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.ev-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.ev-modal-status-container {
  position: relative;
  width: 100%;
}

.ev-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ev-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ev-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.ev-modal-status-placeholder {
  color: #999999;
}

.ev-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.ev-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ev-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ev-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-status-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-status-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.ev-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ev-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.ev-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.ev-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.ev-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.ev-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.ev-modal-status-input--display .ev-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.ev-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.ev-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ev-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.ev-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.ev-modal-stage-dropdown-placeholder {
  color: #999999;
}

.ev-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.ev-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.ev-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.ev-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.ev-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.ev-modal-stage--created .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.ev-modal-stage--approved .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.ev-modal-stage--processed .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.ev-modal-stage--picked .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.ev-modal-stage--packed .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.ev-modal-stage--planned .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.ev-modal-stage--loaded .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.ev-modal-stage--issued .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.ev-modal-stage--departed .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.ev-modal-stage--arrived .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.ev-modal-stage--unloaded .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.ev-modal-stage--delivered .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.ev-modal-stage--confirmed .ev-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.ev-modal-stage--billed .ev-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.ev-modal-stage-dropdown-input .ev-modal-stage,
.ev-modal-stage-dropdown-item .ev-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.ev-modal-baseline-date-dropdown {
  position: relative;
}

.ev-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ev-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.ev-modal-reference-type-dropdown {
  position: relative;
}

.ev-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ev-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.ev-modal-delivery-priority-dropdown {
  position: relative;
}

.ev-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ev-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.ev-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.ev-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.ev-modal-delivery-priority-separator {
  color: #666666;
}

.ev-modal-delivery-priority-name {
  color: #333333;
}

.ev-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.ev-modal-organization-dropdown {
  position: relative;
}

.ev-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ev-modal-organization-dropdown-content--display .ev-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-organization-dropdown-content--display .ev-modal-organization-item:hover {
  background-color: transparent !important;
}

.ev-modal-organization-dropdown-content--display .ev-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-organization-dropdown-content--display .ev-modal-organization-code,
.ev-modal-organization-dropdown-content--display .ev-modal-organization-name,
.ev-modal-organization-dropdown-content--display .ev-modal-organization-separator {
  color: #999999 !important;
}

.ev-modal-organization-dropdown-content--display .ev-modal-organization-check {
  color: #999999 !important;
}

.ev-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-organization-separator {
  color: #999999;
}

.ev-modal-organization-name {
  color: #333333;
}

.ev-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.ev-modal-sales-structure-dropdown {
  position: relative;
}

.ev-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.ev-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ev-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-sales-structure-separator {
  color: #999999;
}

.ev-modal-sales-structure-name {
  color: #333333;
}

.ev-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.ev-modal-delivery-type-dropdown {
  position: relative;
}

.ev-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.ev-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ev-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ev-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.ev-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.ev-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.ev-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.ev-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-delivery-type-separator {
  color: #999999;
}

.ev-modal-delivery-type-description {
  color: #333333;
}

.ev-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.ev-modal-content::-webkit-scrollbar,
.ev-modal-stage-content::-webkit-scrollbar,


.ev-modal-content::-webkit-scrollbar-track,
.ev-modal-stage-content::-webkit-scrollbar-track,


.ev-modal-content::-webkit-scrollbar-thumb,
.ev-modal-stage-content::-webkit-scrollbar-thumb,


.ev-modal-content::-webkit-scrollbar-thumb:hover,
.ev-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.ev-modal-sales-channel-dropdown {
  position: relative;
}

.ev-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ev-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-sales-channel-separator {
  color: #999999;
}

.ev-modal-sales-channel-name {
  color: #333333;
}

.ev-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.ev-modal-sales-unit-dropdown {
  position: relative;
}

.ev-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ev-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-sales-unit-separator {
  color: #999999;
}

.ev-modal-sales-unit-name {
  color: #333333;
}

.ev-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.ev-modal-organization-item--placeholder,
.ev-modal-sales-structure-item--placeholder,
.ev-modal-sales-channel-item--placeholder,
.ev-modal-sales-unit-item--placeholder,
.ev-modal-territory-item--placeholder,
.ev-modal-sales-office-item--placeholder,
.ev-modal-sold-to-party-item--placeholder,
.ev-modal-deliver-to-party-item--placeholder,
.ev-modal-attention-to-deliver-item--placeholder,
.ev-modal-incoterm-item--placeholder,
.ev-modal-delivery-point-item--placeholder,
.ev-modal-shipping-point-item--placeholder,
.ev-modal-sales-order-item--placeholder,
.ev-modal-sales-team-item--placeholder,
.ev-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.ev-modal-organization-item--placeholder:hover,
.ev-modal-sales-structure-item--placeholder:hover,
.ev-modal-sales-channel-item--placeholder:hover,
.ev-modal-sales-unit-item--placeholder:hover,
.ev-modal-territory-item--placeholder:hover,
.ev-modal-sales-office-item--placeholder:hover,
.ev-modal-sold-to-party-item--placeholder:hover,
.ev-modal-deliver-to-party-item--placeholder:hover,
.ev-modal-attention-to-deliver-item--placeholder:hover,
.ev-modal-incoterm-item--placeholder:hover,
.ev-modal-delivery-point-item--placeholder:hover,
.ev-modal-shipping-point-item--placeholder:hover,
.ev-modal-sales-order-item--placeholder:hover,
.ev-modal-sales-team-item--placeholder:hover,
.ev-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.ev-modal-sold-to-party-dropdown {
  position: relative;
}

.ev-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-sold-to-party-input:focus,
.ev-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.ev-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ev-modal-sold-to-party-separator {
  color: #999999;
}

.ev-modal-sold-to-party-name {
  color: #333333;
}

.ev-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.ev-modal-deliver-to-party-dropdown {
  position: relative;
}

.ev-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ev-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.ev-modal-deliver-to-party-separator {
  color: #999999;
}

.ev-modal-deliver-to-party-name {
  color: #333333;
}

.ev-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.ev-modal-attention-to-deliver-dropdown {
  position: relative;
}
.ev-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.ev-modal-attention-to-deliver-separator {
  color: #999999;
}
.ev-modal-attention-to-deliver-name {
  color: #333333;
}
.ev-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.ev-modal-incoterm-dropdown {
  position: relative;
}
.ev-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.ev-modal-incoterm-separator {
  color: #999999;
}
.ev-modal-incoterm-name {
  color: #333333;
}
.ev-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.ev-modal-delivery-point-dropdown {
  position: relative;
}
.ev-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ev-modal-delivery-point-separator {
  color: #999999;
}
.ev-modal-delivery-point-name {
  color: #333333;
}
.ev-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.ev-modal-shipping-point-dropdown {
  position: relative;
}
.ev-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ev-modal-shipping-point-separator {
  color: #999999;
}
.ev-modal-shipping-point-name {
  color: #333333;
}
.ev-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.ev-modal-sales-order-dropdown {
  position: relative;
}
.ev-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.ev-modal-sales-order-separator {
  color: #999999;
}
.ev-modal-sales-order-name {
  color: #333333;
}
.ev-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.ev-modal-date-picker {
  position: relative;
}
.ev-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.ev-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.ev-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.ev-modal-date-input::-webkit-datetime-edit-text,
.ev-modal-date-input::-webkit-datetime-edit-month-field,
.ev-modal-date-input::-webkit-datetime-edit-day-field,
.ev-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.ev-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.ev-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.ev-modal-sales-person-dropdown {
  position: relative;
}
.ev-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.ev-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.ev-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.ev-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.ev-modal-sales-person-separator {
  color: #999999;
}
.ev-modal-sales-person-name {
  color: #333333;
}
.ev-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.ev-modal-sales-team-dropdown {
  position: relative;
}
.ev-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ev-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.ev-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.ev-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.ev-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.ev-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ev-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ev-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.ev-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.ev-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.ev-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.ev-modal-sales-team-separator {
  color: #999999;
}
.ev-modal-sales-team-name {
  color: #333333;
}
.ev-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.ev-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.ev-modal-territory-dropdown {
  position: relative;
}

.ev-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ev-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-territory-separator {
  color: #999999;
}

.ev-modal-territory-name {
  color: #333333;
}

.ev-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.ev-modal-sales-office-dropdown {
  position: relative;
}

.ev-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ev-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.ev-modal-sales-office-separator {
  color: #999999;
}

.ev-modal-sales-office-name {
  color: #333333;
}

.ev-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.ev-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ev-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.ev-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.ev-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ev-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ev-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ev-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-table-dropdown-input:focus {
  outline: none;
}

.ev-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.ev-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.ev-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.ev-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.ev-modal-delivery-type-list::-webkit-scrollbar,
.ev-modal-stage-dropdown-list::-webkit-scrollbar,
.ev-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ev-modal-delivery-type-list::-webkit-scrollbar-track,
.ev-modal-stage-dropdown-list::-webkit-scrollbar-track,
.ev-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-delivery-type-list::-webkit-scrollbar-thumb,
.ev-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.ev-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ev-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.ev-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.ev-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.ev-modal-wrapper,
.ev-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.event-modal,
.ev-modal-wrapper,
.ev-modal-wrapper *,
.ev-modal-content,
.ev-modal-data-flow-2-container,
.ev-modal-data-flow-container,
.ev-modal-calendar-container,
.ev-modal-calendar-milestones-list,
.ev-modal-calendar-view,
.ev-modal-calendar-yearly,
.ev-modal-calendar-monthly,
.ev-modal-calendar-weekly,
.ev-modal-calendar-weekly-body,
.ev-modal-calendar-daily,
.ev-modal-calendar-daily-timeline,
.ev-modal-calendar-grid,
.ev-modal-calendar-grid-body,
.ev-modal-detail-table-container,
.ev-modal-item-table-wrapper,
.ev-modal-attachment-table-container,
.ev-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.ev-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ev-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ev-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.ev-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.ev-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.ev-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.ev-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.ev-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.ev-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-tab-content--display .ev-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.ev-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-tab-content--display .ev-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ev-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ev-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.ev-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) {
  font-weight: 600;
}

.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) .ev-modal-packaging-input,
.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) .ev-modal-packaging-input--display,
.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) .ev-modal-handling-product-input,
.ev-modal-packaging-row--unassigned:not(.ev-modal-packaging-row--expanded) .ev-modal-handling-product-input--display {
  font-weight: 600;
}

.ev-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.ev-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row td.ev-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row td.ev-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row td.ev-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td.ev-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded td.ev-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row--expanded:hover td.ev-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display,
.ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display,
.ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.ev-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.ev-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-tab-content--display .ev-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.ev-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-tab-content--display .ev-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.ev-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.ev-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.ev-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.ev-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.ev-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.ev-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.ev-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.ev-modal-packaging-detail-table th:first-child,
.ev-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.ev-modal-packaging-detail-table th:nth-child(2),
.ev-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.ev-modal-packaging-detail-table th:nth-child(3),
.ev-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.ev-modal-packaging-detail-table td:nth-child(4),
.ev-modal-packaging-detail-table td:nth-child(6),
.ev-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.ev-modal-packaging-detail-table td:nth-child(5),
.ev-modal-packaging-detail-table td:nth-child(7),
.ev-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.ev-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.ev-modal-tab-content--display .ev-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display .ev-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.ev-modal-tab-content--display .ev-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.ev-modal-tab-content--display .ev-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.ev-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.ev-modal-packaging-table td:last-child,
.ev-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.ev-modal-packaging-table td:last-child .ev-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.ev-modal-detail-table-container--external .ev-modal-packaging-table th:last-child,
.ev-modal-detail-table-container--external .ev-modal-packaging-table td.ev-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.ev-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.ev-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ev-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ev-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.ev-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.ev-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.ev-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.ev-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.ev-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ev-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.ev-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.ev-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.ev-modal-packaging-child-table tr {
  border: none !important;
}

.ev-modal-packaging-child-table thead,
.ev-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.ev-modal-packaging-child-table th:first-child,
.ev-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.ev-modal-packaging-child-table th:nth-child(2),
.ev-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.ev-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.ev-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.ev-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.ev-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.ev-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.ev-modal-packaging-child-table th:nth-child(3),
.ev-modal-packaging-child-table td:nth-child(3),
.ev-modal-packaging-child-table th:nth-child(4),
.ev-modal-packaging-child-table td:nth-child(4),
.ev-modal-packaging-child-table th:nth-child(5),
.ev-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.ev-modal-packaging-child-table th:nth-child(6),
.ev-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.ev-modal-packaging-child-table th:nth-child(7),
.ev-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.ev-modal-detail-table-container--external .ev-modal-packaging-child-table th:last-child,
.ev-modal-detail-table-container--external .ev-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.ev-modal-packaging-child-table td:last-child .ev-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.ev-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.ev-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ev-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.ev-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.ev-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row {
  transition: none !important;
}

.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display,
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display:focus,
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display,
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display:focus,
.ev-modal-tab-content--display .ev-modal-detail-table-container .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display:focus,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display:focus,
.ev-modal-tab-content--display .ev-modal-detail-table-container--external .ev-modal-packaging-table tbody tr.ev-modal-packaging-row:hover td .ev-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.ev-modal-detail-table-container--external .ev-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.ev-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ev-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ev-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.ev-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.ev-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.ev-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.ev-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.ev-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.ev-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.ev-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.ev-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.ev-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.ev-modal-detail-table-container--external .ev-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.ev-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-item--display {
  color: #999999 !important;
}

.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-code,
.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-name,
.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-separator {
  color: #999999 !important;
}

.ev-modal-handling-product-dropdown-content--display .ev-modal-handling-product-check {
  color: #999999 !important;
}

.ev-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.ev-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.ev-modal-handling-product-dropdown-content--narrow .ev-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.ev-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.ev-modal-packaging-detail-table .ev-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.ev-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.ev-modal-detail-table-container--dropdown-open .ev-modal-detail-table {
  overflow: visible;
}

.ev-modal-detail-table-container--dropdown-open .ev-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.ev-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ev-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ev-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.ev-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.ev-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.ev-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.ev-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.ev-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.ev-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.ev-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.ev-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.ev-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.ev-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.ev-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.ev-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.ev-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.ev-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.ev-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ev-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.ev-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.ev-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-item:hover {
  background-color: transparent;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-item--placeholder {
  display: none;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-code,
.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-name,
.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-separator {
  color: #555555;
}

.ev-modal-handling-product-dropdown-content--view-only .ev-modal-handling-product-check {
  color: #888888;
}

.ev-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.ev-modal-handling-product-separator {
  color: #999999;
}

.ev-modal-handling-product-name {
  color: #333333;
}

.ev-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.ev-modal-handling-product-item--placeholder {
  cursor: default;
}

.ev-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.ev-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.ev-modal-detail-table td:has(.ev-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.ev-modal-detail-table td .ev-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.ev-modal-detail-table td .ev-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.ev-modal-detail-table td .ev-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.ev-modal-detail-table td .ev-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.ev-modal-detail-table td .ev-modal-handling-product-input--display,
.ev-modal-detail-table td .ev-modal-handling-product-input--display:focus,
.ev-modal-detail-table td .ev-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display,
.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display:focus,
.ev-modal-detail-table-container .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display:focus,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover td .ev-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.ev-modal-detail-table td .ev-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.ev-modal-detail-table td .ev-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.ev-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ev-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ev-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.ev-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-table-text-icon-btn--filled:not(.ev-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.ev-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.ev-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ev-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.ev-modal-table-text-icon-btn--display.ev-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.ev-modal-table-text-icon-btn--display.ev-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-table-text-icon-btn--display.ev-modal-table-text-icon-btn--external.ev-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.ev-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.ev-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.ev-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ev-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.ev-modal-serial-assignment-btn {
  width: 10.625rem;
}

.ev-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.ev-modal-batch-assignment-btn--filled .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.ev-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.ev-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.ev-modal-batch-assignment-btn--display .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-batch-assignment-btn--display.ev-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.ev-modal-batch-assignment-btn--display.ev-modal-batch-assignment-btn--filled .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.ev-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.ev-modal-secured-qty-btn.ev-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.ev-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.ev-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.ev-modal-secured-qty-btn--grey .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.ev-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ev-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.ev-modal-batch-assignment-btn--partial .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.ev-modal-batch-assignment-btn--display.ev-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.ev-modal-batch-assignment-btn--display.ev-modal-batch-assignment-btn--partial .ev-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.ev-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.ev-modal-secured-qty-modal .ev-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.ev-modal-secured-qty-modal .ev-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ev-modal-secured-qty-modal.ev-modal-batch-assignment-modal--display .ev-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.ev-modal-secured-qty-modal .ev-modal-item-text-content {
  overflow-x: hidden;
}

.ev-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.ev-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.ev-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ev-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.ev-modal-batch-assignment-modal--display .ev-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.ev-modal-batch-assignment-modal--display .ev-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.ev-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.ev-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.ev-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.ev-modal-secured-qty-lock-btn--open .ev-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.ev-modal-secured-qty-lock-btn--locked .ev-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.ev-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.ev-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.ev-modal-batch-assignment-modal .ev-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.ev-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.ev-modal-batch-assignment-modal .ev-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.ev-modal-batch-assignment-modal .ev-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.ev-modal-batch-assignment-modal.ev-modal-batch-assignment-modal--display .ev-modal-item-text-info {
  background-color: #F2F8EA;
}

.ev-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ev-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.ev-modal-batch-assignment-info-group {
  flex: 1 1;
}

.ev-modal-batch-assignment-info-group .ev-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ev-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.ev-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ev-modal-batch-assignment-table-section .ev-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ev-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.ev-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.ev-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ev-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ev-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.ev-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.ev-modal-batch-assignment-table th,
.ev-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.ev-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.ev-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.ev-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ev-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.ev-modal-batch-assignment-table tbody td:has(.ev-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.ev-modal-batch-assignment-table tbody td:has(.ev-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.ev-modal-batch-assignment-table tbody td:nth-child(2),
.ev-modal-batch-assignment-table tbody td:nth-child(3),
.ev-modal-batch-assignment-table tbody td:nth-child(4),
.ev-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.ev-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.ev-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ev-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ev-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.ev-modal-batch-assignment-modal--display .ev-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.ev-modal-batch-assignment-modal--display .ev-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.ev-modal-batch-assignment-modal--display .ev-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-batch-assignment-modal--display .ev-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.ev-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.ev-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.ev-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.ev-modal-batch-assignment-table .ev-modal-placeholder-text {
  color: #CCCCCC;
}

.ev-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.ev-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.ev-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.ev-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.ev-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.ev-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.ev-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.ev-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.ev-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ev-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.ev-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.ev-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.ev-modal-batch-assignment-table td.batch-table-frozen-batch,
table.ev-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.ev-modal-batch-assignment-table th.batch-table-frozen-batch,
table.ev-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.ev-modal-batch-assignment-table th.batch-table-frozen-assign,
table.ev-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.ev-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.ev-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.ev-modal-item-text-info {
  margin-bottom: 1rem;
}

.ev-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ev-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.ev-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ev-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.ev-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.ev-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ev-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.ev-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-item-text-modal .modal-header .modal-title,
.ev-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.ev-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.ev-modal-item-text-label--display {
  color: #333333;
}

.ev-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.ev-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.ev-modal-item-text-modal .ev-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.ev-modal-item-text-modal .ev-modal-item-text-textarea-wrapper .ev-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.ev-modal-item-text-textarea {
  overflow-y: auto !important;
}

.ev-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.ev-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ev-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.ev-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.ev-modal-add-do-item-modal .ev-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.ev-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ev-modal-add-do-item-dropdown-section .ev-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.ev-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ev-modal-add-do-item-table-section .ev-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.ev-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.ev-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.ev-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.ev-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.ev-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.ev-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ev-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.ev-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.ev-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.ev-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.ev-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.ev-modal-detail-table td:first-child .ev-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.ev-modal-detail-table td:first-child .ev-modal-partner-type-input {
  padding-left: 0.625rem;
}

.ev-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ev-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ev-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ev-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ev-modal-partner-type-dropdown--display .ev-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ev-modal-partner-type-dropdown-content--display .ev-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-partner-type-dropdown-content--display .ev-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.ev-modal-partner-type-dropdown-content--display .ev-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-partner-type-dropdown-content--display .ev-modal-partner-type-check {
  color: #999999 !important;
}

.ev-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ev-modal-partner-type-dropdown--display .ev-modal-partner-type-value {
  color: #555555;
}

.ev-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ev-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.ev-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.ev-modal-partner-type-item--placeholder {
  cursor: default;
}

.ev-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.ev-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ev-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.ev-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.ev-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.ev-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.ev-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.ev-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.ev-modal-partner-id-dropdown--display .ev-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-code,
.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-name,
.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-separator {
  color: #999999 !important;
}

.ev-modal-partner-id-dropdown-content--display .ev-modal-partner-id-check {
  color: #999999 !important;
}

.ev-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.ev-modal-partner-id-dropdown--display .ev-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.ev-modal-detail-table tbody tr:hover .ev-modal-partner-type-dropdown--display .ev-modal-partner-type-input-wrapper,
.ev-modal-detail-table tbody tr:hover .ev-modal-partner-id-dropdown--display .ev-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .ev-modal-partner-type-dropdown--display .ev-modal-partner-type-input-wrapper,
.ev-modal-detail-table-container--external .ev-modal-detail-table tbody tr:hover .ev-modal-partner-id-dropdown--display .ev-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.ev-modal-partner-type-arrow--external {
  visibility: hidden;
}

.ev-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.ev-modal-partner-type-dropdown--external .ev-modal-partner-type-value {
  color: #555555;
}

.ev-modal-partner-id-dropdown--external .ev-modal-partner-id-value {
  color: #555555;
}

.ev-modal-detail-table-container--external .ev-modal-detail-table td.ev-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.ev-modal-partner-header-section--external .ev-modal-form-input--display {
  color: #555555;
}

.ev-modal-detail-table td.ev-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.ev-modal-tab-content--display .ev-modal-detail-table td.ev-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.ev-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.ev-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.ev-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.ev-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.ev-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.ev-modal-partner-id-item--placeholder {
  cursor: default;
}

.ev-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.ev-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.ev-modal-partner-id-separator {
  color: #999999;
}

.ev-modal-partner-id-name {
  color: #666666;
}

.ev-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ev-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.ev-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.ev-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ev-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ev-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ev-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ev-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ev-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ev-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.ev-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.ev-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.ev-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.ev-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.ev-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ev-modal-data-flow-stage--completed .ev-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ev-modal-data-flow-stage--active .ev-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ev-modal-data-flow-stage--completed .ev-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-data-flow-stage--active .ev-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.ev-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.ev-modal-data-flow-stage--completed .ev-modal-data-flow-stage-label {
  color: #138B4C;
}

.ev-modal-data-flow-stage--active .ev-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.ev-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.ev-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.ev-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.ev-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.ev-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.ev-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ev-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.ev-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ev-modal-data-flow-document--active .ev-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.ev-modal-data-flow-document-fold {
  display: none;
}

.ev-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.ev-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.ev-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.ev-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.ev-modal-data-flow-document-icon-wrapper--active .ev-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.ev-modal-data-flow-document--active .ev-modal-data-flow-document-title {
  color: #138B4C;
}

.ev-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.ev-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.ev-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.ev-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.ev-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.ev-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.ev-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.ev-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.ev-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ev-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.ev-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.ev-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.ev-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.ev-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.ev-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.ev-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.ev-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.ev-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.ev-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.ev-modal-terms-area-button .ev-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.ev-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.ev-modal-tab-content--display .ev-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.ev-modal-tab-content--display .ev-modal-terms-area-button .ev-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.ev-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.ev-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.ev-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.ev-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ev-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ev-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ev-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.ev-modal-data-flow-2-row {
  display: flex;
}

.ev-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ev-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.ev-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.ev-modal-data-flow-2-row--content .ev-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.ev-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.ev-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.ev-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ev-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-label {
  color: #333333;
}

.ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage-label {
  color: #999999;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--completed .ev-modal-data-flow-2-stage-label {
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--active .ev-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.ev-modal-tab-content--display .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.ev-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.ev-modal-data-flow-2-row--content .ev-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.ev-modal-data-flow-2-row--content .ev-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ev-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ev-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.ev-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.ev-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.ev-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ev-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.ev-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.ev-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ev-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-title,
.ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-title {
  color: #333333;
}

.ev-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.ev-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ev-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.ev-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-title {
  color: #888888;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-title,
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-title {
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--completed .ev-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--active .ev-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-date {
  color: #333333;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.ev-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.ev-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.ev-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.ev-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.ev-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.ev-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.ev-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.ev-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.ev-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ev-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.ev-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.ev-modal-data-flow-2-grid--external .ev-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.ev-modal-data-flow-2-grid--external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell {
  border-bottom: none;
}

.ev-modal-data-flow-2-grid--external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.ev-modal-data-flow-2-grid--external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell--label::after {
  display: none;
}

.ev-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.ev-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.ev-modal-data-flow-2-row--content-top .ev-modal-data-flow-2-document--buyer.ev-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.ev-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.ev-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ev-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ev-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.ev-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.ev-modal-data-flow-2-stage--external-completed .ev-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.ev-modal-data-flow-2-stage--external-active .ev-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.ev-modal-data-flow-2-stage--external-completed .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.ev-modal-data-flow-2-stage--external-active .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.ev-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.ev-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ev-modal-data-flow-2-document--external .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.ev-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.ev-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.ev-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.ev-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.ev-modal-data-flow-2-document--external .ev-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.ev-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.ev-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ev-modal-data-flow-2-document--supplier .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.ev-modal-data-flow-2-document--supplier .ev-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.ev-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.ev-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.ev-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.ev-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier .ev-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier .ev-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-completed .ev-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--supplier-active .ev-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.ev-modal-tab-content--data-flow-2-external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.ev-modal-tab-content--data-flow-2-external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external .ev-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external .ev-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.ev-modal-tab-content--display.ev-modal-tab-content--data-flow-2-external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.ev-modal-tab-content--display.ev-modal-tab-content--data-flow-2-external .ev-modal-data-flow-2-row--header .ev-modal-data-flow-2-cell:has(.ev-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-circle,
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external-completed .ev-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external-active .ev-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-icon,
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external-completed .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external-active .ev-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-stage--external .ev-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-completed .ev-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.ev-modal-tab-content--display .ev-modal-data-flow-2-document--external-active .ev-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.ev-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.ev-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.ev-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ev-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.ev-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.ev-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ev-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ev-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ev-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.ev-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.ev-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.ev-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.ev-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.ev-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ev-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.ev-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.ev-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.ev-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.ev-modal-milestone-date-value {
  color: #666666;
}

.ev-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.ev-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.ev-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.ev-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.ev-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.ev-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ev-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.ev-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ev-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.ev-modal-activity-item--display .ev-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.ev-modal-calendar-milestones .ev-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.ev-modal-calendar-milestones .ev-modal-activity-user:hover {
  text-decoration: none;
}

.ev-modal-calendar-milestones .ev-modal-activity-item--display .ev-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.ev-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.ev-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ev-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.ev-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.ev-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-calendar-nav-btn:hover .ev-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.ev-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.ev-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.ev-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.ev-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.ev-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.ev-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.ev-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.ev-modal-calendar-view-mode-btn--active + .ev-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.ev-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ev-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ev-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.ev-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.ev-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ev-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ev-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.ev-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.ev-modal-calendar-grid-cell:nth-child(7n-1),
.ev-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.ev-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.ev-modal-calendar-grid-day-name:nth-child(6),
.ev-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.ev-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ev-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ev-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.ev-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.ev-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.ev-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.ev-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.ev-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.ev-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ev-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.ev-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ev-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.ev-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.ev-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.ev-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ev-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.ev-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.ev-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.ev-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ev-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.ev-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ev-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ev-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.ev-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.ev-modal-calendar-weekly-day-column:nth-child(6),
.ev-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.ev-modal-calendar-weekly-day-header:nth-child(6),
.ev-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.ev-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ev-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ev-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ev-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ev-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ev-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ev-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ev-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.ev-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ev-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.ev-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.ev-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.ev-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.ev-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.ev-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.ev-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.ev-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.ev-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.ev-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ev-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.ev-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.ev-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ev-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.ev-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.ev-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-view {
  border-color: #D0D0D0;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-view-mode-btn--active + .ev-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-milestones-header {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-view-title {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-grid-day-name {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-grid-cell-day {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-weekly-day-name {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-weekly-day-date {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-weekly-event-title {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-daily-header {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-daily-hour-label {
  color: #666666;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-daily-event-title {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar .ev-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.ev-modal-calendar-milestones-header--external {
  color: #333333;
}

.ev-modal-calendar-nav-btn--external .ev-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ev-modal-calendar-nav-btn--external:hover .ev-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.ev-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.ev-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.ev-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ev-modal-calendar-view-mode-btn--active-external + .ev-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ev-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.ev-modal-tab-content--calendar-external .ev-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.ev-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.ev-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.ev-modal-activity-type--external {
  color: #333333;
}

.ev-modal-activity-user--external {
  color: #E67E22;
}

.ev-modal-activity-user--external:hover {
  color: #D35400;
}

.ev-modal-calendar-milestones .ev-modal-activity-user--external {
  color: #E67E22;
}

.ev-modal-calendar-milestones .ev-modal-activity-user--external:hover {
  color: #D35400;
}

.ev-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.ev-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ev-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ev-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ev-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.ev-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ev-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ev-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ev-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.ev-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.ev-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.ev-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.ev-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-milestones-header--external {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-view-mode-btn--active-external + .ev-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-calendar-nav-btn--external .ev-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-activity-type--external {
  color: #333333;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-activity-user--external {
  color: #E67E22;
}

.ev-modal-tab-content--display.ev-modal-tab-content--calendar-external .ev-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.ev-modal-input--error,
.ev-modal-form-input.ev-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.ev-modal-dropdown--error .ev-modal-delivery-type-input,
.ev-modal-dropdown--error .ev-modal-organization-input,
.ev-modal-dropdown--error .ev-modal-sales-structure-input,
.ev-modal-dropdown--error .ev-modal-sales-channel-input,
.ev-modal-dropdown--error .ev-modal-sales-unit-input,
.ev-modal-dropdown--error .ev-modal-territory-input,
.ev-modal-dropdown--error .ev-modal-sales-office-input,
.ev-modal-dropdown--error .ev-modal-sold-to-party-input,
.ev-modal-dropdown--error .ev-modal-deliver-to-party-input,
.ev-modal-dropdown--error .ev-modal-attention-to-deliver-input,
.ev-modal-dropdown--error .ev-modal-incoterm-input,
.ev-modal-dropdown--error .ev-modal-delivery-point-input,
.ev-modal-dropdown--error .ev-modal-shipping-point-input,
.ev-modal-dropdown--error .ev-modal-sales-order-input,
.ev-modal-dropdown--error .ev-modal-sales-team-input,
.ev-modal-dropdown--error .ev-modal-sales-person-input,
.ev-modal-dropdown--error .ev-modal-delivery-priority-input,
.ev-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.ev-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.ev-modal-date-picker-wrapper.ev-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.ev-modal-custom-dropdown {
  position: relative;
}

.ev-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.ev-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.ev-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.ev-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-check {
  color: #999999 !important;
}

.ev-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.ev-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.ev-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.ev-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.ev-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ev-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.ev-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.ev-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.ev-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ev-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ev-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.ev-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.ev-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ev-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.ev-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.ev-modal-setting-form-label--display {
  color: #333333;
}

.ev-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.ev-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-setting-dropdown--active .ev-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.ev-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.ev-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.ev-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.ev-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.ev-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.ev-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.ev-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-setting-dropdown-icon.ev-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.ev-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ev-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.ev-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.ev-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.ev-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.ev-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.ev-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.ev-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.ev-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.ev-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.ev-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.ev-modal-setting-dropdown-item-separator {
  color: #999999;
}

.ev-modal-setting-dropdown-item-name {
  color: #333333;
}

.ev-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.ev-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.ev-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.ev-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.ev-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.ev-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.ev-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.ev-modal-setting-tab-content--print .ev-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ev-modal-setting-tab-content--print .ev-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ev-modal-setting-tab-content--print .ev-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.ev-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.ev-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ev-modal-setting-table thead tr {
  height: 2.25rem;
}

.ev-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.ev-modal-setting-table tbody tr {
  height: 2.25rem;
}

.ev-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.ev-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.ev-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.ev-modal-setting-table--display thead th:nth-child(2),
.ev-modal-setting-table--display thead th:nth-child(3),
.ev-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.ev-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.ev-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.ev-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.ev-modal-setting-table--transfer.ev-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.ev-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.ev-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ev-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.ev-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.ev-modal-setting-table--transfer:not(.ev-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.ev-modal-setting-table--transfer:not(.ev-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.ev-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.ev-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.ev-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.ev-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.ev-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.ev-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.ev-modal-tab-content--display .ev-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.ev-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.ev-modal-tab-content--display .ev-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.ev-modal-attribute-header-section--external .ev-modal-form-input:focus {
  border-color: #F5B041;
}

.ev-modal-attribute-header-section--external .ev-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.ev-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.ev-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.ev-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.ev-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.ev-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ev-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ev-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.ev-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.ev-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.ev-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ev-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ev-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.ev-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.ev-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ev-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ev-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.ev-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.ev-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.ev-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.ev-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.ev-modal-available-qty-tree-level {
  position: relative;
}

.ev-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.ev-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ev-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.ev-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.ev-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.ev-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.ev-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.ev-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.ev-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.ev-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.ev-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.ev-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.ev-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ev-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.ev-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.ev-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.ev-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.ev-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.ev-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.ev-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.ev-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.ev-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.ev-modal-available-qty-tree-batch-header .ev-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.ev-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.ev-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.ev-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.ev-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.ev-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.ev-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.ev-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.ev-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.ev-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.ev-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.ev-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.ev-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.ev-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.ev-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.ev-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.ev-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.ev-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.ev-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.ev-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.ev-modal-activity-type--clickable.ev-modal-activity-type--display:hover {
  color: #138B4C;
}

.ev-modal-activity-type--clickable.ev-modal-activity-type--external:hover {
  color: #E67E00;
}

.ev-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ev-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.ev-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ev-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.ev-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.ev-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.ev-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ev-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to ev-modal-form-label */
.ev-modal-activity-detail-content .ev-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.ev-modal-activity-detail-modal .ev-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.ev-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.ev-modal-activity-detail-modal .ev-modal-tabs--display .ev-modal-tab {
  color: #333333;
}

.ev-modal-activity-detail-modal .ev-modal-tabs--display .ev-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.ev-modal-activity-detail-modal .ev-modal-tabs--external.ev-modal-tabs--display .ev-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.ev-modal-activity-detail-tab-content--general .ev-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.ev-modal-activity-detail-content .ev-modal-milestone-status {
  margin: 0;
}

.ev-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.ev-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.ev-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ev-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.ev-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.ev-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.ev-modal-activity-detail-pic-chat-wrapper:hover .ev-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.ev-modal-activity-detail-pic-chat-wrapper:hover .ev-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.ev-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.ev-modal-activity-detail-pic--clickable:hover .ev-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.ev-modal-activity-detail-content--external .ev-modal-activity-detail-pic {
  color: #E67E22;
}

.ev-modal-activity-detail-content--external .ev-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.ev-modal-activity-detail-content--external .ev-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.ev-modal-activity-detail-content--external .ev-modal-activity-detail-pic--clickable:hover .ev-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.ev-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.ev-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.ev-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.ev-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.ev-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.ev-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.ev-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ev-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.ev-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.ev-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.ev-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.ev-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ev-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.ev-modal-activity-detail-content--external .ev-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.ev-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.ev-modal-activity-detail-content--external .ev-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.ev-modal-activity-detail-content--external .ev-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.ev-modal-activity-detail-content--external .ev-modal-activity-detail-document-name {
  color: #E67E22;
}

.ev-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.ev-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.ev-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.ev-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.ev-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.ev-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.ev-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ev-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.ev-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.ev-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.ev-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.ev-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.ev-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.ev-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.ev-modal-activity-detail-tab-content--general {
  padding: 0;
}

.ev-modal-activity-detail-tab-content--general .ev-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.ev-modal-activity-detail-tab-content--general > div:not(.ev-modal-item-text-info) {
  padding: 0 1.5rem;
}

.ev-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.ev-modal-activity-detail-tab-content--attachment,
.ev-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.ev-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.ev-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.ev-modal-activity-detail-tab-content--attachment .ev-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.ev-modal-activity-detail-tab-content--attachment .ev-modal-batch-assignment-table-section > .ev-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ev-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.ev-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.ev-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.ev-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.ev-modal-activity-detail-content--external .ev-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.ev-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.ev-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.ev-modal-activity-detail-content--external .ev-modal-item-text-info {
  background-color: #FEF5E7;
}

.ev-modal-activity-detail-content--external .ev-modal-task-notes-section {
  background-color: #FEF5E7;
}

.ev-modal-task-notes-section .ev-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ev-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.ev-modal-task-notes-textarea.ev-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.ev-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.ev-modal-task-chat-section > .ev-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.ev-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.ev-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ev-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ev-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ev-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.ev-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.ev-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.ev-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.ev-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.ev-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.ev-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.ev-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.ev-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.ev-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.ev-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.ev-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.ev-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.ev-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.ev-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.ev-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.ev-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.ev-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.ev-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.ev-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.ev-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.ev-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.ev-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.ev-modal-activity-detail-content--external .ev-modal-task-chat-avatar {
  background-color: #F5B041;
}

.ev-modal-activity-detail-content--external .ev-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.ev-modal-activity-detail-content--external .ev-modal-task-chat-reply-btn {
  color: #E67E22;
}

.ev-modal-activity-detail-content--external .ev-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.ev-modal-dropdown--display .ev-modal-dropdown-item,
.ev-modal-dropdown--display [class*="-item"],
.ev-modal-tags-dropdown--display .ev-modal-tags-dropdown-item,
.ev-modal-baseline-date-dropdown--display .ev-modal-baseline-date-item,
.ev-modal-reference-type-dropdown--display .ev-modal-reference-type-item,
.ev-modal-delivery-priority-dropdown--display .ev-modal-delivery-priority-item,
.ev-modal-organization-dropdown--display .ev-modal-organization-item,
.ev-modal-sales-structure-dropdown--display .ev-modal-sales-structure-item,
.ev-modal-delivery-type-dropdown--display .ev-modal-delivery-type-item,
.ev-modal-sales-channel-dropdown--display .ev-modal-sales-channel-item,
.ev-modal-sales-unit-dropdown--display .ev-modal-sales-unit-item,
.ev-modal-sold-to-party-dropdown--display .ev-modal-sold-to-party-item,
.ev-modal-deliver-to-party-dropdown--display .ev-modal-deliver-to-party-item,
.ev-modal-attention-to-deliver-dropdown--display .ev-modal-attention-to-deliver-item,
.ev-modal-incoterm-dropdown--display .ev-modal-incoterm-item,
.ev-modal-delivery-point-dropdown--display .ev-modal-delivery-point-item,
.ev-modal-shipping-point-dropdown--display .ev-modal-shipping-point-item,
.ev-modal-sales-order-dropdown--display .ev-modal-sales-order-item,
.ev-modal-sales-person-dropdown--display .ev-modal-sales-person-item,
.ev-modal-sales-team-dropdown--display .ev-modal-sales-team-item,
.ev-modal-territory-dropdown--display .ev-modal-territory-item,
.ev-modal-sales-office-dropdown--display .ev-modal-sales-office-item,
.ev-modal-status-dropdown--display .ev-modal-status-item,
.ev-modal-handling-product-dropdown--display .ev-modal-handling-product-item,
.ev-modal-child-uom-dropdown--display .ev-modal-child-uom-item,
.ev-modal-partner-type-dropdown--display .ev-modal-partner-type-item,
.ev-modal-partner-id-dropdown--display .ev-modal-partner-id-item,
.ev-modal-custom-dropdown--display .ev-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.ev-modal-dropdown--display .ev-modal-dropdown-item:hover,
.ev-modal-dropdown--display [class*="-item"]:hover,
.ev-modal-tags-dropdown--display .ev-modal-tags-dropdown-item:hover,
.ev-modal-baseline-date-dropdown--display .ev-modal-baseline-date-item:hover,
.ev-modal-reference-type-dropdown--display .ev-modal-reference-type-item:hover,
.ev-modal-delivery-priority-dropdown--display .ev-modal-delivery-priority-item:hover,
.ev-modal-organization-dropdown--display .ev-modal-organization-item:hover,
.ev-modal-sales-structure-dropdown--display .ev-modal-sales-structure-item:hover,
.ev-modal-delivery-type-dropdown--display .ev-modal-delivery-type-item:hover,
.ev-modal-sales-channel-dropdown--display .ev-modal-sales-channel-item:hover,
.ev-modal-sales-unit-dropdown--display .ev-modal-sales-unit-item:hover,
.ev-modal-sold-to-party-dropdown--display .ev-modal-sold-to-party-item:hover,
.ev-modal-deliver-to-party-dropdown--display .ev-modal-deliver-to-party-item:hover,
.ev-modal-attention-to-deliver-dropdown--display .ev-modal-attention-to-deliver-item:hover,
.ev-modal-incoterm-dropdown--display .ev-modal-incoterm-item:hover,
.ev-modal-delivery-point-dropdown--display .ev-modal-delivery-point-item:hover,
.ev-modal-shipping-point-dropdown--display .ev-modal-shipping-point-item:hover,
.ev-modal-sales-order-dropdown--display .ev-modal-sales-order-item:hover,
.ev-modal-sales-person-dropdown--display .ev-modal-sales-person-item:hover,
.ev-modal-sales-team-dropdown--display .ev-modal-sales-team-item:hover,
.ev-modal-territory-dropdown--display .ev-modal-territory-item:hover,
.ev-modal-sales-office-dropdown--display .ev-modal-sales-office-item:hover,
.ev-modal-status-dropdown--display .ev-modal-status-item:hover,
.ev-modal-handling-product-dropdown--display .ev-modal-handling-product-item:hover,
.ev-modal-child-uom-dropdown--display .ev-modal-child-uom-item:hover,
.ev-modal-partner-type-dropdown--display .ev-modal-partner-type-item:hover,
.ev-modal-partner-id-dropdown--display .ev-modal-partner-id-item:hover,
.ev-modal-custom-dropdown--display .ev-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.ev-modal-dropdown--display [class*="-item--selected"],
.ev-modal-tags-dropdown--display .ev-modal-tags-dropdown-item--selected,
.ev-modal-baseline-date-dropdown--display .ev-modal-baseline-date-item--selected,
.ev-modal-reference-type-dropdown--display .ev-modal-reference-type-item--selected,
.ev-modal-delivery-priority-dropdown--display .ev-modal-delivery-priority-item--selected,
.ev-modal-organization-dropdown--display .ev-modal-organization-item--selected,
.ev-modal-sales-structure-dropdown--display .ev-modal-sales-structure-item--selected,
.ev-modal-delivery-type-dropdown--display .ev-modal-delivery-type-item--selected,
.ev-modal-sales-channel-dropdown--display .ev-modal-sales-channel-item--selected,
.ev-modal-sales-unit-dropdown--display .ev-modal-sales-unit-item--selected,
.ev-modal-sold-to-party-dropdown--display .ev-modal-sold-to-party-item--selected,
.ev-modal-deliver-to-party-dropdown--display .ev-modal-deliver-to-party-item--selected,
.ev-modal-attention-to-deliver-dropdown--display .ev-modal-attention-to-deliver-item--selected,
.ev-modal-incoterm-dropdown--display .ev-modal-incoterm-item--selected,
.ev-modal-delivery-point-dropdown--display .ev-modal-delivery-point-item--selected,
.ev-modal-shipping-point-dropdown--display .ev-modal-shipping-point-item--selected,
.ev-modal-sales-order-dropdown--display .ev-modal-sales-order-item--selected,
.ev-modal-sales-person-dropdown--display .ev-modal-sales-person-item--selected,
.ev-modal-sales-team-dropdown--display .ev-modal-sales-team-item--selected,
.ev-modal-territory-dropdown--display .ev-modal-territory-item--selected,
.ev-modal-sales-office-dropdown--display .ev-modal-sales-office-item--selected,
.ev-modal-status-dropdown--display .ev-modal-status-item--selected,
.ev-modal-handling-product-dropdown--display .ev-modal-handling-product-item--selected,
.ev-modal-child-uom-dropdown--display .ev-modal-child-uom-item--selected,
.ev-modal-partner-type-dropdown--display .ev-modal-partner-type-item--selected,
.ev-modal-partner-id-dropdown--display .ev-modal-partner-id-item--selected,
.ev-modal-custom-dropdown--display .ev-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.ev-modal-dropdown--display [class*="-check"],
.ev-modal-dropdown--display .ev-modal-dropdown-check,
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.ev-modal-dropdown--display [class*="-item-code"],
.ev-modal-dropdown--display [class*="-item-name"],
.ev-modal-dropdown--display [class*="-item-content"],
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-code,
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-name,
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-item,
.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.ev-modal-sold-to-party-dropdown-content--display .ev-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.ev-modal-tags-dropdown--display .ev-modal-tags-item,
.ev-modal-tags-dropdown--display .ev-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-tags-dropdown--display .ev-modal-tags-item:hover {
  background-color: transparent !important;
}

.ev-modal-tags-dropdown--display .ev-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ev-modal-tags-dropdown--display .ev-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item,
.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.ev-modal-custom-dropdown-list--display .ev-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Opportunity/Opportunity.css ===== */
/* Opportunity Wrapper - prevent page scroll */
.opportunity-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Opportunity Container */
.opportunity-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.opportunity-header {
  margin-bottom: 0;
}

.opportunity-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Opportunity Control - Exact copy of third-nav-control */
.opportunity-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.opportunity-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.opportunity-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.opportunity-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.opportunity-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.opportunity-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.opportunity-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.opportunity-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.opportunity-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.opportunity-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.opportunity-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.opportunity-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.opportunity-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.opportunity-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.opportunity-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.opportunity-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.opportunity-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.opportunity-layout-dropdown-item:last-child {
  border-bottom: none;
}

.opportunity-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.opportunity-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.opportunity-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.opportunity-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.opportunity-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.opportunity-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.opportunity-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.opportunity-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opportunity-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.opportunity-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.opportunity-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.opportunity-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.opportunity-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.opportunity-filter-parameter-wrapper {
  position: relative;
}

.opportunity-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.opportunity-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.opportunity-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.opportunity-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opportunity-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.opportunity-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.opportunity-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.opportunity-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.opportunity-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.opportunity-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.opportunity-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.opportunity-filter-close:hover {
  background-color: #f0f0f0;
}

.opportunity-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.opportunity-filter-group {
  margin-bottom: 1rem;
}

.opportunity-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.opportunity-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.opportunity-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.opportunity-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.opportunity-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.opportunity-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.opportunity-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.opportunity-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.opportunity-filter-org-container {
  flex: 1 1;
  position: relative;
}

.opportunity-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.opportunity-filter-org-input:hover {
  border-color: #C2DE54;
}

.opportunity-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.opportunity-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.opportunity-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.opportunity-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.opportunity-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.opportunity-filter-tag-remove:hover {
  color: #000;
}

.opportunity-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.opportunity-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.opportunity-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.opportunity-filter-org-item:hover {
  background-color: #f5f5f5;
}

.opportunity-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.opportunity-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.opportunity-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.opportunity-filter-org-code {
  font-weight: 600;
  color: #333;
}

.opportunity-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.opportunity-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.opportunity-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.opportunity-type-dropdown-item:last-child {
  border-bottom: none;
}

.opportunity-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.opportunity-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.opportunity-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.opportunity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Opportunity Table */
.opportunity-table {
  animation: opportunityFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes opportunityFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .opportunity-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .opportunity-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .opportunity-type-dropdown {
    min-width: 11.25rem;
  }

  .opportunity-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Opportunity/OpportunityModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.op-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.op-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.op-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.op-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.op-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.op-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.op-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.op-modal-pov-button--external.op-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.op-modal-pov-button--external .op-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-pov-button--external .op-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.op-modal-pov-caret--open {
  transform: rotate(180deg);
}

.op-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.op-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.op-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.op-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.op-modal-pov-dropdown-item span {
  flex: 1 1;
}

.op-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.op-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.op-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.op-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.op-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.op-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.op-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.op-modal-tabs--display .op-modal-tab {
  color: #666666;
}

.op-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.op-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.op-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.op-modal-tabs--display .op-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.op-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.op-modal-tabs--external .op-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.op-modal-tabs--external.op-modal-tabs--display .op-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.op-modal-tabs--external .op-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.op-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.op-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.op-modal-action-button span {
  white-space: nowrap;
}

.op-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.op-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.op-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.op-modal-action-button--disabled .op-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.op-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.op-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.op-modal-left-area--full .op-modal-back-button {
  transition: width 300ms ease;
}

.op-modal-left-area--full .op-modal-back-button:hover {
  width: 3.5rem;
}

.op-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.op-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.op-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.op-modal-content--item {
  padding-bottom: 1rem;
}

.op-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.op-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.op-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.op-modal-attachment-table-container .op-modal-detail-table thead,
.op-modal-attachment-table-container .op-modal-attachment-table thead {
  box-shadow: none !important;
}

.op-modal-attachment-table-container .op-modal-detail-table tr,
.op-modal-attachment-table-container .op-modal-attachment-table tr {
  box-shadow: none !important;
}

.op-modal-attachment-table-container .op-modal-detail-table tbody tr:last-child,
.op-modal-attachment-table-container .op-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.op-modal-attachment-table-container .op-modal-detail-table tbody tr:last-child td,
.op-modal-attachment-table-container .op-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.op-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.op-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.op-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.op-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.op-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.op-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.op-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.op-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.op-modal-attachment-filename--external {
  color: #E67E22;
}

.op-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.op-modal-tab-content--display .op-modal-attachment-filename--external {
  color: #E67E22;
}

.op-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.op-modal-attachment-size {
  color: #666666;
}

.op-modal-attachment-date {
  color: #666666;
}

.op-modal-attachment-uploadedby {
  color: #333333;
}

.op-modal-tab-content--display .op-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.op-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.op-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.op-modal-attachment-browse-btn:focus {
  outline: none;
}

.op-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.op-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.op-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-attachment-browse-btn--disabled .op-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.op-modal-tab-content--display .op-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.op-modal-tab-content--display .op-modal-attachment-filename.op-modal-attachment-filename--external {
  color: #E67E22;
}

.op-modal-tab-content--display .op-modal-attachment-type {
  color: #666666;
}

.op-modal-tab-content--display .op-modal-attachment-size {
  color: #666666;
}

.op-modal-tab-content--display .op-modal-attachment-date {
  color: #666666;
}

.op-modal-tab-content--display .op-modal-attachment-uploadedby {
  color: #333333;
}

.op-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.op-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.op-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.op-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.op-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.op-modal-tab-content--display .op-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.op-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.op-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.op-modal-tab-content--display .op-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.op-modal-basic-section--external .op-modal-form-input:focus {
  border-color: #F5B041;
}

.op-modal-basic-section--external .op-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.op-modal-tab-content--external .op-modal-form-input:focus,
.op-modal-tab-content--external .op-modal-form-textarea:focus,
.op-modal-tab-content--external .op-modal-custom-dropdown-input:focus,
.op-modal-tab-content--external .op-modal-date-input:focus,
.op-modal-tab-content--external .op-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.op-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.op-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.op-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.op-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.op-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.op-modal-tab-content--display .op-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.op-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.op-modal-tab-content--display .op-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.op-modal-partner-header-section--external .op-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.op-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.op-modal-tab-content--display .op-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.op-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.op-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.op-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.op-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.op-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.op-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.op-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.op-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.op-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.op-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.op-modal-chat-section {
  padding: 1.5rem 0;
}

.op-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.op-modal-chat-header h3 {
  margin: 0;
}

.op-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.op-modal-chat-new-thread .op-modal-form-textarea {
  min-height: 5rem;
}

.op-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.op-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.op-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.op-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.op-modal-chat-message--main {
  background-color: #FAFAFA;
}

.op-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.op-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.op-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.op-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.op-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.op-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.op-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.op-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.op-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.op-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-tab-content--display .op-modal-chat-user-name {
  color: #333333 !important;
}

.op-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.op-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.op-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.op-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.op-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.op-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.op-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.op-modal-chat-reply-btn:hover .op-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.op-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.op-modal-chat-replies .op-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.op-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.op-modal-chat-reply-input .op-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.op-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.op-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.op-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.op-modal-tab-content--display .op-modal-chat-thread {
  border-color: #E5E5E5;
}

.op-modal-tab-content--display .op-modal-chat-message--main {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display .op-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.op-modal-tab-content--display .op-modal-chat-user-position {
  background-color: #E8F5E9;
}

.op-modal-tab-content--display .op-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.op-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.op-modal-tab-content--display .op-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.op-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.op-modal-notes-header-section--external .op-modal-form-textarea:focus {
  border-color: #F5B041;
}

.op-modal-chat-section--external .op-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.op-modal-chat-avatar--external {
  background-color: #F5B041;
}

.op-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.op-modal-tab-content--display .op-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-thread {
  border-color: #E5E5E5;
}

.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-message--main {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-user-name {
  color: #333333 !important;
}

.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-user-position {
  background-color: #FDE8D0;
}

.op-modal-tab-content--display.op-modal-tab-content--external .op-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.op-modal-chat-reply-btn--external {
  color: #E67E22;
}

.op-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.op-modal-chat-reply-btn--external .op-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.op-modal-chat-reply-btn--external:hover .op-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.op-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.op-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.op-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.op-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.op-modal-chat-textarea-wrapper {
  position: relative;
}

.op-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.op-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.op-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.op-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.op-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.op-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.op-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.op-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.op-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.op-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.op-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.op-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.op-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.op-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.op-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.op-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.op-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.op-modal-tab-content--display .op-modal-table-empty-state-title {
  color: #666666;
}

.op-modal-tab-content--display .op-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.op-modal-partner-header-section + .op-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.op-modal-partner-header-section + .op-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.op-modal-partner-header-section + .op-modal-item-content-section .op-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.op-modal-partner-header-section + .op-modal-item-content-section .op-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.op-modal-partner-header-section + .op-modal-item-content-section .op-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.op-modal-partner-header-section + .op-modal-item-content-section .op-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.op-modal-partner-header-section + .op-modal-item-content-section .op-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.op-modal-partner-table-container .op-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.op-modal-partner-table-container .op-modal-partner-table th:last-child,
.op-modal-partner-table-container .op-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.op-modal-detail-table-container--external.op-modal-partner-table-container .op-modal-partner-table th:last-child,
.op-modal-detail-table-container--external.op-modal-partner-table-container .op-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.op-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.op-modal-item-header-section .op-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-tab-content--display .op-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.op-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.op-modal-tab-content--display .op-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.op-modal-item-header-section--external .op-modal-form-input:focus {
  border-color: #F5B041;
}

.op-modal-item-header-section--external .op-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.op-modal-detail-subtabs--external .op-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.op-modal-detail-subtabs--external .op-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.op-modal-detail-subtabs--external .op-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.op-modal-tab-content--display .op-modal-detail-subtabs--external .op-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.op-modal-tab-content--display .op-modal-detail-subtabs--external .op-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.op-modal-tab-content.op-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.op-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.op-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.op-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.op-modal-item-table-wrapper .op-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.op-modal-item-table-wrapper .op-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.op-modal-item-table-wrapper--terms .op-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.op-modal-tab-content--external.op-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.op-modal-tab-content--external .op-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.op-modal-tab-content--external .op-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.op-modal-tab-content--external .op-modal-item-table-wrapper--terms .op-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.op-modal-tab-content--external .op-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.op-modal-item-table-wrapper--terms .op-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.op-modal-item-table-wrapper--terms .op-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-modal-item-table-wrapper--terms .op-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.op-modal-item-table-wrapper--terms .op-modal-detail-table tr {
  height: auto;
}

.op-modal-item-table-wrapper--terms .op-modal-detail-table-container .op-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.op-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.op-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.op-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.op-modal-volume-input-group .op-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.op-modal-volume-input-group .op-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.op-modal-volume-input-group .op-modal-sla-input-wrapper .op-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.op-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.op-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.op-modal-volume-uom-list--display .op-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-volume-uom-list--display .op-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.op-modal-volume-uom-list--display .op-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-volume-uom-list--display .op-modal-volume-uom-check {
  color: #999999 !important;
}

.op-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.op-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.op-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.op-modal-volume-uom-dropdown--display .op-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.op-modal-volume-uom-dropdown--display .op-modal-volume-uom-item:hover {
  background-color: transparent;
}

.op-modal-volume-uom-dropdown--display .op-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.op-modal-volume-uom-dropdown--display .op-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.op-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.op-modal-weight-input-group .op-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.op-modal-weight-input-group .op-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.op-modal-weight-input-group .op-modal-sla-input-wrapper .op-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.op-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.op-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-weight-uom-input::placeholder {
  color: #999999;
}

.op-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.op-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.op-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.op-modal-weight-uom-dropdown--display .op-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.op-modal-weight-uom-dropdown--display .op-modal-weight-uom-item:hover {
  background-color: transparent;
}

.op-modal-weight-uom-dropdown--display .op-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.op-modal-weight-uom-dropdown--display .op-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.op-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.op-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.op-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.op-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.op-modal-form-input--display ~ .op-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.op-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.op-modal-form-input--display {
  cursor: default;
}

.op-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.op-modal-form-label--display {
  color: #333333 !important;
}

.op-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.op-modal-form-label--display .op-modal-required {
  color: #FF4D4F;
}

.op-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.op-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.op-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.op-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.op-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.op-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.op-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.op-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.op-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.op-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.op-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.op-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.op-modal-sla-spinner-btn:disabled .op-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.op-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sla-spinner-btn:hover .op-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.op-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.op-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.op-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.op-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.op-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.op-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.op-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.op-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.op-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.op-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.op-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.op-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.op-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.op-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.op-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.op-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.op-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.op-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.op-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.op-modal-stage-dropdown-input--display .op-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.op-modal-stage-dropdown-input--display .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.op-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.op-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.op-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.op-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.op-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.op-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.op-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.op-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.op-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.op-modal-accordion-header--display {
  color: #333333;
}

.op-modal-accordion-header--display.op-modal-accordion-header--active {
  color: #333333;
}

.op-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.op-modal-accordion-header--display .op-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.op-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.op-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.op-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.op-modal-stage-main-title--display {
  color: #138B4C;
}

.op-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-stage-title--display {
  color: #333333;
}

.op-modal-stage-current {
  margin-bottom: 1.875rem;
}

.op-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.op-modal-stage-label--display {
  color: #666666;
}

.op-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-stage-subtitle--display {
  color: #333333;
}

.op-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.op-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.op-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.op-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.op-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.op-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.op-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.op-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.op-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.op-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.op-modal-download-button:active {
  background-color: #E0E0E0;
}

.op-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-download-button--display .op-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.op-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.op-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.op-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.op-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.op-modal-timeline-item--display .op-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.op-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.op-modal-timeline-badge--inactive .op-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.op-modal-timeline-item--display .op-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.op-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.op-modal-timeline-item--display .op-modal-timeline-line {
  background-color: #138B4C;
}

.op-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.op-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.op-modal-timeline-status--display {
  color: #333333;
}

.op-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.op-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.op-modal-timeline-date--display {
  color: #666666;
}

.op-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.op-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.op-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.op-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.op-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.op-modal-timeline-document--display {
  color: #138B4C;
}

.op-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.op-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.op-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.op-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.op-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.op-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.op-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.op-modal-activity-item--display .op-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.op-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.op-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.op-modal-activity-item--display .op-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.op-modal-activity-item--display .op-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.op-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.op-modal-activity-item--display .op-modal-activity-line {
  background-color: #138B4C;
}

.op-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.op-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.op-modal-activity-type--display {
  color: #333333;
}

.op-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.op-modal-activity-header--display {
  color: #666666;
}

.op-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.op-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.op-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.op-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.op-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.op-modal-activity-change--display .op-modal-activity-field {
  color: #333333;
}

.op-modal-activity-change--display .op-modal-activity-new {
  color: #138B4C;
}

.op-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.op-modal-activity-date--display {
  color: #666666;
}

.op-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.op-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.op-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.op-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.op-modal-activity-more--display {
  color: #138B4C;
}

.op-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-activity-more--display .op-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.op-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.op-modal-reference-table thead {
  background-color: #F9F9F9;
}

.op-modal-tab-content--display .op-modal-reference-table thead {
  background-color: #FAFAFA;
}

.op-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.op-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.op-modal-tab-content--display .op-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.op-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.op-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.op-modal-tab-content--display .op-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.op-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.op-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.op-modal-detail-subtab:hover {
  color: #138B4C;
}

.op-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.op-modal-tab-content--display .op-modal-detail-subtab {
  color: #666666;
}

.op-modal-tab-content--display .op-modal-detail-subtab:hover {
  color: #138B4C;
}

.op-modal-tab-content--display .op-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.op-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.op-modal-tab-content.op-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.op-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.op-modal-detail-delivery-wrapper .op-modal-form-label {
  flex-shrink: 0;
}

.op-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.op-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.op-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.op-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.op-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.op-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.op-modal-detail-table-container .op-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.op-modal-detail-table-container .op-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-modal-detail-table-container .op-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.op-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.op-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.op-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.op-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.op-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.op-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.op-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-detail-table th,
.op-modal-tab-content--display .op-modal-packaging-table th,
.op-modal-tab-content--display .op-modal-partner-table th,
.op-modal-tab-content--display .op-modal-attachment-table th {
  color: #333333;
}

.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-detail-table td,
.op-modal-tab-content--display .op-modal-packaging-table td,
.op-modal-tab-content--display .op-modal-partner-table td,
.op-modal-tab-content--display .op-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-description,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-text,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-available-qty,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-batch,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-serial,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-sales-order,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-so-item,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-pr-item,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-package-no,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-product-type,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-product-group,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-product-category,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .detail-table-product-variant,
.op-modal-tab-content--display .op-modal-detail-table tbody tr:hover .op-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-description,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-text,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-available-qty,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-batch,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-serial,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-sales-order,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-so-item,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-pr-item,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-package-no,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-type,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-group,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-category,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-variant,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .op-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.op-modal-detail-table-container .op-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.op-modal-detail-table-container .op-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.op-modal-detail-table-container .op-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.op-modal-detail-table-container .op-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.op-modal-detail-table-container .op-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.op-modal-detail-table-container--external .op-modal-detail-table td {
  color: #555555 !important;
}

.op-modal-detail-table-container .op-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.op-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.op-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.op-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.op-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.op-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.op-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.op-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.op-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.op-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.op-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.op-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.op-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.op-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.op-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.op-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.op-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.op-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.op-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.op-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.op-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.op-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.op-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.op-modal-detail-table tbody tr:hover .detail-table-description,
.op-modal-detail-table tbody tr:hover .detail-table-text,
.op-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.op-modal-detail-table tbody tr:hover .detail-table-available-qty,
.op-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.op-modal-detail-table tbody tr:hover .detail-table-batch,
.op-modal-detail-table tbody tr:hover .detail-table-serial,
.op-modal-detail-table tbody tr:hover .detail-table-sales-order,
.op-modal-detail-table tbody tr:hover .detail-table-so-item,
.op-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.op-modal-detail-table tbody tr:hover .detail-table-pr-item,
.op-modal-detail-table tbody tr:hover .detail-table-package-no,
.op-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.op-modal-detail-table tbody tr:hover .detail-table-product-type,
.op-modal-detail-table tbody tr:hover .detail-table-product-group,
.op-modal-detail-table tbody tr:hover .detail-table-product-category,
.op-modal-detail-table tbody tr:hover .detail-table-product-variant,
.op-modal-detail-table tbody tr:hover .op-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-description,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-text,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-available-qty,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-batch,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-serial,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-sales-order,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-so-item,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-pr-item,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-package-no,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-type,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-group,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-category,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .detail-table-product-variant,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .op-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.op-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.op-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.op-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.op-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.op-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.op-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.op-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.op-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.op-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.op-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.op-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.op-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.op-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.op-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.op-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.op-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.op-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.op-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.op-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.op-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.op-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.op-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.op-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.op-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.op-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.op-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.op-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.op-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.op-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.op-modal-add-item-btn--disabled .op-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.op-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.op-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.op-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.op-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.op-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.op-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.op-modal-sales-order-table-container .op-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.op-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.op-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.op-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.op-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.op-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.op-modal-table-input:focus {
  outline: none;
}

.op-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.op-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.op-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.op-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.op-modal-tags-container {
  position: relative;
  width: 100%;
}

.op-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.op-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.op-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.op-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.op-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.op-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.op-modal-tags-input--display .op-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.op-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.op-modal-tag-remove:hover {
  color: #333333;
}

.op-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.op-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.op-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.op-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.op-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.op-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.op-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.op-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.op-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.op-modal-status-container {
  position: relative;
  width: 100%;
}

.op-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.op-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.op-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.op-modal-status-placeholder {
  color: #999999;
}

.op-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.op-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.op-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.op-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-status-item:hover {
  background-color: #F5F5F5;
}

.op-modal-status-item--selected {
  background-color: #E8F5E9;
}

.op-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.op-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.op-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.op-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.op-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.op-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.op-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.op-modal-status-input--display .op-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.op-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.op-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.op-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.op-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.op-modal-stage-dropdown-placeholder {
  color: #999999;
}

.op-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.op-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.op-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.op-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.op-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.op-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.op-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.op-modal-stage--created .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.op-modal-stage--approved .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.op-modal-stage--processed .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.op-modal-stage--picked .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.op-modal-stage--packed .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.op-modal-stage--planned .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.op-modal-stage--loaded .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.op-modal-stage--issued .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.op-modal-stage--departed .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.op-modal-stage--arrived .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.op-modal-stage--unloaded .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.op-modal-stage--delivered .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.op-modal-stage--confirmed .op-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.op-modal-stage--billed .op-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.op-modal-stage-dropdown-input .op-modal-stage,
.op-modal-stage-dropdown-item .op-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.op-modal-baseline-date-dropdown {
  position: relative;
}

.op-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.op-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.op-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.op-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.op-modal-reference-type-dropdown {
  position: relative;
}

.op-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.op-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.op-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.op-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.op-modal-delivery-priority-dropdown {
  position: relative;
}

.op-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.op-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.op-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.op-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.op-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.op-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.op-modal-delivery-priority-separator {
  color: #666666;
}

.op-modal-delivery-priority-name {
  color: #333333;
}

.op-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.op-modal-organization-dropdown {
  position: relative;
}

.op-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.op-modal-organization-dropdown-content--display .op-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-organization-dropdown-content--display .op-modal-organization-item:hover {
  background-color: transparent !important;
}

.op-modal-organization-dropdown-content--display .op-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-organization-dropdown-content--display .op-modal-organization-code,
.op-modal-organization-dropdown-content--display .op-modal-organization-name,
.op-modal-organization-dropdown-content--display .op-modal-organization-separator {
  color: #999999 !important;
}

.op-modal-organization-dropdown-content--display .op-modal-organization-check {
  color: #999999 !important;
}

.op-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.op-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.op-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-organization-separator {
  color: #999999;
}

.op-modal-organization-name {
  color: #333333;
}

.op-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.op-modal-sales-structure-dropdown {
  position: relative;
}

.op-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.op-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.op-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.op-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.op-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-sales-structure-separator {
  color: #999999;
}

.op-modal-sales-structure-name {
  color: #333333;
}

.op-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.op-modal-delivery-type-dropdown {
  position: relative;
}

.op-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.op-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.op-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.op-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.op-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.op-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.op-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.op-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.op-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.op-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-delivery-type-separator {
  color: #999999;
}

.op-modal-delivery-type-description {
  color: #333333;
}

.op-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.op-modal-content::-webkit-scrollbar,
.op-modal-stage-content::-webkit-scrollbar,


.op-modal-content::-webkit-scrollbar-track,
.op-modal-stage-content::-webkit-scrollbar-track,


.op-modal-content::-webkit-scrollbar-thumb,
.op-modal-stage-content::-webkit-scrollbar-thumb,


.op-modal-content::-webkit-scrollbar-thumb:hover,
.op-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.op-modal-sales-channel-dropdown {
  position: relative;
}

.op-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.op-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.op-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.op-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-sales-channel-separator {
  color: #999999;
}

.op-modal-sales-channel-name {
  color: #333333;
}

.op-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.op-modal-sales-unit-dropdown {
  position: relative;
}

.op-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.op-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.op-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.op-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-sales-unit-separator {
  color: #999999;
}

.op-modal-sales-unit-name {
  color: #333333;
}

.op-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.op-modal-organization-item--placeholder,
.op-modal-sales-structure-item--placeholder,
.op-modal-sales-channel-item--placeholder,
.op-modal-sales-unit-item--placeholder,
.op-modal-territory-item--placeholder,
.op-modal-sales-office-item--placeholder,
.op-modal-sold-to-party-item--placeholder,
.op-modal-deliver-to-party-item--placeholder,
.op-modal-attention-to-deliver-item--placeholder,
.op-modal-incoterm-item--placeholder,
.op-modal-delivery-point-item--placeholder,
.op-modal-shipping-point-item--placeholder,
.op-modal-sales-order-item--placeholder,
.op-modal-sales-team-item--placeholder,
.op-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.op-modal-organization-item--placeholder:hover,
.op-modal-sales-structure-item--placeholder:hover,
.op-modal-sales-channel-item--placeholder:hover,
.op-modal-sales-unit-item--placeholder:hover,
.op-modal-territory-item--placeholder:hover,
.op-modal-sales-office-item--placeholder:hover,
.op-modal-sold-to-party-item--placeholder:hover,
.op-modal-deliver-to-party-item--placeholder:hover,
.op-modal-attention-to-deliver-item--placeholder:hover,
.op-modal-incoterm-item--placeholder:hover,
.op-modal-delivery-point-item--placeholder:hover,
.op-modal-shipping-point-item--placeholder:hover,
.op-modal-sales-order-item--placeholder:hover,
.op-modal-sales-team-item--placeholder:hover,
.op-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.op-modal-sold-to-party-dropdown {
  position: relative;
}

.op-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-sold-to-party-input:focus,
.op-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.op-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.op-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.op-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.op-modal-sold-to-party-separator {
  color: #999999;
}

.op-modal-sold-to-party-name {
  color: #333333;
}

.op-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.op-modal-deliver-to-party-dropdown {
  position: relative;
}

.op-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.op-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.op-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.op-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.op-modal-deliver-to-party-separator {
  color: #999999;
}

.op-modal-deliver-to-party-name {
  color: #333333;
}

.op-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.op-modal-attention-to-deliver-dropdown {
  position: relative;
}
.op-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.op-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.op-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.op-modal-attention-to-deliver-separator {
  color: #999999;
}
.op-modal-attention-to-deliver-name {
  color: #333333;
}
.op-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.op-modal-incoterm-dropdown {
  position: relative;
}
.op-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.op-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.op-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.op-modal-incoterm-separator {
  color: #999999;
}
.op-modal-incoterm-name {
  color: #333333;
}
.op-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.op-modal-delivery-point-dropdown {
  position: relative;
}
.op-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.op-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.op-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.op-modal-delivery-point-separator {
  color: #999999;
}
.op-modal-delivery-point-name {
  color: #333333;
}
.op-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.op-modal-shipping-point-dropdown {
  position: relative;
}
.op-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.op-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.op-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.op-modal-shipping-point-separator {
  color: #999999;
}
.op-modal-shipping-point-name {
  color: #333333;
}
.op-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.op-modal-sales-order-dropdown {
  position: relative;
}
.op-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.op-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.op-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.op-modal-sales-order-separator {
  color: #999999;
}
.op-modal-sales-order-name {
  color: #333333;
}
.op-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.op-modal-date-picker {
  position: relative;
}
.op-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.op-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.op-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.op-modal-date-input::-webkit-datetime-edit-text,
.op-modal-date-input::-webkit-datetime-edit-month-field,
.op-modal-date-input::-webkit-datetime-edit-day-field,
.op-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.op-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.op-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.op-modal-sales-person-dropdown {
  position: relative;
}
.op-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.op-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.op-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.op-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.op-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.op-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.op-modal-sales-person-separator {
  color: #999999;
}
.op-modal-sales-person-name {
  color: #333333;
}
.op-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.op-modal-sales-team-dropdown {
  position: relative;
}
.op-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.op-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.op-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.op-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.op-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.op-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.op-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.op-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.op-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.op-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.op-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.op-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.op-modal-sales-team-separator {
  color: #999999;
}
.op-modal-sales-team-name {
  color: #333333;
}
.op-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.op-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.op-modal-territory-dropdown {
  position: relative;
}

.op-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.op-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.op-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.op-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-territory-separator {
  color: #999999;
}

.op-modal-territory-name {
  color: #333333;
}

.op-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.op-modal-sales-office-dropdown {
  position: relative;
}

.op-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.op-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.op-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.op-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.op-modal-sales-office-separator {
  color: #999999;
}

.op-modal-sales-office-name {
  color: #333333;
}

.op-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.op-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.op-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.op-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.op-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.op-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.op-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.op-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-table-dropdown-input:focus {
  outline: none;
}

.op-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.op-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.op-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.op-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.op-modal-delivery-type-list::-webkit-scrollbar,
.op-modal-stage-dropdown-list::-webkit-scrollbar,
.op-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.op-modal-delivery-type-list::-webkit-scrollbar-track,
.op-modal-stage-dropdown-list::-webkit-scrollbar-track,
.op-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-delivery-type-list::-webkit-scrollbar-thumb,
.op-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.op-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.op-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.op-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.op-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.op-modal-wrapper,
.op-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.op-modal-wrapper,
.op-modal-wrapper *,
.op-modal-content,
.op-modal-data-flow-2-container,
.op-modal-data-flow-container,
.op-modal-calendar-container,
.op-modal-calendar-milestones-list,
.op-modal-calendar-view,
.op-modal-calendar-yearly,
.op-modal-calendar-monthly,
.op-modal-calendar-weekly,
.op-modal-calendar-weekly-body,
.op-modal-calendar-daily,
.op-modal-calendar-daily-timeline,
.op-modal-calendar-grid,
.op-modal-calendar-grid-body,
.op-modal-detail-table-container,
.op-modal-item-table-wrapper,
.op-modal-attachment-table-container,
.op-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.op-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.op-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.op-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.op-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.op-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.op-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.op-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.op-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.op-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-tab-content--display .op-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.op-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-tab-content--display .op-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.op-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.op-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.op-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) {
  font-weight: 600;
}

.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) .op-modal-packaging-input,
.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) .op-modal-packaging-input--display,
.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) .op-modal-handling-product-input,
.op-modal-packaging-row--unassigned:not(.op-modal-packaging-row--expanded) .op-modal-handling-product-input--display {
  font-weight: 600;
}

.op-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.op-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row td.op-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row td.op-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row td.op-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td.op-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded td.op-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row--expanded:hover td.op-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display,
.op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display,
.op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.op-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.op-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-tab-content--display .op-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.op-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-tab-content--display .op-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.op-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.op-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.op-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.op-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.op-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.op-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.op-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.op-modal-packaging-detail-table th:first-child,
.op-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.op-modal-packaging-detail-table th:nth-child(2),
.op-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.op-modal-packaging-detail-table th:nth-child(3),
.op-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.op-modal-packaging-detail-table td:nth-child(4),
.op-modal-packaging-detail-table td:nth-child(6),
.op-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.op-modal-packaging-detail-table td:nth-child(5),
.op-modal-packaging-detail-table td:nth-child(7),
.op-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.op-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.op-modal-tab-content--display .op-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display .op-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.op-modal-tab-content--display .op-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.op-modal-tab-content--display .op-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.op-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.op-modal-packaging-table td:last-child,
.op-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.op-modal-packaging-table td:last-child .op-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.op-modal-detail-table-container--external .op-modal-packaging-table th:last-child,
.op-modal-detail-table-container--external .op-modal-packaging-table td.op-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.op-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.op-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.op-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.op-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.op-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.op-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.op-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.op-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.op-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.op-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.op-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.op-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.op-modal-packaging-child-table tr {
  border: none !important;
}

.op-modal-packaging-child-table thead,
.op-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.op-modal-packaging-child-table th:first-child,
.op-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.op-modal-packaging-child-table th:nth-child(2),
.op-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.op-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.op-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.op-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.op-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.op-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.op-modal-packaging-child-table th:nth-child(3),
.op-modal-packaging-child-table td:nth-child(3),
.op-modal-packaging-child-table th:nth-child(4),
.op-modal-packaging-child-table td:nth-child(4),
.op-modal-packaging-child-table th:nth-child(5),
.op-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.op-modal-packaging-child-table th:nth-child(6),
.op-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.op-modal-packaging-child-table th:nth-child(7),
.op-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.op-modal-detail-table-container--external .op-modal-packaging-child-table th:last-child,
.op-modal-detail-table-container--external .op-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.op-modal-packaging-child-table td:last-child .op-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.op-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.op-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.op-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.op-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.op-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row {
  transition: none !important;
}

.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display,
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display:focus,
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display,
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display:focus,
.op-modal-tab-content--display .op-modal-detail-table-container .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display:focus,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display:focus,
.op-modal-tab-content--display .op-modal-detail-table-container--external .op-modal-packaging-table tbody tr.op-modal-packaging-row:hover td .op-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.op-modal-detail-table-container--external .op-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.op-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.op-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.op-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.op-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.op-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.op-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.op-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.op-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.op-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.op-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.op-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.op-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.op-modal-detail-table-container--external .op-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.op-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-item--display {
  color: #999999 !important;
}

.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-code,
.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-name,
.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-separator {
  color: #999999 !important;
}

.op-modal-handling-product-dropdown-content--display .op-modal-handling-product-check {
  color: #999999 !important;
}

.op-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.op-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.op-modal-handling-product-dropdown-content--narrow .op-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.op-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.op-modal-packaging-detail-table .op-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.op-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.op-modal-detail-table-container--dropdown-open .op-modal-detail-table {
  overflow: visible;
}

.op-modal-detail-table-container--dropdown-open .op-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.op-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.op-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.op-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.op-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.op-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.op-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.op-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.op-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.op-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.op-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.op-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.op-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.op-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.op-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.op-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.op-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.op-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.op-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.op-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.op-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.op-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.op-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.op-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-item:hover {
  background-color: transparent;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-item--placeholder {
  display: none;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-code,
.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-name,
.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-separator {
  color: #555555;
}

.op-modal-handling-product-dropdown-content--view-only .op-modal-handling-product-check {
  color: #888888;
}

.op-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.op-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.op-modal-handling-product-separator {
  color: #999999;
}

.op-modal-handling-product-name {
  color: #333333;
}

.op-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.op-modal-handling-product-item--placeholder {
  cursor: default;
}

.op-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.op-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.op-modal-detail-table td:has(.op-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.op-modal-detail-table td .op-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.op-modal-detail-table td .op-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.op-modal-detail-table td .op-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.op-modal-detail-table td .op-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.op-modal-detail-table td .op-modal-handling-product-input--display,
.op-modal-detail-table td .op-modal-handling-product-input--display:focus,
.op-modal-detail-table td .op-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.op-modal-detail-table-container .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display,
.op-modal-detail-table-container .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display:focus,
.op-modal-detail-table-container .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display:focus,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover td .op-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.op-modal-detail-table td .op-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.op-modal-detail-table td .op-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.op-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.op-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.op-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.op-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-table-text-icon-btn--filled:not(.op-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.op-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.op-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.op-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.op-modal-table-text-icon-btn--display.op-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.op-modal-table-text-icon-btn--display.op-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-table-text-icon-btn--display.op-modal-table-text-icon-btn--external.op-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.op-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.op-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.op-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.op-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.op-modal-serial-assignment-btn {
  width: 10.625rem;
}

.op-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.op-modal-batch-assignment-btn--filled .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.op-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.op-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.op-modal-batch-assignment-btn--display .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-batch-assignment-btn--display.op-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.op-modal-batch-assignment-btn--display.op-modal-batch-assignment-btn--filled .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.op-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.op-modal-secured-qty-btn.op-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.op-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.op-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.op-modal-secured-qty-btn--grey .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.op-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.op-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.op-modal-batch-assignment-btn--partial .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.op-modal-batch-assignment-btn--display.op-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.op-modal-batch-assignment-btn--display.op-modal-batch-assignment-btn--partial .op-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.op-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.op-modal-secured-qty-modal .op-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.op-modal-secured-qty-modal .op-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.op-modal-secured-qty-modal.op-modal-batch-assignment-modal--display .op-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.op-modal-secured-qty-modal .op-modal-item-text-content {
  overflow-x: hidden;
}

.op-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.op-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.op-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.op-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.op-modal-batch-assignment-modal--display .op-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.op-modal-batch-assignment-modal--display .op-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.op-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.op-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.op-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.op-modal-secured-qty-lock-btn--open .op-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.op-modal-secured-qty-lock-btn--locked .op-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.op-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.op-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.op-modal-batch-assignment-modal .op-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.op-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.op-modal-batch-assignment-modal .op-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.op-modal-batch-assignment-modal .op-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.op-modal-batch-assignment-modal.op-modal-batch-assignment-modal--display .op-modal-item-text-info {
  background-color: #F2F8EA;
}

.op-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.op-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.op-modal-batch-assignment-info-group {
  flex: 1 1;
}

.op-modal-batch-assignment-info-group .op-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.op-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.op-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.op-modal-batch-assignment-table-section .op-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.op-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.op-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.op-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.op-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.op-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.op-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.op-modal-batch-assignment-table th,
.op-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.op-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.op-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.op-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.op-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.op-modal-batch-assignment-table tbody td:has(.op-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.op-modal-batch-assignment-table tbody td:has(.op-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.op-modal-batch-assignment-table tbody td:nth-child(2),
.op-modal-batch-assignment-table tbody td:nth-child(3),
.op-modal-batch-assignment-table tbody td:nth-child(4),
.op-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.op-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.op-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.op-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.op-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.op-modal-batch-assignment-modal--display .op-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.op-modal-batch-assignment-modal--display .op-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.op-modal-batch-assignment-modal--display .op-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-batch-assignment-modal--display .op-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.op-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.op-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.op-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.op-modal-batch-assignment-table .op-modal-placeholder-text {
  color: #CCCCCC;
}

.op-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.op-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.op-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.op-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.op-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.op-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.op-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.op-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.op-modal-batch-assignment-table th.batch-table-frozen-batch,
table.op-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.op-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.op-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.op-modal-batch-assignment-table td.batch-table-frozen-batch,
table.op-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.op-modal-batch-assignment-table th.batch-table-frozen-batch,
table.op-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.op-modal-batch-assignment-table th.batch-table-frozen-assign,
table.op-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.op-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.op-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.op-modal-item-text-info {
  margin-bottom: 1rem;
}

.op-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.op-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.op-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.op-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.op-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.op-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.op-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.op-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-item-text-modal .modal-header .modal-title,
.op-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.op-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.op-modal-item-text-label--display {
  color: #333333;
}

.op-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.op-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.op-modal-item-text-modal .op-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.op-modal-item-text-modal .op-modal-item-text-textarea-wrapper .op-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.op-modal-item-text-textarea {
  overflow-y: auto !important;
}

.op-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.op-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.op-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.op-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.op-modal-add-do-item-modal .op-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.op-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.op-modal-add-do-item-dropdown-section .op-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.op-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.op-modal-add-do-item-table-section .op-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.op-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.op-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.op-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.op-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.op-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.op-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.op-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.op-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.op-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.op-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.op-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.op-modal-detail-table td:first-child .op-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.op-modal-detail-table td:first-child .op-modal-partner-type-input {
  padding-left: 0.625rem;
}

.op-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.op-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.op-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.op-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.op-modal-partner-type-dropdown--display .op-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.op-modal-partner-type-dropdown-content--display .op-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-partner-type-dropdown-content--display .op-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.op-modal-partner-type-dropdown-content--display .op-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-partner-type-dropdown-content--display .op-modal-partner-type-check {
  color: #999999 !important;
}

.op-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.op-modal-partner-type-dropdown--display .op-modal-partner-type-value {
  color: #555555;
}

.op-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.op-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.op-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.op-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.op-modal-partner-type-item--placeholder {
  cursor: default;
}

.op-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.op-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.op-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.op-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.op-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.op-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.op-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.op-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.op-modal-partner-id-dropdown--display .op-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-code,
.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-name,
.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-separator {
  color: #999999 !important;
}

.op-modal-partner-id-dropdown-content--display .op-modal-partner-id-check {
  color: #999999 !important;
}

.op-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.op-modal-partner-id-dropdown--display .op-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.op-modal-detail-table tbody tr:hover .op-modal-partner-type-dropdown--display .op-modal-partner-type-input-wrapper,
.op-modal-detail-table tbody tr:hover .op-modal-partner-id-dropdown--display .op-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .op-modal-partner-type-dropdown--display .op-modal-partner-type-input-wrapper,
.op-modal-detail-table-container--external .op-modal-detail-table tbody tr:hover .op-modal-partner-id-dropdown--display .op-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.op-modal-partner-type-arrow--external {
  visibility: hidden;
}

.op-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.op-modal-partner-type-dropdown--external .op-modal-partner-type-value {
  color: #555555;
}

.op-modal-partner-id-dropdown--external .op-modal-partner-id-value {
  color: #555555;
}

.op-modal-detail-table-container--external .op-modal-detail-table td.op-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.op-modal-partner-header-section--external .op-modal-form-input--display {
  color: #555555;
}

.op-modal-detail-table td.op-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.op-modal-tab-content--display .op-modal-detail-table td.op-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.op-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.op-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.op-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.op-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.op-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.op-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.op-modal-partner-id-item--placeholder {
  cursor: default;
}

.op-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.op-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.op-modal-partner-id-separator {
  color: #999999;
}

.op-modal-partner-id-name {
  color: #666666;
}

.op-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.op-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.op-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.op-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.op-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.op-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.op-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.op-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.op-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.op-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.op-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.op-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.op-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.op-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.op-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.op-modal-data-flow-stage--completed .op-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.op-modal-data-flow-stage--active .op-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.op-modal-data-flow-stage--completed .op-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-data-flow-stage--active .op-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.op-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.op-modal-data-flow-stage--completed .op-modal-data-flow-stage-label {
  color: #138B4C;
}

.op-modal-data-flow-stage--active .op-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.op-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.op-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.op-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.op-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.op-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.op-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.op-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.op-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.op-modal-data-flow-document--active .op-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.op-modal-data-flow-document-fold {
  display: none;
}

.op-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.op-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.op-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.op-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.op-modal-data-flow-document-icon-wrapper--active .op-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.op-modal-data-flow-document--active .op-modal-data-flow-document-title {
  color: #138B4C;
}

.op-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.op-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.op-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.op-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.op-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.op-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.op-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.op-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.op-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.op-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.op-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.op-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.op-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.op-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.op-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.op-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.op-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.op-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.op-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.op-modal-terms-area-button .op-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.op-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.op-modal-tab-content--display .op-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.op-modal-tab-content--display .op-modal-terms-area-button .op-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.op-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.op-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.op-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.op-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.op-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.op-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.op-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.op-modal-data-flow-2-row {
  display: flex;
}

.op-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.op-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.op-modal-data-flow-2-row--content .op-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.op-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.op-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.op-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.op-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-label {
  color: #333333;
}

.op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.op-modal-tab-content--display .op-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage-label {
  color: #999999;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--completed .op-modal-data-flow-2-stage-label {
  color: #333333;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--active .op-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.op-modal-tab-content--display .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.op-modal-tab-content--display .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.op-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.op-modal-data-flow-2-row--content .op-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.op-modal-data-flow-2-row--content .op-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.op-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.op-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.op-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.op-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.op-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.op-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.op-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.op-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.op-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-title,
.op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-title {
  color: #333333;
}

.op-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.op-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.op-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.op-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.op-modal-tab-content--display .op-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-title {
  color: #888888;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-title,
.op-modal-tab-content--display .op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-title {
  color: #333333;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--completed .op-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--active .op-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-date {
  color: #333333;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.op-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.op-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.op-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.op-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.op-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.op-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.op-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.op-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.op-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.op-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.op-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.op-modal-data-flow-2-grid--external .op-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.op-modal-data-flow-2-grid--external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell {
  border-bottom: none;
}

.op-modal-data-flow-2-grid--external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.op-modal-data-flow-2-grid--external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell--label::after {
  display: none;
}

.op-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.op-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.op-modal-data-flow-2-row--content-top .op-modal-data-flow-2-document--buyer.op-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.op-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.op-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.op-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.op-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.op-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.op-modal-data-flow-2-stage--external-completed .op-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.op-modal-data-flow-2-stage--external-active .op-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.op-modal-data-flow-2-stage--external-completed .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.op-modal-data-flow-2-stage--external-active .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.op-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.op-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.op-modal-data-flow-2-document--external .op-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.op-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.op-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.op-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.op-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.op-modal-data-flow-2-document--external .op-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.op-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.op-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.op-modal-data-flow-2-document--supplier .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.op-modal-data-flow-2-document--supplier .op-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.op-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.op-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.op-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.op-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier .op-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier .op-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-completed .op-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--supplier-active .op-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.op-modal-tab-content--data-flow-2-external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.op-modal-tab-content--data-flow-2-external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external .op-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external .op-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external .op-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.op-modal-tab-content--display.op-modal-tab-content--data-flow-2-external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.op-modal-tab-content--display.op-modal-tab-content--data-flow-2-external .op-modal-data-flow-2-row--header .op-modal-data-flow-2-cell:has(.op-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-circle,
.op-modal-tab-content--display .op-modal-data-flow-2-stage--external-completed .op-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--external-active .op-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-icon,
.op-modal-tab-content--display .op-modal-data-flow-2-stage--external-completed .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-stage--external-active .op-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-stage--external .op-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.op-modal-tab-content--display .op-modal-data-flow-2-document--external-completed .op-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.op-modal-tab-content--display .op-modal-data-flow-2-document--external-active .op-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.op-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.op-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.op-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.op-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.op-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.op-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.op-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.op-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.op-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.op-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.op-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.op-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.op-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.op-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.op-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.op-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.op-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.op-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.op-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.op-modal-milestone-date-value {
  color: #666666;
}

.op-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.op-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.op-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.op-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.op-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.op-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.op-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.op-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.op-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.op-modal-activity-item--display .op-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.op-modal-calendar-milestones .op-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.op-modal-calendar-milestones .op-modal-activity-user:hover {
  text-decoration: none;
}

.op-modal-calendar-milestones .op-modal-activity-item--display .op-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.op-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.op-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.op-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.op-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.op-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-calendar-nav-btn:hover .op-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.op-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.op-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.op-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.op-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.op-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.op-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.op-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.op-modal-calendar-view-mode-btn--active + .op-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.op-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.op-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.op-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.op-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.op-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.op-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.op-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.op-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.op-modal-calendar-grid-cell:nth-child(7n-1),
.op-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.op-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.op-modal-calendar-grid-day-name:nth-child(6),
.op-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.op-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.op-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.op-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.op-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.op-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.op-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.op-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.op-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.op-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.op-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.op-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.op-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.op-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.op-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.op-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.op-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.op-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.op-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.op-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.op-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.op-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.op-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.op-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.op-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.op-modal-calendar-weekly-day-column:nth-child(6),
.op-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.op-modal-calendar-weekly-day-header:nth-child(6),
.op-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.op-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.op-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.op-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.op-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.op-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.op-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.op-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.op-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.op-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.op-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.op-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.op-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.op-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.op-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.op-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.op-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.op-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.op-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.op-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.op-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.op-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.op-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.op-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.op-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.op-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-view {
  border-color: #D0D0D0;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-view-mode-btn--active + .op-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-milestones-header {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-view-title {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-grid-day-name {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-grid-cell-day {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-weekly-day-name {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-weekly-day-date {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-weekly-event-title {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-daily-header {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-daily-hour-label {
  color: #666666;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-daily-event-title {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar .op-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.op-modal-calendar-milestones-header--external {
  color: #333333;
}

.op-modal-calendar-nav-btn--external .op-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.op-modal-calendar-nav-btn--external:hover .op-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.op-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.op-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.op-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.op-modal-calendar-view-mode-btn--active-external + .op-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.op-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.op-modal-tab-content--calendar-external .op-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.op-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.op-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.op-modal-activity-type--external {
  color: #333333;
}

.op-modal-activity-user--external {
  color: #E67E22;
}

.op-modal-activity-user--external:hover {
  color: #D35400;
}

.op-modal-calendar-milestones .op-modal-activity-user--external {
  color: #E67E22;
}

.op-modal-calendar-milestones .op-modal-activity-user--external:hover {
  color: #D35400;
}

.op-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.op-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.op-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.op-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.op-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.op-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.op-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.op-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.op-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.op-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.op-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.op-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.op-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-milestones-header--external {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-view-mode-btn--active-external + .op-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-calendar-nav-btn--external .op-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-activity-type--external {
  color: #333333;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-activity-user--external {
  color: #E67E22;
}

.op-modal-tab-content--display.op-modal-tab-content--calendar-external .op-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.op-modal-input--error,
.op-modal-form-input.op-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.op-modal-dropdown--error .op-modal-delivery-type-input,
.op-modal-dropdown--error .op-modal-organization-input,
.op-modal-dropdown--error .op-modal-sales-structure-input,
.op-modal-dropdown--error .op-modal-sales-channel-input,
.op-modal-dropdown--error .op-modal-sales-unit-input,
.op-modal-dropdown--error .op-modal-territory-input,
.op-modal-dropdown--error .op-modal-sales-office-input,
.op-modal-dropdown--error .op-modal-sold-to-party-input,
.op-modal-dropdown--error .op-modal-deliver-to-party-input,
.op-modal-dropdown--error .op-modal-attention-to-deliver-input,
.op-modal-dropdown--error .op-modal-incoterm-input,
.op-modal-dropdown--error .op-modal-delivery-point-input,
.op-modal-dropdown--error .op-modal-shipping-point-input,
.op-modal-dropdown--error .op-modal-sales-order-input,
.op-modal-dropdown--error .op-modal-sales-team-input,
.op-modal-dropdown--error .op-modal-sales-person-input,
.op-modal-dropdown--error .op-modal-delivery-priority-input,
.op-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.op-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.op-modal-date-picker-wrapper.op-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.op-modal-custom-dropdown {
  position: relative;
}

.op-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.op-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.op-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.op-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.op-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-check {
  color: #999999 !important;
}

.op-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.op-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.op-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.op-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.op-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.op-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.op-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.op-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.op-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.op-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.op-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.op-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.op-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.op-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.op-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.op-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.op-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.op-modal-setting-form-label--display {
  color: #333333;
}

.op-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.op-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-setting-dropdown--active .op-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.op-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.op-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.op-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.op-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.op-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.op-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.op-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-setting-dropdown-icon.op-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.op-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.op-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.op-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.op-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.op-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.op-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.op-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.op-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.op-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.op-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.op-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.op-modal-setting-dropdown-item-separator {
  color: #999999;
}

.op-modal-setting-dropdown-item-name {
  color: #333333;
}

.op-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.op-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.op-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.op-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.op-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.op-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.op-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.op-modal-setting-tab-content--print .op-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.op-modal-setting-tab-content--print .op-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-modal-setting-tab-content--print .op-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.op-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.op-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.op-modal-setting-table thead tr {
  height: 2.25rem;
}

.op-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.op-modal-setting-table tbody tr {
  height: 2.25rem;
}

.op-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.op-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.op-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.op-modal-setting-table--display thead th:nth-child(2),
.op-modal-setting-table--display thead th:nth-child(3),
.op-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.op-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.op-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.op-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.op-modal-setting-table--transfer.op-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.op-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.op-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.op-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.op-modal-setting-table--transfer:not(.op-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.op-modal-setting-table--transfer:not(.op-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.op-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.op-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.op-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.op-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.op-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.op-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.op-modal-tab-content--display .op-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.op-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.op-modal-tab-content--display .op-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.op-modal-attribute-header-section--external .op-modal-form-input:focus {
  border-color: #F5B041;
}

.op-modal-attribute-header-section--external .op-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.op-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.op-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.op-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.op-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.op-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.op-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.op-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.op-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.op-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.op-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.op-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.op-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.op-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.op-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.op-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.op-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.op-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.op-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.op-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.op-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.op-modal-available-qty-tree-level {
  position: relative;
}

.op-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.op-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.op-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.op-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.op-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.op-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.op-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.op-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.op-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.op-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.op-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.op-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.op-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.op-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.op-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.op-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.op-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.op-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.op-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.op-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.op-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.op-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.op-modal-available-qty-tree-batch-header .op-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.op-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.op-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.op-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.op-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.op-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.op-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.op-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.op-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.op-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.op-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.op-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.op-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.op-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.op-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.op-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.op-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.op-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.op-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.op-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.op-modal-activity-type--clickable.op-modal-activity-type--display:hover {
  color: #138B4C;
}

.op-modal-activity-type--clickable.op-modal-activity-type--external:hover {
  color: #E67E00;
}

.op-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.op-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.op-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.op-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.op-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.op-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.op-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.op-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.op-modal-activity-detail-content .op-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.op-modal-activity-detail-modal .op-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.op-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.op-modal-activity-detail-modal .op-modal-tabs--display .op-modal-tab {
  color: #333333;
}

.op-modal-activity-detail-modal .op-modal-tabs--display .op-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.op-modal-activity-detail-modal .op-modal-tabs--external.op-modal-tabs--display .op-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.op-modal-activity-detail-tab-content--general .op-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.op-modal-activity-detail-content .op-modal-milestone-status {
  margin: 0;
}

.op-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.op-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.op-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.op-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.op-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.op-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.op-modal-activity-detail-pic-chat-wrapper:hover .op-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.op-modal-activity-detail-pic-chat-wrapper:hover .op-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.op-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.op-modal-activity-detail-pic--clickable:hover .op-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.op-modal-activity-detail-content--external .op-modal-activity-detail-pic {
  color: #E67E22;
}

.op-modal-activity-detail-content--external .op-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.op-modal-activity-detail-content--external .op-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.op-modal-activity-detail-content--external .op-modal-activity-detail-pic--clickable:hover .op-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.op-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.op-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.op-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.op-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.op-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.op-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.op-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.op-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.op-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.op-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.op-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.op-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.op-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.op-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.op-modal-activity-detail-content--external .op-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.op-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.op-modal-activity-detail-content--external .op-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.op-modal-activity-detail-content--external .op-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.op-modal-activity-detail-content--external .op-modal-activity-detail-document-name {
  color: #E67E22;
}

.op-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.op-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.op-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.op-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.op-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.op-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.op-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.op-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.op-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.op-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.op-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.op-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.op-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.op-modal-activity-detail-tab-content--general {
  padding: 0;
}

.op-modal-activity-detail-tab-content--general .op-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.op-modal-activity-detail-tab-content--general > div:not(.op-modal-item-text-info) {
  padding: 0 1.5rem;
}

.op-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.op-modal-activity-detail-tab-content--attachment,
.op-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.op-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.op-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.op-modal-activity-detail-tab-content--attachment .op-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.op-modal-activity-detail-tab-content--attachment .op-modal-batch-assignment-table-section > .op-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.op-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.op-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.op-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.op-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.op-modal-activity-detail-content--external .op-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.op-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.op-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.op-modal-activity-detail-content--external .op-modal-item-text-info {
  background-color: #FEF5E7;
}

.op-modal-activity-detail-content--external .op-modal-task-notes-section {
  background-color: #FEF5E7;
}

.op-modal-task-notes-section .op-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.op-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.op-modal-task-notes-textarea.op-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.op-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.op-modal-task-chat-section > .op-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.op-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.op-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.op-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.op-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.op-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.op-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.op-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.op-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.op-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.op-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.op-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.op-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.op-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.op-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.op-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.op-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.op-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.op-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.op-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.op-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.op-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.op-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.op-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.op-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.op-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.op-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.op-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.op-modal-activity-detail-content--external .op-modal-task-chat-avatar {
  background-color: #F5B041;
}

.op-modal-activity-detail-content--external .op-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.op-modal-activity-detail-content--external .op-modal-task-chat-reply-btn {
  color: #E67E22;
}

.op-modal-activity-detail-content--external .op-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.op-modal-dropdown--display .op-modal-dropdown-item,
.op-modal-dropdown--display [class*="-item"],
.op-modal-tags-dropdown--display .op-modal-tags-dropdown-item,
.op-modal-baseline-date-dropdown--display .op-modal-baseline-date-item,
.op-modal-reference-type-dropdown--display .op-modal-reference-type-item,
.op-modal-delivery-priority-dropdown--display .op-modal-delivery-priority-item,
.op-modal-organization-dropdown--display .op-modal-organization-item,
.op-modal-sales-structure-dropdown--display .op-modal-sales-structure-item,
.op-modal-delivery-type-dropdown--display .op-modal-delivery-type-item,
.op-modal-sales-channel-dropdown--display .op-modal-sales-channel-item,
.op-modal-sales-unit-dropdown--display .op-modal-sales-unit-item,
.op-modal-sold-to-party-dropdown--display .op-modal-sold-to-party-item,
.op-modal-deliver-to-party-dropdown--display .op-modal-deliver-to-party-item,
.op-modal-attention-to-deliver-dropdown--display .op-modal-attention-to-deliver-item,
.op-modal-incoterm-dropdown--display .op-modal-incoterm-item,
.op-modal-delivery-point-dropdown--display .op-modal-delivery-point-item,
.op-modal-shipping-point-dropdown--display .op-modal-shipping-point-item,
.op-modal-sales-order-dropdown--display .op-modal-sales-order-item,
.op-modal-sales-person-dropdown--display .op-modal-sales-person-item,
.op-modal-sales-team-dropdown--display .op-modal-sales-team-item,
.op-modal-territory-dropdown--display .op-modal-territory-item,
.op-modal-sales-office-dropdown--display .op-modal-sales-office-item,
.op-modal-status-dropdown--display .op-modal-status-item,
.op-modal-handling-product-dropdown--display .op-modal-handling-product-item,
.op-modal-child-uom-dropdown--display .op-modal-child-uom-item,
.op-modal-partner-type-dropdown--display .op-modal-partner-type-item,
.op-modal-partner-id-dropdown--display .op-modal-partner-id-item,
.op-modal-custom-dropdown--display .op-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.op-modal-dropdown--display .op-modal-dropdown-item:hover,
.op-modal-dropdown--display [class*="-item"]:hover,
.op-modal-tags-dropdown--display .op-modal-tags-dropdown-item:hover,
.op-modal-baseline-date-dropdown--display .op-modal-baseline-date-item:hover,
.op-modal-reference-type-dropdown--display .op-modal-reference-type-item:hover,
.op-modal-delivery-priority-dropdown--display .op-modal-delivery-priority-item:hover,
.op-modal-organization-dropdown--display .op-modal-organization-item:hover,
.op-modal-sales-structure-dropdown--display .op-modal-sales-structure-item:hover,
.op-modal-delivery-type-dropdown--display .op-modal-delivery-type-item:hover,
.op-modal-sales-channel-dropdown--display .op-modal-sales-channel-item:hover,
.op-modal-sales-unit-dropdown--display .op-modal-sales-unit-item:hover,
.op-modal-sold-to-party-dropdown--display .op-modal-sold-to-party-item:hover,
.op-modal-deliver-to-party-dropdown--display .op-modal-deliver-to-party-item:hover,
.op-modal-attention-to-deliver-dropdown--display .op-modal-attention-to-deliver-item:hover,
.op-modal-incoterm-dropdown--display .op-modal-incoterm-item:hover,
.op-modal-delivery-point-dropdown--display .op-modal-delivery-point-item:hover,
.op-modal-shipping-point-dropdown--display .op-modal-shipping-point-item:hover,
.op-modal-sales-order-dropdown--display .op-modal-sales-order-item:hover,
.op-modal-sales-person-dropdown--display .op-modal-sales-person-item:hover,
.op-modal-sales-team-dropdown--display .op-modal-sales-team-item:hover,
.op-modal-territory-dropdown--display .op-modal-territory-item:hover,
.op-modal-sales-office-dropdown--display .op-modal-sales-office-item:hover,
.op-modal-status-dropdown--display .op-modal-status-item:hover,
.op-modal-handling-product-dropdown--display .op-modal-handling-product-item:hover,
.op-modal-child-uom-dropdown--display .op-modal-child-uom-item:hover,
.op-modal-partner-type-dropdown--display .op-modal-partner-type-item:hover,
.op-modal-partner-id-dropdown--display .op-modal-partner-id-item:hover,
.op-modal-custom-dropdown--display .op-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.op-modal-dropdown--display [class*="-item--selected"],
.op-modal-tags-dropdown--display .op-modal-tags-dropdown-item--selected,
.op-modal-baseline-date-dropdown--display .op-modal-baseline-date-item--selected,
.op-modal-reference-type-dropdown--display .op-modal-reference-type-item--selected,
.op-modal-delivery-priority-dropdown--display .op-modal-delivery-priority-item--selected,
.op-modal-organization-dropdown--display .op-modal-organization-item--selected,
.op-modal-sales-structure-dropdown--display .op-modal-sales-structure-item--selected,
.op-modal-delivery-type-dropdown--display .op-modal-delivery-type-item--selected,
.op-modal-sales-channel-dropdown--display .op-modal-sales-channel-item--selected,
.op-modal-sales-unit-dropdown--display .op-modal-sales-unit-item--selected,
.op-modal-sold-to-party-dropdown--display .op-modal-sold-to-party-item--selected,
.op-modal-deliver-to-party-dropdown--display .op-modal-deliver-to-party-item--selected,
.op-modal-attention-to-deliver-dropdown--display .op-modal-attention-to-deliver-item--selected,
.op-modal-incoterm-dropdown--display .op-modal-incoterm-item--selected,
.op-modal-delivery-point-dropdown--display .op-modal-delivery-point-item--selected,
.op-modal-shipping-point-dropdown--display .op-modal-shipping-point-item--selected,
.op-modal-sales-order-dropdown--display .op-modal-sales-order-item--selected,
.op-modal-sales-person-dropdown--display .op-modal-sales-person-item--selected,
.op-modal-sales-team-dropdown--display .op-modal-sales-team-item--selected,
.op-modal-territory-dropdown--display .op-modal-territory-item--selected,
.op-modal-sales-office-dropdown--display .op-modal-sales-office-item--selected,
.op-modal-status-dropdown--display .op-modal-status-item--selected,
.op-modal-handling-product-dropdown--display .op-modal-handling-product-item--selected,
.op-modal-child-uom-dropdown--display .op-modal-child-uom-item--selected,
.op-modal-partner-type-dropdown--display .op-modal-partner-type-item--selected,
.op-modal-partner-id-dropdown--display .op-modal-partner-id-item--selected,
.op-modal-custom-dropdown--display .op-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.op-modal-dropdown--display [class*="-check"],
.op-modal-dropdown--display .op-modal-dropdown-check,
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.op-modal-dropdown--display [class*="-item-code"],
.op-modal-dropdown--display [class*="-item-name"],
.op-modal-dropdown--display [class*="-item-content"],
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-code,
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-name,
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-item,
.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.op-modal-sold-to-party-dropdown-content--display .op-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.op-modal-tags-dropdown--display .op-modal-tags-item,
.op-modal-tags-dropdown--display .op-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-tags-dropdown--display .op-modal-tags-item:hover {
  background-color: transparent !important;
}

.op-modal-tags-dropdown--display .op-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.op-modal-tags-dropdown--display .op-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item,
.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.op-modal-custom-dropdown-list--display .op-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Proposal/Proposal.css ===== */
/* Quotation Wrapper - prevent page scroll */
.proposal-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Quotation Container */
.proposal-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.proposal-header {
  margin-bottom: 0;
}

.proposal-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Quotation Control - Exact copy of third-nav-control */
.proposal-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.proposal-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.proposal-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.proposal-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.proposal-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.proposal-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.proposal-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.proposal-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.proposal-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.proposal-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.proposal-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.proposal-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.proposal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.proposal-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.proposal-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.proposal-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.proposal-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.proposal-layout-dropdown-item:last-child {
  border-bottom: none;
}

.proposal-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.proposal-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.proposal-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.proposal-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.proposal-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.proposal-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.proposal-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.proposal-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.proposal-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.proposal-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.proposal-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.proposal-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.proposal-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.proposal-filter-parameter-wrapper {
  position: relative;
}

.proposal-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.proposal-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.proposal-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.proposal-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.proposal-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.proposal-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.proposal-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.proposal-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.proposal-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.proposal-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.proposal-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.proposal-filter-close:hover {
  background-color: #f0f0f0;
}

.proposal-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.proposal-filter-group {
  margin-bottom: 1rem;
}

.proposal-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.proposal-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.proposal-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.proposal-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.proposal-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.proposal-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.proposal-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.proposal-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.proposal-filter-org-container {
  flex: 1 1;
  position: relative;
}

.proposal-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.proposal-filter-org-input:hover {
  border-color: #C2DE54;
}

.proposal-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.proposal-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.proposal-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.proposal-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.proposal-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.proposal-filter-tag-remove:hover {
  color: #000;
}

.proposal-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.proposal-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.proposal-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.proposal-filter-org-item:hover {
  background-color: #f5f5f5;
}

.proposal-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.proposal-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.proposal-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.proposal-filter-org-code {
  font-weight: 600;
  color: #333;
}

.proposal-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.proposal-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.proposal-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.proposal-type-dropdown-item:last-child {
  border-bottom: none;
}

.proposal-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.proposal-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.proposal-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.proposal-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Quotation Table */
.proposal-table {
  animation: quotationFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes quotationFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .proposal-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .proposal-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .proposal-type-dropdown {
    min-width: 11.25rem;
  }

  .proposal-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Proposal/ProposalModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.pr-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.pr-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.pr-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.pr-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.pr-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.pr-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.pr-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.pr-modal-pov-button--external.pr-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.pr-modal-pov-button--external .pr-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-pov-button--external .pr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.pr-modal-pov-caret--open {
  transform: rotate(180deg);
}

.pr-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.pr-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.pr-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.pr-modal-pov-dropdown-item span {
  flex: 1 1;
}

.pr-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.pr-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.pr-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.pr-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.pr-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.pr-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.pr-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.pr-modal-tabs--display .pr-modal-tab {
  color: #666666;
}

.pr-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.pr-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.pr-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.pr-modal-tabs--display .pr-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.pr-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.pr-modal-tabs--external .pr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.pr-modal-tabs--external.pr-modal-tabs--display .pr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.pr-modal-tabs--external .pr-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.pr-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.pr-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.pr-modal-action-button span {
  white-space: nowrap;
}

.pr-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.pr-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.pr-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.pr-modal-action-button--disabled .pr-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.pr-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.pr-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.pr-modal-left-area--full .pr-modal-back-button {
  transition: width 300ms ease;
}

.pr-modal-left-area--full .pr-modal-back-button:hover {
  width: 3.5rem;
}

.pr-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.pr-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.pr-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pr-modal-content--item {
  padding-bottom: 1rem;
}

.pr-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.pr-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.pr-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.pr-modal-attachment-table-container .pr-modal-detail-table thead,
.pr-modal-attachment-table-container .pr-modal-attachment-table thead {
  box-shadow: none !important;
}

.pr-modal-attachment-table-container .pr-modal-detail-table tr,
.pr-modal-attachment-table-container .pr-modal-attachment-table tr {
  box-shadow: none !important;
}

.pr-modal-attachment-table-container .pr-modal-detail-table tbody tr:last-child,
.pr-modal-attachment-table-container .pr-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.pr-modal-attachment-table-container .pr-modal-detail-table tbody tr:last-child td,
.pr-modal-attachment-table-container .pr-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.pr-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.pr-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.pr-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.pr-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.pr-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.pr-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.pr-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.pr-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.pr-modal-attachment-filename--external {
  color: #E67E22;
}

.pr-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.pr-modal-tab-content--display .pr-modal-attachment-filename--external {
  color: #E67E22;
}

.pr-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.pr-modal-attachment-size {
  color: #666666;
}

.pr-modal-attachment-date {
  color: #666666;
}

.pr-modal-attachment-uploadedby {
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.pr-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.pr-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.pr-modal-attachment-browse-btn:focus {
  outline: none;
}

.pr-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.pr-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.pr-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-attachment-browse-btn--disabled .pr-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.pr-modal-tab-content--display .pr-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.pr-modal-tab-content--display .pr-modal-attachment-filename.pr-modal-attachment-filename--external {
  color: #E67E22;
}

.pr-modal-tab-content--display .pr-modal-attachment-type {
  color: #666666;
}

.pr-modal-tab-content--display .pr-modal-attachment-size {
  color: #666666;
}

.pr-modal-tab-content--display .pr-modal-attachment-date {
  color: #666666;
}

.pr-modal-tab-content--display .pr-modal-attachment-uploadedby {
  color: #333333;
}

.pr-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.pr-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.pr-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.pr-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.pr-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.pr-modal-tab-content--display .pr-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.pr-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.pr-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.pr-modal-tab-content--display .pr-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.pr-modal-basic-section--external .pr-modal-form-input:focus {
  border-color: #F5B041;
}

.pr-modal-basic-section--external .pr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.pr-modal-tab-content--external .pr-modal-form-input:focus,
.pr-modal-tab-content--external .pr-modal-form-textarea:focus,
.pr-modal-tab-content--external .pr-modal-custom-dropdown-input:focus,
.pr-modal-tab-content--external .pr-modal-date-input:focus,
.pr-modal-tab-content--external .pr-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.pr-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.pr-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.pr-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.pr-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.pr-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.pr-modal-tab-content--display .pr-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.pr-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.pr-modal-tab-content--display .pr-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.pr-modal-partner-header-section--external .pr-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.pr-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.pr-modal-tab-content--display .pr-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.pr-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.pr-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.pr-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.pr-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pr-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.pr-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.pr-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.pr-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.pr-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.pr-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.pr-modal-chat-section {
  padding: 1.5rem 0;
}

.pr-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.pr-modal-chat-header h3 {
  margin: 0;
}

.pr-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.pr-modal-chat-new-thread .pr-modal-form-textarea {
  min-height: 5rem;
}

.pr-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.pr-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pr-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.pr-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.pr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.pr-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.pr-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.pr-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.pr-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.pr-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.pr-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.pr-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.pr-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.pr-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.pr-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-chat-user-name {
  color: #333333 !important;
}

.pr-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.pr-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.pr-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.pr-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.pr-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.pr-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.pr-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.pr-modal-chat-reply-btn:hover .pr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.pr-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.pr-modal-chat-replies .pr-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.pr-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.pr-modal-chat-reply-input .pr-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.pr-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.pr-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.pr-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.pr-modal-tab-content--display .pr-modal-chat-thread {
  border-color: #E5E5E5;
}

.pr-modal-tab-content--display .pr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display .pr-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-chat-user-position {
  background-color: #E8F5E9;
}

.pr-modal-tab-content--display .pr-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.pr-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.pr-modal-tab-content--display .pr-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.pr-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.pr-modal-notes-header-section--external .pr-modal-form-textarea:focus {
  border-color: #F5B041;
}

.pr-modal-chat-section--external .pr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.pr-modal-chat-avatar--external {
  background-color: #F5B041;
}

.pr-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.pr-modal-tab-content--display .pr-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-thread {
  border-color: #E5E5E5;
}

.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-user-name {
  color: #333333 !important;
}

.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-user-position {
  background-color: #FDE8D0;
}

.pr-modal-tab-content--display.pr-modal-tab-content--external .pr-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.pr-modal-chat-reply-btn--external {
  color: #E67E22;
}

.pr-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.pr-modal-chat-reply-btn--external .pr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.pr-modal-chat-reply-btn--external:hover .pr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.pr-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.pr-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.pr-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.pr-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.pr-modal-chat-textarea-wrapper {
  position: relative;
}

.pr-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.pr-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.pr-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.pr-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.pr-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.pr-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.pr-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.pr-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.pr-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.pr-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.pr-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.pr-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.pr-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.pr-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.pr-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.pr-modal-tab-content--display .pr-modal-table-empty-state-title {
  color: #666666;
}

.pr-modal-tab-content--display .pr-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.pr-modal-partner-header-section + .pr-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.pr-modal-partner-header-section + .pr-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.pr-modal-partner-header-section + .pr-modal-item-content-section .pr-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.pr-modal-partner-header-section + .pr-modal-item-content-section .pr-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.pr-modal-partner-header-section + .pr-modal-item-content-section .pr-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.pr-modal-partner-header-section + .pr-modal-item-content-section .pr-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.pr-modal-partner-header-section + .pr-modal-item-content-section .pr-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.pr-modal-partner-table-container .pr-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.pr-modal-partner-table-container .pr-modal-partner-table th:last-child,
.pr-modal-partner-table-container .pr-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.pr-modal-detail-table-container--external.pr-modal-partner-table-container .pr-modal-partner-table th:last-child,
.pr-modal-detail-table-container--external.pr-modal-partner-table-container .pr-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.pr-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.pr-modal-item-header-section .pr-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-tab-content--display .pr-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.pr-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.pr-modal-tab-content--display .pr-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.pr-modal-item-header-section--external .pr-modal-form-input:focus {
  border-color: #F5B041;
}

.pr-modal-item-header-section--external .pr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.pr-modal-detail-subtabs--external .pr-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.pr-modal-detail-subtabs--external .pr-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.pr-modal-detail-subtabs--external .pr-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.pr-modal-tab-content--display .pr-modal-detail-subtabs--external .pr-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.pr-modal-tab-content--display .pr-modal-detail-subtabs--external .pr-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.pr-modal-tab-content.pr-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.pr-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.pr-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.pr-modal-item-table-wrapper .pr-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.pr-modal-item-table-wrapper .pr-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.pr-modal-item-table-wrapper--terms .pr-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.pr-modal-tab-content--external.pr-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.pr-modal-tab-content--external .pr-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-tab-content--external .pr-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-tab-content--external .pr-modal-item-table-wrapper--terms .pr-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.pr-modal-tab-content--external .pr-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.pr-modal-item-table-wrapper--terms .pr-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.pr-modal-item-table-wrapper--terms .pr-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pr-modal-item-table-wrapper--terms .pr-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.pr-modal-item-table-wrapper--terms .pr-modal-detail-table tr {
  height: auto;
}

.pr-modal-item-table-wrapper--terms .pr-modal-detail-table-container .pr-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.pr-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.pr-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.pr-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.pr-modal-volume-input-group .pr-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.pr-modal-volume-input-group .pr-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.pr-modal-volume-input-group .pr-modal-sla-input-wrapper .pr-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.pr-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.pr-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.pr-modal-volume-uom-list--display .pr-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-volume-uom-list--display .pr-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.pr-modal-volume-uom-list--display .pr-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-volume-uom-list--display .pr-modal-volume-uom-check {
  color: #999999 !important;
}

.pr-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.pr-modal-volume-uom-dropdown--display .pr-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.pr-modal-volume-uom-dropdown--display .pr-modal-volume-uom-item:hover {
  background-color: transparent;
}

.pr-modal-volume-uom-dropdown--display .pr-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.pr-modal-volume-uom-dropdown--display .pr-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.pr-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.pr-modal-weight-input-group .pr-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.pr-modal-weight-input-group .pr-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.pr-modal-weight-input-group .pr-modal-sla-input-wrapper .pr-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.pr-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.pr-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-weight-uom-input::placeholder {
  color: #999999;
}

.pr-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.pr-modal-weight-uom-dropdown--display .pr-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.pr-modal-weight-uom-dropdown--display .pr-modal-weight-uom-item:hover {
  background-color: transparent;
}

.pr-modal-weight-uom-dropdown--display .pr-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.pr-modal-weight-uom-dropdown--display .pr-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.pr-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.pr-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.pr-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.pr-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.pr-modal-form-input--display ~ .pr-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.pr-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.pr-modal-form-input--display {
  cursor: default;
}

.pr-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.pr-modal-form-label--display {
  color: #333333 !important;
}

.pr-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.pr-modal-form-label--display .pr-modal-required {
  color: #FF4D4F;
}

.pr-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.pr-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.pr-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.pr-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.pr-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.pr-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.pr-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pr-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.pr-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.pr-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.pr-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.pr-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.pr-modal-sla-spinner-btn:disabled .pr-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.pr-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sla-spinner-btn:hover .pr-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.pr-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.pr-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.pr-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.pr-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.pr-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.pr-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.pr-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.pr-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.pr-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.pr-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.pr-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.pr-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.pr-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.pr-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.pr-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.pr-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.pr-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.pr-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.pr-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.pr-modal-stage-dropdown-input--display .pr-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.pr-modal-stage-dropdown-input--display .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.pr-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.pr-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.pr-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.pr-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.pr-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.pr-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.pr-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.pr-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.pr-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.pr-modal-accordion-header--display {
  color: #333333;
}

.pr-modal-accordion-header--display.pr-modal-accordion-header--active {
  color: #333333;
}

.pr-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.pr-modal-accordion-header--display .pr-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.pr-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.pr-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.pr-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.pr-modal-stage-main-title--display {
  color: #138B4C;
}

.pr-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-stage-title--display {
  color: #333333;
}

.pr-modal-stage-current {
  margin-bottom: 1.875rem;
}

.pr-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.pr-modal-stage-label--display {
  color: #666666;
}

.pr-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-stage-subtitle--display {
  color: #333333;
}

.pr-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.pr-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.pr-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.pr-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.pr-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.pr-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.pr-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.pr-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.pr-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pr-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.pr-modal-download-button:active {
  background-color: #E0E0E0;
}

.pr-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-download-button--display .pr-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.pr-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.pr-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.pr-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.pr-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.pr-modal-timeline-item--display .pr-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.pr-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.pr-modal-timeline-badge--inactive .pr-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.pr-modal-timeline-item--display .pr-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.pr-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.pr-modal-timeline-item--display .pr-modal-timeline-line {
  background-color: #138B4C;
}

.pr-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pr-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.pr-modal-timeline-status--display {
  color: #333333;
}

.pr-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.pr-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.pr-modal-timeline-date--display {
  color: #666666;
}

.pr-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.pr-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.pr-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.pr-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pr-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.pr-modal-timeline-document--display {
  color: #138B4C;
}

.pr-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.pr-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.pr-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.pr-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.pr-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.pr-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.pr-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.pr-modal-activity-item--display .pr-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.pr-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.pr-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.pr-modal-activity-item--display .pr-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.pr-modal-activity-item--display .pr-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.pr-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.pr-modal-activity-item--display .pr-modal-activity-line {
  background-color: #138B4C;
}

.pr-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.pr-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.pr-modal-activity-type--display {
  color: #333333;
}

.pr-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.pr-modal-activity-header--display {
  color: #666666;
}

.pr-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.pr-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.pr-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.pr-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.pr-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.pr-modal-activity-change--display .pr-modal-activity-field {
  color: #333333;
}

.pr-modal-activity-change--display .pr-modal-activity-new {
  color: #138B4C;
}

.pr-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.pr-modal-activity-date--display {
  color: #666666;
}

.pr-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.pr-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.pr-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pr-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.pr-modal-activity-more--display {
  color: #138B4C;
}

.pr-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-activity-more--display .pr-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.pr-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.pr-modal-reference-table thead {
  background-color: #F9F9F9;
}

.pr-modal-tab-content--display .pr-modal-reference-table thead {
  background-color: #FAFAFA;
}

.pr-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.pr-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.pr-modal-tab-content--display .pr-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.pr-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.pr-modal-tab-content--display .pr-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.pr-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.pr-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.pr-modal-detail-subtab:hover {
  color: #138B4C;
}

.pr-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.pr-modal-tab-content--display .pr-modal-detail-subtab {
  color: #666666;
}

.pr-modal-tab-content--display .pr-modal-detail-subtab:hover {
  color: #138B4C;
}

.pr-modal-tab-content--display .pr-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.pr-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.pr-modal-tab-content.pr-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.pr-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-detail-delivery-wrapper .pr-modal-form-label {
  flex-shrink: 0;
}

.pr-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.pr-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.pr-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.pr-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.pr-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.pr-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.pr-modal-detail-table-container .pr-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pr-modal-detail-table-container .pr-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pr-modal-detail-table-container .pr-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.pr-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.pr-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.pr-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.pr-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.pr-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.pr-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.pr-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-detail-table th,
.pr-modal-tab-content--display .pr-modal-packaging-table th,
.pr-modal-tab-content--display .pr-modal-partner-table th,
.pr-modal-tab-content--display .pr-modal-attachment-table th {
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-detail-table td,
.pr-modal-tab-content--display .pr-modal-packaging-table td,
.pr-modal-tab-content--display .pr-modal-partner-table td,
.pr-modal-tab-content--display .pr-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-description,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-text,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-batch,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-serial,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-so-item,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-package-no,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-product-type,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-product-group,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-product-category,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.pr-modal-tab-content--display .pr-modal-detail-table tbody tr:hover .pr-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-description,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-text,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-batch,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-serial,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-so-item,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-package-no,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-type,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-group,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-category,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .pr-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.pr-modal-detail-table-container .pr-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.pr-modal-detail-table-container .pr-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.pr-modal-detail-table-container--external .pr-modal-detail-table td {
  color: #555555 !important;
}

.pr-modal-detail-table-container .pr-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.pr-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.pr-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.pr-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.pr-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.pr-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.pr-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.pr-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.pr-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.pr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.pr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.pr-modal-detail-table tbody tr:hover .detail-table-description,
.pr-modal-detail-table tbody tr:hover .detail-table-text,
.pr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.pr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.pr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.pr-modal-detail-table tbody tr:hover .detail-table-batch,
.pr-modal-detail-table tbody tr:hover .detail-table-serial,
.pr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.pr-modal-detail-table tbody tr:hover .detail-table-so-item,
.pr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.pr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.pr-modal-detail-table tbody tr:hover .detail-table-package-no,
.pr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.pr-modal-detail-table tbody tr:hover .detail-table-product-type,
.pr-modal-detail-table tbody tr:hover .detail-table-product-group,
.pr-modal-detail-table tbody tr:hover .detail-table-product-category,
.pr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.pr-modal-detail-table tbody tr:hover .pr-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-description,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-text,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-batch,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-serial,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-so-item,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-package-no,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-type,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-group,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-category,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .pr-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.pr-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.pr-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.pr-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.pr-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.pr-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.pr-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pr-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.pr-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.pr-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.pr-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.pr-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.pr-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.pr-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.pr-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.pr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.pr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.pr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.pr-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.pr-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.pr-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.pr-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.pr-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pr-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.pr-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pr-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.pr-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.pr-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.pr-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.pr-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.pr-modal-add-item-btn--disabled .pr-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.pr-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.pr-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.pr-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.pr-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.pr-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.pr-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.pr-modal-sales-order-table-container .pr-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.pr-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.pr-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.pr-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.pr-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.pr-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.pr-modal-table-input:focus {
  outline: none;
}

.pr-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.pr-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.pr-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.pr-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.pr-modal-tags-container {
  position: relative;
  width: 100%;
}

.pr-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.pr-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.pr-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.pr-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.pr-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.pr-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.pr-modal-tags-input--display .pr-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.pr-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.pr-modal-tag-remove:hover {
  color: #333333;
}

.pr-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.pr-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.pr-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.pr-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.pr-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.pr-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.pr-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.pr-modal-status-container {
  position: relative;
  width: 100%;
}

.pr-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.pr-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.pr-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.pr-modal-status-placeholder {
  color: #999999;
}

.pr-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.pr-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.pr-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.pr-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-status-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-status-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.pr-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.pr-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.pr-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.pr-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.pr-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.pr-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.pr-modal-status-input--display .pr-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.pr-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.pr-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.pr-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.pr-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.pr-modal-stage-dropdown-placeholder {
  color: #999999;
}

.pr-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.pr-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.pr-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.pr-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.pr-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.pr-modal-stage--created .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.pr-modal-stage--approved .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.pr-modal-stage--processed .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.pr-modal-stage--picked .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.pr-modal-stage--packed .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.pr-modal-stage--planned .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.pr-modal-stage--loaded .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.pr-modal-stage--issued .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.pr-modal-stage--departed .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.pr-modal-stage--arrived .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.pr-modal-stage--unloaded .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.pr-modal-stage--delivered .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.pr-modal-stage--confirmed .pr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.pr-modal-stage--billed .pr-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.pr-modal-stage-dropdown-input .pr-modal-stage,
.pr-modal-stage-dropdown-item .pr-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.pr-modal-baseline-date-dropdown {
  position: relative;
}

.pr-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.pr-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.pr-modal-reference-type-dropdown {
  position: relative;
}

.pr-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.pr-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.pr-modal-delivery-priority-dropdown {
  position: relative;
}

.pr-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.pr-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.pr-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.pr-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.pr-modal-delivery-priority-separator {
  color: #666666;
}

.pr-modal-delivery-priority-name {
  color: #333333;
}

.pr-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.pr-modal-organization-dropdown {
  position: relative;
}

.pr-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.pr-modal-organization-dropdown-content--display .pr-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-organization-dropdown-content--display .pr-modal-organization-item:hover {
  background-color: transparent !important;
}

.pr-modal-organization-dropdown-content--display .pr-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-organization-dropdown-content--display .pr-modal-organization-code,
.pr-modal-organization-dropdown-content--display .pr-modal-organization-name,
.pr-modal-organization-dropdown-content--display .pr-modal-organization-separator {
  color: #999999 !important;
}

.pr-modal-organization-dropdown-content--display .pr-modal-organization-check {
  color: #999999 !important;
}

.pr-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-organization-separator {
  color: #999999;
}

.pr-modal-organization-name {
  color: #333333;
}

.pr-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.pr-modal-sales-structure-dropdown {
  position: relative;
}

.pr-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.pr-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.pr-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-sales-structure-separator {
  color: #999999;
}

.pr-modal-sales-structure-name {
  color: #333333;
}

.pr-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.pr-modal-delivery-type-dropdown {
  position: relative;
}

.pr-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.pr-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.pr-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.pr-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.pr-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.pr-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.pr-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.pr-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-delivery-type-separator {
  color: #999999;
}

.pr-modal-delivery-type-description {
  color: #333333;
}

.pr-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.pr-modal-content::-webkit-scrollbar,
.pr-modal-stage-content::-webkit-scrollbar,


.pr-modal-content::-webkit-scrollbar-track,
.pr-modal-stage-content::-webkit-scrollbar-track,


.pr-modal-content::-webkit-scrollbar-thumb,
.pr-modal-stage-content::-webkit-scrollbar-thumb,


.pr-modal-content::-webkit-scrollbar-thumb:hover,
.pr-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.pr-modal-sales-channel-dropdown {
  position: relative;
}

.pr-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.pr-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-sales-channel-separator {
  color: #999999;
}

.pr-modal-sales-channel-name {
  color: #333333;
}

.pr-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.pr-modal-sales-unit-dropdown {
  position: relative;
}

.pr-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.pr-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-sales-unit-separator {
  color: #999999;
}

.pr-modal-sales-unit-name {
  color: #333333;
}

.pr-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.pr-modal-organization-item--placeholder,
.pr-modal-sales-structure-item--placeholder,
.pr-modal-sales-channel-item--placeholder,
.pr-modal-sales-unit-item--placeholder,
.pr-modal-territory-item--placeholder,
.pr-modal-sales-office-item--placeholder,
.pr-modal-sold-to-party-item--placeholder,
.pr-modal-deliver-to-party-item--placeholder,
.pr-modal-attention-to-deliver-item--placeholder,
.pr-modal-incoterm-item--placeholder,
.pr-modal-delivery-point-item--placeholder,
.pr-modal-shipping-point-item--placeholder,
.pr-modal-sales-order-item--placeholder,
.pr-modal-sales-team-item--placeholder,
.pr-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.pr-modal-organization-item--placeholder:hover,
.pr-modal-sales-structure-item--placeholder:hover,
.pr-modal-sales-channel-item--placeholder:hover,
.pr-modal-sales-unit-item--placeholder:hover,
.pr-modal-territory-item--placeholder:hover,
.pr-modal-sales-office-item--placeholder:hover,
.pr-modal-sold-to-party-item--placeholder:hover,
.pr-modal-deliver-to-party-item--placeholder:hover,
.pr-modal-attention-to-deliver-item--placeholder:hover,
.pr-modal-incoterm-item--placeholder:hover,
.pr-modal-delivery-point-item--placeholder:hover,
.pr-modal-shipping-point-item--placeholder:hover,
.pr-modal-sales-order-item--placeholder:hover,
.pr-modal-sales-team-item--placeholder:hover,
.pr-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.pr-modal-sold-to-party-dropdown {
  position: relative;
}

.pr-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-sold-to-party-input:focus,
.pr-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.pr-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.pr-modal-sold-to-party-separator {
  color: #999999;
}

.pr-modal-sold-to-party-name {
  color: #333333;
}

.pr-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.pr-modal-deliver-to-party-dropdown {
  position: relative;
}

.pr-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.pr-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.pr-modal-deliver-to-party-separator {
  color: #999999;
}

.pr-modal-deliver-to-party-name {
  color: #333333;
}

.pr-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.pr-modal-attention-to-deliver-dropdown {
  position: relative;
}
.pr-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.pr-modal-attention-to-deliver-separator {
  color: #999999;
}
.pr-modal-attention-to-deliver-name {
  color: #333333;
}
.pr-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.pr-modal-incoterm-dropdown {
  position: relative;
}
.pr-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.pr-modal-incoterm-separator {
  color: #999999;
}
.pr-modal-incoterm-name {
  color: #333333;
}
.pr-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.pr-modal-delivery-point-dropdown {
  position: relative;
}
.pr-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.pr-modal-delivery-point-separator {
  color: #999999;
}
.pr-modal-delivery-point-name {
  color: #333333;
}
.pr-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.pr-modal-shipping-point-dropdown {
  position: relative;
}
.pr-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.pr-modal-shipping-point-separator {
  color: #999999;
}
.pr-modal-shipping-point-name {
  color: #333333;
}
.pr-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.pr-modal-sales-order-dropdown {
  position: relative;
}
.pr-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.pr-modal-sales-order-separator {
  color: #999999;
}
.pr-modal-sales-order-name {
  color: #333333;
}
.pr-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.pr-modal-date-picker {
  position: relative;
}
.pr-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.pr-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.pr-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.pr-modal-date-input::-webkit-datetime-edit-text,
.pr-modal-date-input::-webkit-datetime-edit-month-field,
.pr-modal-date-input::-webkit-datetime-edit-day-field,
.pr-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.pr-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.pr-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.pr-modal-sales-person-dropdown {
  position: relative;
}
.pr-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.pr-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.pr-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.pr-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.pr-modal-sales-person-separator {
  color: #999999;
}
.pr-modal-sales-person-name {
  color: #333333;
}
.pr-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.pr-modal-sales-team-dropdown {
  position: relative;
}
.pr-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pr-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.pr-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.pr-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.pr-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.pr-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.pr-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pr-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.pr-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.pr-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.pr-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pr-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.pr-modal-sales-team-separator {
  color: #999999;
}
.pr-modal-sales-team-name {
  color: #333333;
}
.pr-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.pr-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.pr-modal-territory-dropdown {
  position: relative;
}

.pr-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.pr-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-territory-separator {
  color: #999999;
}

.pr-modal-territory-name {
  color: #333333;
}

.pr-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.pr-modal-sales-office-dropdown {
  position: relative;
}

.pr-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.pr-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.pr-modal-sales-office-separator {
  color: #999999;
}

.pr-modal-sales-office-name {
  color: #333333;
}

.pr-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.pr-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.pr-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.pr-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.pr-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.pr-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.pr-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.pr-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-table-dropdown-input:focus {
  outline: none;
}

.pr-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.pr-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.pr-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.pr-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.pr-modal-delivery-type-list::-webkit-scrollbar,
.pr-modal-stage-dropdown-list::-webkit-scrollbar,
.pr-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.pr-modal-delivery-type-list::-webkit-scrollbar-track,
.pr-modal-stage-dropdown-list::-webkit-scrollbar-track,
.pr-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-delivery-type-list::-webkit-scrollbar-thumb,
.pr-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.pr-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.pr-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.pr-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.pr-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.pr-modal-wrapper,
.pr-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.pr-modal-wrapper,
.pr-modal-wrapper *,
.pr-modal-content,
.pr-modal-data-flow-2-container,
.pr-modal-data-flow-container,
.pr-modal-calendar-container,
.pr-modal-calendar-milestones-list,
.pr-modal-calendar-view,
.pr-modal-calendar-yearly,
.pr-modal-calendar-monthly,
.pr-modal-calendar-weekly,
.pr-modal-calendar-weekly-body,
.pr-modal-calendar-daily,
.pr-modal-calendar-daily-timeline,
.pr-modal-calendar-grid,
.pr-modal-calendar-grid-body,
.pr-modal-detail-table-container,
.pr-modal-item-table-wrapper,
.pr-modal-attachment-table-container,
.pr-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.pr-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.pr-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.pr-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.pr-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.pr-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.pr-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.pr-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.pr-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.pr-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-tab-content--display .pr-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.pr-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-tab-content--display .pr-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.pr-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.pr-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.pr-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) {
  font-weight: 600;
}

.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) .pr-modal-packaging-input,
.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) .pr-modal-packaging-input--display,
.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) .pr-modal-handling-product-input,
.pr-modal-packaging-row--unassigned:not(.pr-modal-packaging-row--expanded) .pr-modal-handling-product-input--display {
  font-weight: 600;
}

.pr-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.pr-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row td.pr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row td.pr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row td.pr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td.pr-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded td.pr-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row--expanded:hover td.pr-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display,
.pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display,
.pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.pr-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.pr-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-tab-content--display .pr-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.pr-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-tab-content--display .pr-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.pr-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.pr-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.pr-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.pr-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.pr-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.pr-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.pr-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.pr-modal-packaging-detail-table th:first-child,
.pr-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.pr-modal-packaging-detail-table th:nth-child(2),
.pr-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.pr-modal-packaging-detail-table th:nth-child(3),
.pr-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.pr-modal-packaging-detail-table td:nth-child(4),
.pr-modal-packaging-detail-table td:nth-child(6),
.pr-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.pr-modal-packaging-detail-table td:nth-child(5),
.pr-modal-packaging-detail-table td:nth-child(7),
.pr-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.pr-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.pr-modal-tab-content--display .pr-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display .pr-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.pr-modal-tab-content--display .pr-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.pr-modal-tab-content--display .pr-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.pr-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.pr-modal-packaging-table td:last-child,
.pr-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.pr-modal-packaging-table td:last-child .pr-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.pr-modal-detail-table-container--external .pr-modal-packaging-table th:last-child,
.pr-modal-detail-table-container--external .pr-modal-packaging-table td.pr-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.pr-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.pr-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.pr-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.pr-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.pr-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.pr-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.pr-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.pr-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.pr-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.pr-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.pr-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.pr-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.pr-modal-packaging-child-table tr {
  border: none !important;
}

.pr-modal-packaging-child-table thead,
.pr-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.pr-modal-packaging-child-table th:first-child,
.pr-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.pr-modal-packaging-child-table th:nth-child(2),
.pr-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.pr-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.pr-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.pr-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.pr-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.pr-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.pr-modal-packaging-child-table th:nth-child(3),
.pr-modal-packaging-child-table td:nth-child(3),
.pr-modal-packaging-child-table th:nth-child(4),
.pr-modal-packaging-child-table td:nth-child(4),
.pr-modal-packaging-child-table th:nth-child(5),
.pr-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.pr-modal-packaging-child-table th:nth-child(6),
.pr-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.pr-modal-packaging-child-table th:nth-child(7),
.pr-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.pr-modal-detail-table-container--external .pr-modal-packaging-child-table th:last-child,
.pr-modal-detail-table-container--external .pr-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.pr-modal-packaging-child-table td:last-child .pr-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.pr-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.pr-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.pr-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.pr-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.pr-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row {
  transition: none !important;
}

.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display,
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display:focus,
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display,
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display:focus,
.pr-modal-tab-content--display .pr-modal-detail-table-container .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display:focus,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display:focus,
.pr-modal-tab-content--display .pr-modal-detail-table-container--external .pr-modal-packaging-table tbody tr.pr-modal-packaging-row:hover td .pr-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.pr-modal-detail-table-container--external .pr-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.pr-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pr-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.pr-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.pr-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.pr-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.pr-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.pr-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.pr-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.pr-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.pr-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.pr-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.pr-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.pr-modal-detail-table-container--external .pr-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.pr-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-item--display {
  color: #999999 !important;
}

.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-code,
.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-name,
.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-separator {
  color: #999999 !important;
}

.pr-modal-handling-product-dropdown-content--display .pr-modal-handling-product-check {
  color: #999999 !important;
}

.pr-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.pr-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.pr-modal-handling-product-dropdown-content--narrow .pr-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.pr-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.pr-modal-packaging-detail-table .pr-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.pr-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.pr-modal-detail-table-container--dropdown-open .pr-modal-detail-table {
  overflow: visible;
}

.pr-modal-detail-table-container--dropdown-open .pr-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.pr-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pr-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.pr-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.pr-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.pr-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.pr-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.pr-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.pr-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.pr-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.pr-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.pr-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.pr-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.pr-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.pr-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.pr-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.pr-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.pr-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.pr-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pr-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.pr-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.pr-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-item:hover {
  background-color: transparent;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-item--placeholder {
  display: none;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-code,
.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-name,
.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-separator {
  color: #555555;
}

.pr-modal-handling-product-dropdown-content--view-only .pr-modal-handling-product-check {
  color: #888888;
}

.pr-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.pr-modal-handling-product-separator {
  color: #999999;
}

.pr-modal-handling-product-name {
  color: #333333;
}

.pr-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.pr-modal-handling-product-item--placeholder {
  cursor: default;
}

.pr-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.pr-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.pr-modal-detail-table td:has(.pr-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.pr-modal-detail-table td .pr-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.pr-modal-detail-table td .pr-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.pr-modal-detail-table td .pr-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.pr-modal-detail-table td .pr-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.pr-modal-detail-table td .pr-modal-handling-product-input--display,
.pr-modal-detail-table td .pr-modal-handling-product-input--display:focus,
.pr-modal-detail-table td .pr-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display,
.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display:focus,
.pr-modal-detail-table-container .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display:focus,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover td .pr-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.pr-modal-detail-table td .pr-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.pr-modal-detail-table td .pr-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.pr-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.pr-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.pr-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.pr-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-table-text-icon-btn--filled:not(.pr-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.pr-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.pr-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.pr-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.pr-modal-table-text-icon-btn--display.pr-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.pr-modal-table-text-icon-btn--display.pr-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-table-text-icon-btn--display.pr-modal-table-text-icon-btn--external.pr-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.pr-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.pr-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.pr-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.pr-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.pr-modal-serial-assignment-btn {
  width: 10.625rem;
}

.pr-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.pr-modal-batch-assignment-btn--filled .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.pr-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.pr-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.pr-modal-batch-assignment-btn--display .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-batch-assignment-btn--display.pr-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.pr-modal-batch-assignment-btn--display.pr-modal-batch-assignment-btn--filled .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.pr-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.pr-modal-secured-qty-btn.pr-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.pr-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.pr-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.pr-modal-secured-qty-btn--grey .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.pr-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.pr-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.pr-modal-batch-assignment-btn--partial .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.pr-modal-batch-assignment-btn--display.pr-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.pr-modal-batch-assignment-btn--display.pr-modal-batch-assignment-btn--partial .pr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.pr-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.pr-modal-secured-qty-modal .pr-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.pr-modal-secured-qty-modal .pr-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.pr-modal-secured-qty-modal.pr-modal-batch-assignment-modal--display .pr-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.pr-modal-secured-qty-modal .pr-modal-item-text-content {
  overflow-x: hidden;
}

.pr-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.pr-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.pr-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.pr-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.pr-modal-batch-assignment-modal--display .pr-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.pr-modal-batch-assignment-modal--display .pr-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.pr-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.pr-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.pr-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.pr-modal-secured-qty-lock-btn--open .pr-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.pr-modal-secured-qty-lock-btn--locked .pr-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.pr-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.pr-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.pr-modal-batch-assignment-modal .pr-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.pr-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.pr-modal-batch-assignment-modal .pr-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.pr-modal-batch-assignment-modal .pr-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.pr-modal-batch-assignment-modal.pr-modal-batch-assignment-modal--display .pr-modal-item-text-info {
  background-color: #F2F8EA;
}

.pr-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.pr-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.pr-modal-batch-assignment-info-group {
  flex: 1 1;
}

.pr-modal-batch-assignment-info-group .pr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.pr-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.pr-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pr-modal-batch-assignment-table-section .pr-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.pr-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.pr-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.pr-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.pr-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.pr-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.pr-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pr-modal-batch-assignment-table th,
.pr-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.pr-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.pr-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.pr-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.pr-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.pr-modal-batch-assignment-table tbody td:has(.pr-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.pr-modal-batch-assignment-table tbody td:has(.pr-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.pr-modal-batch-assignment-table tbody td:nth-child(2),
.pr-modal-batch-assignment-table tbody td:nth-child(3),
.pr-modal-batch-assignment-table tbody td:nth-child(4),
.pr-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.pr-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.pr-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.pr-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pr-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.pr-modal-batch-assignment-modal--display .pr-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.pr-modal-batch-assignment-modal--display .pr-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.pr-modal-batch-assignment-modal--display .pr-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-batch-assignment-modal--display .pr-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.pr-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.pr-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.pr-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.pr-modal-batch-assignment-table .pr-modal-placeholder-text {
  color: #CCCCCC;
}

.pr-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.pr-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.pr-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.pr-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.pr-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.pr-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.pr-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.pr-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.pr-modal-batch-assignment-table th.batch-table-frozen-batch,
table.pr-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.pr-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.pr-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.pr-modal-batch-assignment-table td.batch-table-frozen-batch,
table.pr-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.pr-modal-batch-assignment-table th.batch-table-frozen-batch,
table.pr-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.pr-modal-batch-assignment-table th.batch-table-frozen-assign,
table.pr-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.pr-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.pr-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.pr-modal-item-text-info {
  margin-bottom: 1rem;
}

.pr-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.pr-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.pr-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.pr-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.pr-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.pr-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.pr-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.pr-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-item-text-modal .modal-header .modal-title,
.pr-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.pr-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.pr-modal-item-text-label--display {
  color: #333333;
}

.pr-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.pr-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.pr-modal-item-text-modal .pr-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.pr-modal-item-text-modal .pr-modal-item-text-textarea-wrapper .pr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.pr-modal-item-text-textarea {
  overflow-y: auto !important;
}

.pr-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.pr-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.pr-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.pr-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.pr-modal-add-do-item-modal .pr-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.pr-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.pr-modal-add-do-item-dropdown-section .pr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.pr-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pr-modal-add-do-item-table-section .pr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.pr-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.pr-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.pr-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.pr-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.pr-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.pr-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.pr-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.pr-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.pr-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.pr-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.pr-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.pr-modal-detail-table td:first-child .pr-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.pr-modal-detail-table td:first-child .pr-modal-partner-type-input {
  padding-left: 0.625rem;
}

.pr-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.pr-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.pr-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.pr-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.pr-modal-partner-type-dropdown--display .pr-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.pr-modal-partner-type-dropdown-content--display .pr-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-partner-type-dropdown-content--display .pr-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.pr-modal-partner-type-dropdown-content--display .pr-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-partner-type-dropdown-content--display .pr-modal-partner-type-check {
  color: #999999 !important;
}

.pr-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.pr-modal-partner-type-dropdown--display .pr-modal-partner-type-value {
  color: #555555;
}

.pr-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.pr-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.pr-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.pr-modal-partner-type-item--placeholder {
  cursor: default;
}

.pr-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.pr-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.pr-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.pr-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.pr-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.pr-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.pr-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.pr-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.pr-modal-partner-id-dropdown--display .pr-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-code,
.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-name,
.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-separator {
  color: #999999 !important;
}

.pr-modal-partner-id-dropdown-content--display .pr-modal-partner-id-check {
  color: #999999 !important;
}

.pr-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.pr-modal-partner-id-dropdown--display .pr-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.pr-modal-detail-table tbody tr:hover .pr-modal-partner-type-dropdown--display .pr-modal-partner-type-input-wrapper,
.pr-modal-detail-table tbody tr:hover .pr-modal-partner-id-dropdown--display .pr-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .pr-modal-partner-type-dropdown--display .pr-modal-partner-type-input-wrapper,
.pr-modal-detail-table-container--external .pr-modal-detail-table tbody tr:hover .pr-modal-partner-id-dropdown--display .pr-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.pr-modal-partner-type-arrow--external {
  visibility: hidden;
}

.pr-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.pr-modal-partner-type-dropdown--external .pr-modal-partner-type-value {
  color: #555555;
}

.pr-modal-partner-id-dropdown--external .pr-modal-partner-id-value {
  color: #555555;
}

.pr-modal-detail-table-container--external .pr-modal-detail-table td.pr-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.pr-modal-partner-header-section--external .pr-modal-form-input--display {
  color: #555555;
}

.pr-modal-detail-table td.pr-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.pr-modal-tab-content--display .pr-modal-detail-table td.pr-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.pr-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.pr-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.pr-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.pr-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.pr-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.pr-modal-partner-id-item--placeholder {
  cursor: default;
}

.pr-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.pr-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.pr-modal-partner-id-separator {
  color: #999999;
}

.pr-modal-partner-id-name {
  color: #666666;
}

.pr-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.pr-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.pr-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.pr-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.pr-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.pr-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.pr-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.pr-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.pr-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.pr-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.pr-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.pr-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.pr-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.pr-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.pr-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.pr-modal-data-flow-stage--completed .pr-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.pr-modal-data-flow-stage--active .pr-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.pr-modal-data-flow-stage--completed .pr-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-data-flow-stage--active .pr-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.pr-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.pr-modal-data-flow-stage--completed .pr-modal-data-flow-stage-label {
  color: #138B4C;
}

.pr-modal-data-flow-stage--active .pr-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.pr-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.pr-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.pr-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.pr-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.pr-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.pr-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.pr-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.pr-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.pr-modal-data-flow-document--active .pr-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.pr-modal-data-flow-document-fold {
  display: none;
}

.pr-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.pr-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.pr-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.pr-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.pr-modal-data-flow-document-icon-wrapper--active .pr-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.pr-modal-data-flow-document--active .pr-modal-data-flow-document-title {
  color: #138B4C;
}

.pr-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.pr-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.pr-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.pr-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.pr-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.pr-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.pr-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.pr-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.pr-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pr-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.pr-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.pr-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.pr-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.pr-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.pr-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.pr-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.pr-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.pr-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.pr-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.pr-modal-terms-area-button .pr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.pr-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.pr-modal-tab-content--display .pr-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.pr-modal-tab-content--display .pr-modal-terms-area-button .pr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.pr-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.pr-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.pr-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.pr-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.pr-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.pr-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.pr-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.pr-modal-data-flow-2-row {
  display: flex;
}

.pr-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pr-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.pr-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.pr-modal-data-flow-2-row--content .pr-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.pr-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.pr-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.pr-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.pr-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-label {
  color: #333333;
}

.pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage-label {
  color: #999999;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--completed .pr-modal-data-flow-2-stage-label {
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--active .pr-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.pr-modal-tab-content--display .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.pr-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.pr-modal-data-flow-2-row--content .pr-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.pr-modal-data-flow-2-row--content .pr-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pr-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pr-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.pr-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.pr-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.pr-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.pr-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.pr-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.pr-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.pr-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-title,
.pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-title {
  color: #333333;
}

.pr-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.pr-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.pr-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.pr-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-title {
  color: #888888;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-title,
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-title {
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--completed .pr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--active .pr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-date {
  color: #333333;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.pr-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.pr-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.pr-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.pr-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.pr-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.pr-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.pr-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.pr-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.pr-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.pr-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.pr-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.pr-modal-data-flow-2-grid--external .pr-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.pr-modal-data-flow-2-grid--external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell {
  border-bottom: none;
}

.pr-modal-data-flow-2-grid--external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.pr-modal-data-flow-2-grid--external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell--label::after {
  display: none;
}

.pr-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.pr-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.pr-modal-data-flow-2-row--content-top .pr-modal-data-flow-2-document--buyer.pr-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.pr-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.pr-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.pr-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.pr-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.pr-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.pr-modal-data-flow-2-stage--external-completed .pr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.pr-modal-data-flow-2-stage--external-active .pr-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.pr-modal-data-flow-2-stage--external-completed .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.pr-modal-data-flow-2-stage--external-active .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.pr-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.pr-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.pr-modal-data-flow-2-document--external .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.pr-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.pr-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.pr-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.pr-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.pr-modal-data-flow-2-document--external .pr-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.pr-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.pr-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.pr-modal-data-flow-2-document--supplier .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.pr-modal-data-flow-2-document--supplier .pr-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.pr-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.pr-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.pr-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.pr-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier .pr-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier .pr-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-completed .pr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--supplier-active .pr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.pr-modal-tab-content--data-flow-2-external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.pr-modal-tab-content--data-flow-2-external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external .pr-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external .pr-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.pr-modal-tab-content--display.pr-modal-tab-content--data-flow-2-external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.pr-modal-tab-content--display.pr-modal-tab-content--data-flow-2-external .pr-modal-data-flow-2-row--header .pr-modal-data-flow-2-cell:has(.pr-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-circle,
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external-completed .pr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external-active .pr-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-icon,
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external-completed .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external-active .pr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-stage--external .pr-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-completed .pr-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.pr-modal-tab-content--display .pr-modal-data-flow-2-document--external-active .pr-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.pr-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.pr-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.pr-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.pr-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.pr-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.pr-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.pr-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.pr-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pr-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.pr-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.pr-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.pr-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.pr-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.pr-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.pr-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.pr-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.pr-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.pr-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.pr-modal-milestone-date-value {
  color: #666666;
}

.pr-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.pr-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.pr-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.pr-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.pr-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.pr-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.pr-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.pr-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.pr-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.pr-modal-activity-item--display .pr-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.pr-modal-calendar-milestones .pr-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.pr-modal-calendar-milestones .pr-modal-activity-user:hover {
  text-decoration: none;
}

.pr-modal-calendar-milestones .pr-modal-activity-item--display .pr-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.pr-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pr-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pr-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.pr-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.pr-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-calendar-nav-btn:hover .pr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.pr-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.pr-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.pr-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.pr-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.pr-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.pr-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.pr-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.pr-modal-calendar-view-mode-btn--active + .pr-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.pr-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pr-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.pr-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.pr-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.pr-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.pr-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.pr-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.pr-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.pr-modal-calendar-grid-cell:nth-child(7n-1),
.pr-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.pr-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.pr-modal-calendar-grid-day-name:nth-child(6),
.pr-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.pr-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.pr-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.pr-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.pr-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.pr-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.pr-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.pr-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.pr-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.pr-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pr-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.pr-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pr-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.pr-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.pr-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.pr-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pr-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.pr-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.pr-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.pr-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.pr-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.pr-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.pr-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.pr-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.pr-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.pr-modal-calendar-weekly-day-column:nth-child(6),
.pr-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.pr-modal-calendar-weekly-day-header:nth-child(6),
.pr-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.pr-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.pr-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.pr-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.pr-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.pr-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.pr-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.pr-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.pr-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.pr-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pr-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.pr-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.pr-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.pr-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.pr-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.pr-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.pr-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.pr-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.pr-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.pr-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.pr-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.pr-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.pr-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.pr-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.pr-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.pr-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-view {
  border-color: #D0D0D0;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-view-mode-btn--active + .pr-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-milestones-header {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-view-title {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-grid-day-name {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-grid-cell-day {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-weekly-day-name {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-weekly-day-date {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-weekly-event-title {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-daily-header {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-daily-hour-label {
  color: #666666;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-daily-event-title {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar .pr-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.pr-modal-calendar-milestones-header--external {
  color: #333333;
}

.pr-modal-calendar-nav-btn--external .pr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.pr-modal-calendar-nav-btn--external:hover .pr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.pr-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.pr-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.pr-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.pr-modal-calendar-view-mode-btn--active-external + .pr-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.pr-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.pr-modal-tab-content--calendar-external .pr-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.pr-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.pr-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.pr-modal-activity-type--external {
  color: #333333;
}

.pr-modal-activity-user--external {
  color: #E67E22;
}

.pr-modal-activity-user--external:hover {
  color: #D35400;
}

.pr-modal-calendar-milestones .pr-modal-activity-user--external {
  color: #E67E22;
}

.pr-modal-calendar-milestones .pr-modal-activity-user--external:hover {
  color: #D35400;
}

.pr-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.pr-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.pr-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.pr-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.pr-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.pr-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.pr-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.pr-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.pr-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.pr-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.pr-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.pr-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.pr-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-milestones-header--external {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-view-mode-btn--active-external + .pr-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-calendar-nav-btn--external .pr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-activity-type--external {
  color: #333333;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-activity-user--external {
  color: #E67E22;
}

.pr-modal-tab-content--display.pr-modal-tab-content--calendar-external .pr-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.pr-modal-input--error,
.pr-modal-form-input.pr-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.pr-modal-dropdown--error .pr-modal-delivery-type-input,
.pr-modal-dropdown--error .pr-modal-organization-input,
.pr-modal-dropdown--error .pr-modal-sales-structure-input,
.pr-modal-dropdown--error .pr-modal-sales-channel-input,
.pr-modal-dropdown--error .pr-modal-sales-unit-input,
.pr-modal-dropdown--error .pr-modal-territory-input,
.pr-modal-dropdown--error .pr-modal-sales-office-input,
.pr-modal-dropdown--error .pr-modal-sold-to-party-input,
.pr-modal-dropdown--error .pr-modal-deliver-to-party-input,
.pr-modal-dropdown--error .pr-modal-attention-to-deliver-input,
.pr-modal-dropdown--error .pr-modal-incoterm-input,
.pr-modal-dropdown--error .pr-modal-delivery-point-input,
.pr-modal-dropdown--error .pr-modal-shipping-point-input,
.pr-modal-dropdown--error .pr-modal-sales-order-input,
.pr-modal-dropdown--error .pr-modal-sales-team-input,
.pr-modal-dropdown--error .pr-modal-sales-person-input,
.pr-modal-dropdown--error .pr-modal-delivery-priority-input,
.pr-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.pr-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.pr-modal-date-picker-wrapper.pr-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.pr-modal-custom-dropdown {
  position: relative;
}

.pr-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.pr-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.pr-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.pr-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-check {
  color: #999999 !important;
}

.pr-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.pr-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.pr-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.pr-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.pr-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pr-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.pr-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.pr-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.pr-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.pr-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.pr-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.pr-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.pr-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pr-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.pr-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.pr-modal-setting-form-label--display {
  color: #333333;
}

.pr-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.pr-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-setting-dropdown--active .pr-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.pr-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.pr-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.pr-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.pr-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.pr-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.pr-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.pr-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-setting-dropdown-icon.pr-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.pr-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.pr-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.pr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.pr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.pr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.pr-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.pr-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.pr-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.pr-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.pr-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.pr-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.pr-modal-setting-dropdown-item-separator {
  color: #999999;
}

.pr-modal-setting-dropdown-item-name {
  color: #333333;
}

.pr-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.pr-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.pr-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.pr-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.pr-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.pr-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.pr-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.pr-modal-setting-tab-content--print .pr-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.pr-modal-setting-tab-content--print .pr-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pr-modal-setting-tab-content--print .pr-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.pr-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.pr-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.pr-modal-setting-table thead tr {
  height: 2.25rem;
}

.pr-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.pr-modal-setting-table tbody tr {
  height: 2.25rem;
}

.pr-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.pr-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.pr-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.pr-modal-setting-table--display thead th:nth-child(2),
.pr-modal-setting-table--display thead th:nth-child(3),
.pr-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.pr-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.pr-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.pr-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.pr-modal-setting-table--transfer.pr-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.pr-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.pr-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pr-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.pr-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.pr-modal-setting-table--transfer:not(.pr-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.pr-modal-setting-table--transfer:not(.pr-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.pr-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.pr-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.pr-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.pr-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.pr-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.pr-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.pr-modal-tab-content--display .pr-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.pr-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.pr-modal-tab-content--display .pr-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.pr-modal-attribute-header-section--external .pr-modal-form-input:focus {
  border-color: #F5B041;
}

.pr-modal-attribute-header-section--external .pr-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.pr-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.pr-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.pr-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.pr-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.pr-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.pr-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.pr-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.pr-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.pr-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.pr-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.pr-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.pr-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.pr-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.pr-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.pr-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.pr-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.pr-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.pr-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.pr-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.pr-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.pr-modal-available-qty-tree-level {
  position: relative;
}

.pr-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.pr-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.pr-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.pr-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.pr-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.pr-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.pr-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.pr-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.pr-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.pr-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.pr-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.pr-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.pr-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.pr-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.pr-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.pr-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.pr-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.pr-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.pr-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.pr-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.pr-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.pr-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.pr-modal-available-qty-tree-batch-header .pr-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.pr-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.pr-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.pr-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.pr-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.pr-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.pr-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.pr-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.pr-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.pr-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.pr-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.pr-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.pr-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.pr-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.pr-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.pr-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.pr-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.pr-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.pr-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.pr-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.pr-modal-activity-type--clickable.pr-modal-activity-type--display:hover {
  color: #138B4C;
}

.pr-modal-activity-type--clickable.pr-modal-activity-type--external:hover {
  color: #E67E00;
}

.pr-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.pr-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.pr-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.pr-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.pr-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.pr-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.pr-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pr-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.pr-modal-activity-detail-content .pr-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.pr-modal-activity-detail-modal .pr-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.pr-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.pr-modal-activity-detail-modal .pr-modal-tabs--display .pr-modal-tab {
  color: #333333;
}

.pr-modal-activity-detail-modal .pr-modal-tabs--display .pr-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.pr-modal-activity-detail-modal .pr-modal-tabs--external.pr-modal-tabs--display .pr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.pr-modal-activity-detail-tab-content--general .pr-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.pr-modal-activity-detail-content .pr-modal-milestone-status {
  margin: 0;
}

.pr-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.pr-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.pr-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.pr-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.pr-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.pr-modal-activity-detail-pic-chat-wrapper:hover .pr-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.pr-modal-activity-detail-pic-chat-wrapper:hover .pr-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.pr-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.pr-modal-activity-detail-pic--clickable:hover .pr-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.pr-modal-activity-detail-content--external .pr-modal-activity-detail-pic {
  color: #E67E22;
}

.pr-modal-activity-detail-content--external .pr-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.pr-modal-activity-detail-content--external .pr-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.pr-modal-activity-detail-content--external .pr-modal-activity-detail-pic--clickable:hover .pr-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.pr-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.pr-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.pr-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.pr-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.pr-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.pr-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.pr-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.pr-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.pr-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.pr-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.pr-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pr-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.pr-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.pr-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.pr-modal-activity-detail-content--external .pr-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.pr-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.pr-modal-activity-detail-content--external .pr-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.pr-modal-activity-detail-content--external .pr-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.pr-modal-activity-detail-content--external .pr-modal-activity-detail-document-name {
  color: #E67E22;
}

.pr-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.pr-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.pr-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.pr-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.pr-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.pr-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.pr-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.pr-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.pr-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.pr-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.pr-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.pr-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.pr-modal-activity-detail-tab-content--general {
  padding: 0;
}

.pr-modal-activity-detail-tab-content--general .pr-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.pr-modal-activity-detail-tab-content--general > div:not(.pr-modal-item-text-info) {
  padding: 0 1.5rem;
}

.pr-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.pr-modal-activity-detail-tab-content--attachment,
.pr-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.pr-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.pr-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.pr-modal-activity-detail-tab-content--attachment .pr-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.pr-modal-activity-detail-tab-content--attachment .pr-modal-batch-assignment-table-section > .pr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.pr-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.pr-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.pr-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.pr-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.pr-modal-activity-detail-content--external .pr-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.pr-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.pr-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.pr-modal-activity-detail-content--external .pr-modal-item-text-info {
  background-color: #FEF5E7;
}

.pr-modal-activity-detail-content--external .pr-modal-task-notes-section {
  background-color: #FEF5E7;
}

.pr-modal-task-notes-section .pr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.pr-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.pr-modal-task-notes-textarea.pr-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.pr-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.pr-modal-task-chat-section > .pr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.pr-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.pr-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.pr-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pr-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pr-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.pr-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.pr-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.pr-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.pr-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.pr-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.pr-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.pr-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.pr-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.pr-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.pr-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.pr-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.pr-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.pr-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.pr-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.pr-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.pr-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.pr-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.pr-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.pr-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.pr-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.pr-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.pr-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.pr-modal-activity-detail-content--external .pr-modal-task-chat-avatar {
  background-color: #F5B041;
}

.pr-modal-activity-detail-content--external .pr-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.pr-modal-activity-detail-content--external .pr-modal-task-chat-reply-btn {
  color: #E67E22;
}

.pr-modal-activity-detail-content--external .pr-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.pr-modal-dropdown--display .pr-modal-dropdown-item,
.pr-modal-dropdown--display [class*="-item"],
.pr-modal-tags-dropdown--display .pr-modal-tags-dropdown-item,
.pr-modal-baseline-date-dropdown--display .pr-modal-baseline-date-item,
.pr-modal-reference-type-dropdown--display .pr-modal-reference-type-item,
.pr-modal-delivery-priority-dropdown--display .pr-modal-delivery-priority-item,
.pr-modal-organization-dropdown--display .pr-modal-organization-item,
.pr-modal-sales-structure-dropdown--display .pr-modal-sales-structure-item,
.pr-modal-delivery-type-dropdown--display .pr-modal-delivery-type-item,
.pr-modal-sales-channel-dropdown--display .pr-modal-sales-channel-item,
.pr-modal-sales-unit-dropdown--display .pr-modal-sales-unit-item,
.pr-modal-sold-to-party-dropdown--display .pr-modal-sold-to-party-item,
.pr-modal-deliver-to-party-dropdown--display .pr-modal-deliver-to-party-item,
.pr-modal-attention-to-deliver-dropdown--display .pr-modal-attention-to-deliver-item,
.pr-modal-incoterm-dropdown--display .pr-modal-incoterm-item,
.pr-modal-delivery-point-dropdown--display .pr-modal-delivery-point-item,
.pr-modal-shipping-point-dropdown--display .pr-modal-shipping-point-item,
.pr-modal-sales-order-dropdown--display .pr-modal-sales-order-item,
.pr-modal-sales-person-dropdown--display .pr-modal-sales-person-item,
.pr-modal-sales-team-dropdown--display .pr-modal-sales-team-item,
.pr-modal-territory-dropdown--display .pr-modal-territory-item,
.pr-modal-sales-office-dropdown--display .pr-modal-sales-office-item,
.pr-modal-status-dropdown--display .pr-modal-status-item,
.pr-modal-handling-product-dropdown--display .pr-modal-handling-product-item,
.pr-modal-child-uom-dropdown--display .pr-modal-child-uom-item,
.pr-modal-partner-type-dropdown--display .pr-modal-partner-type-item,
.pr-modal-partner-id-dropdown--display .pr-modal-partner-id-item,
.pr-modal-custom-dropdown--display .pr-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.pr-modal-dropdown--display .pr-modal-dropdown-item:hover,
.pr-modal-dropdown--display [class*="-item"]:hover,
.pr-modal-tags-dropdown--display .pr-modal-tags-dropdown-item:hover,
.pr-modal-baseline-date-dropdown--display .pr-modal-baseline-date-item:hover,
.pr-modal-reference-type-dropdown--display .pr-modal-reference-type-item:hover,
.pr-modal-delivery-priority-dropdown--display .pr-modal-delivery-priority-item:hover,
.pr-modal-organization-dropdown--display .pr-modal-organization-item:hover,
.pr-modal-sales-structure-dropdown--display .pr-modal-sales-structure-item:hover,
.pr-modal-delivery-type-dropdown--display .pr-modal-delivery-type-item:hover,
.pr-modal-sales-channel-dropdown--display .pr-modal-sales-channel-item:hover,
.pr-modal-sales-unit-dropdown--display .pr-modal-sales-unit-item:hover,
.pr-modal-sold-to-party-dropdown--display .pr-modal-sold-to-party-item:hover,
.pr-modal-deliver-to-party-dropdown--display .pr-modal-deliver-to-party-item:hover,
.pr-modal-attention-to-deliver-dropdown--display .pr-modal-attention-to-deliver-item:hover,
.pr-modal-incoterm-dropdown--display .pr-modal-incoterm-item:hover,
.pr-modal-delivery-point-dropdown--display .pr-modal-delivery-point-item:hover,
.pr-modal-shipping-point-dropdown--display .pr-modal-shipping-point-item:hover,
.pr-modal-sales-order-dropdown--display .pr-modal-sales-order-item:hover,
.pr-modal-sales-person-dropdown--display .pr-modal-sales-person-item:hover,
.pr-modal-sales-team-dropdown--display .pr-modal-sales-team-item:hover,
.pr-modal-territory-dropdown--display .pr-modal-territory-item:hover,
.pr-modal-sales-office-dropdown--display .pr-modal-sales-office-item:hover,
.pr-modal-status-dropdown--display .pr-modal-status-item:hover,
.pr-modal-handling-product-dropdown--display .pr-modal-handling-product-item:hover,
.pr-modal-child-uom-dropdown--display .pr-modal-child-uom-item:hover,
.pr-modal-partner-type-dropdown--display .pr-modal-partner-type-item:hover,
.pr-modal-partner-id-dropdown--display .pr-modal-partner-id-item:hover,
.pr-modal-custom-dropdown--display .pr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.pr-modal-dropdown--display [class*="-item--selected"],
.pr-modal-tags-dropdown--display .pr-modal-tags-dropdown-item--selected,
.pr-modal-baseline-date-dropdown--display .pr-modal-baseline-date-item--selected,
.pr-modal-reference-type-dropdown--display .pr-modal-reference-type-item--selected,
.pr-modal-delivery-priority-dropdown--display .pr-modal-delivery-priority-item--selected,
.pr-modal-organization-dropdown--display .pr-modal-organization-item--selected,
.pr-modal-sales-structure-dropdown--display .pr-modal-sales-structure-item--selected,
.pr-modal-delivery-type-dropdown--display .pr-modal-delivery-type-item--selected,
.pr-modal-sales-channel-dropdown--display .pr-modal-sales-channel-item--selected,
.pr-modal-sales-unit-dropdown--display .pr-modal-sales-unit-item--selected,
.pr-modal-sold-to-party-dropdown--display .pr-modal-sold-to-party-item--selected,
.pr-modal-deliver-to-party-dropdown--display .pr-modal-deliver-to-party-item--selected,
.pr-modal-attention-to-deliver-dropdown--display .pr-modal-attention-to-deliver-item--selected,
.pr-modal-incoterm-dropdown--display .pr-modal-incoterm-item--selected,
.pr-modal-delivery-point-dropdown--display .pr-modal-delivery-point-item--selected,
.pr-modal-shipping-point-dropdown--display .pr-modal-shipping-point-item--selected,
.pr-modal-sales-order-dropdown--display .pr-modal-sales-order-item--selected,
.pr-modal-sales-person-dropdown--display .pr-modal-sales-person-item--selected,
.pr-modal-sales-team-dropdown--display .pr-modal-sales-team-item--selected,
.pr-modal-territory-dropdown--display .pr-modal-territory-item--selected,
.pr-modal-sales-office-dropdown--display .pr-modal-sales-office-item--selected,
.pr-modal-status-dropdown--display .pr-modal-status-item--selected,
.pr-modal-handling-product-dropdown--display .pr-modal-handling-product-item--selected,
.pr-modal-child-uom-dropdown--display .pr-modal-child-uom-item--selected,
.pr-modal-partner-type-dropdown--display .pr-modal-partner-type-item--selected,
.pr-modal-partner-id-dropdown--display .pr-modal-partner-id-item--selected,
.pr-modal-custom-dropdown--display .pr-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.pr-modal-dropdown--display [class*="-check"],
.pr-modal-dropdown--display .pr-modal-dropdown-check,
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.pr-modal-dropdown--display [class*="-item-code"],
.pr-modal-dropdown--display [class*="-item-name"],
.pr-modal-dropdown--display [class*="-item-content"],
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-code,
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-name,
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-item,
.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.pr-modal-sold-to-party-dropdown-content--display .pr-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.pr-modal-tags-dropdown--display .pr-modal-tags-item,
.pr-modal-tags-dropdown--display .pr-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-tags-dropdown--display .pr-modal-tags-item:hover {
  background-color: transparent !important;
}

.pr-modal-tags-dropdown--display .pr-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.pr-modal-tags-dropdown--display .pr-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item,
.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.pr-modal-custom-dropdown-list--display .pr-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* Scoring Tab Styles */
.pr-modal-scoring-container {
  padding: 1rem;
}

.pr-modal-scoring-section {
  margin-bottom: 1.5rem;
}

.pr-modal-scoring-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem 0.25rem 0 0;
  font-weight: 600;
  font-size: 0.8125rem;
}

.pr-modal-scoring-section-weight {
  font-size: 0.75rem;
  color: #666;
}

.pr-modal-scoring-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.pr-modal-scoring-table th {
  background-color: #fafafa;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid #e0e0e0;
  font-weight: 600;
  color: #333;
}

.pr-modal-scoring-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

.pr-modal-scoring-table tr:hover {
  background-color: #f9f9f9;
}

.pr-modal-scoring-input {
  width: 3.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  text-align: center;
}

.pr-modal-scoring-input:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

.pr-modal-scoring-progress-bar {
  width: 100%;
  height: 0.375rem;
  background-color: #e0e0e0;
  border-radius: 0.1875rem;
  overflow: hidden;
}

.pr-modal-scoring-progress-fill {
  height: 100%;
  border-radius: 0.1875rem;
  transition: width 0.3s ease;
}

.pr-modal-scoring-summary {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.pr-modal-scoring-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}

.pr-modal-scoring-summary-label {
  font-size: 0.6875rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.pr-modal-scoring-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.pr-modal-scoring-badge {
  display: inline-block;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.pr-modal-scoring-remarks {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  resize: none;
}

.pr-modal-scoring-remarks:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

/* ===== from pages/Sales/Quotation/Quotation.css ===== */
/* Quotation Wrapper - prevent page scroll */
.quotation-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Quotation Container */
.quotation-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.quotation-header {
  margin-bottom: 0;
}

.quotation-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Quotation Control - Exact copy of third-nav-control */
.quotation-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.quotation-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.quotation-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.quotation-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.quotation-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.quotation-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.quotation-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.quotation-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.quotation-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.quotation-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.quotation-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.quotation-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.quotation-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.quotation-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.quotation-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.quotation-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.quotation-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.quotation-layout-dropdown-item:last-child {
  border-bottom: none;
}

.quotation-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.quotation-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.quotation-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.quotation-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.quotation-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.quotation-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.quotation-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.quotation-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quotation-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.quotation-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.quotation-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.quotation-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.quotation-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.quotation-filter-parameter-wrapper {
  position: relative;
}

.quotation-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.quotation-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.quotation-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.quotation-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quotation-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.quotation-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.quotation-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.quotation-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.quotation-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.quotation-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.quotation-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.quotation-filter-close:hover {
  background-color: #f0f0f0;
}

.quotation-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.quotation-filter-group {
  margin-bottom: 1rem;
}

.quotation-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.quotation-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.quotation-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.quotation-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.quotation-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.quotation-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.quotation-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.quotation-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.quotation-filter-org-container {
  flex: 1 1;
  position: relative;
}

.quotation-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.quotation-filter-org-input:hover {
  border-color: #C2DE54;
}

.quotation-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.quotation-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.quotation-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.quotation-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.quotation-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.quotation-filter-tag-remove:hover {
  color: #000;
}

.quotation-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.quotation-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.quotation-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.quotation-filter-org-item:hover {
  background-color: #f5f5f5;
}

.quotation-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.quotation-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.quotation-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.quotation-filter-org-code {
  font-weight: 600;
  color: #333;
}

.quotation-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.quotation-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.quotation-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.quotation-type-dropdown-item:last-child {
  border-bottom: none;
}

.quotation-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.quotation-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.quotation-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.quotation-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Quotation Table */
.quotation-table {
  animation: quotationFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes quotationFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quotation-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .quotation-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .quotation-type-dropdown {
    min-width: 11.25rem;
  }

  .quotation-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Quotation/QuotationModal.css ===== */
/* Delivery Order Modal Specific Styles */
.quotation-modal {
  overscroll-behavior: contain;
}

/* ==========================================
   PAGE MODE — render modal content inline, no overlay
   Fixed height chain: container (calc) → column (100%) → main (100%) → inner (100%) → wrapper (100%) → backdrop (100%) → modal (100%)
   ========================================== */
.qt-page-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-align: left;
}

.qt-page-wrapper .modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  z-index: auto !important;
  animation: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

.qt-page-wrapper .modal-backdrop .modal,
.qt-page-wrapper .modal-backdrop .modal.modal--fullscreen {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.quotation-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.qt-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.qt-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 16.25rem;
}

.qt-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.qt-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.qt-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.qt-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.qt-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.qt-modal-pov-button--external.qt-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.qt-modal-pov-button--external .qt-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-pov-button--external .qt-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.qt-modal-pov-caret--open {
  transform: rotate(180deg);
}

.qt-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 16.25rem;
  margin-top: 2px;
  overflow: hidden;
}

.qt-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.qt-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.qt-modal-pov-dropdown-item span {
  flex: 0 0 auto;
}

.qt-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.qt-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.qt-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.qt-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.qt-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.qt-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.qt-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.qt-modal-tabs--display .qt-modal-tab {
  color: #666666;
}

.qt-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.qt-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.qt-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.qt-modal-tabs--display .qt-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.qt-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.qt-modal-tabs--external .qt-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.qt-modal-tabs--external.qt-modal-tabs--display .qt-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.qt-modal-tabs--external .qt-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.qt-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.qt-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.qt-modal-action-button span {
  white-space: nowrap;
}

.qt-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.qt-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.qt-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.qt-modal-action-button--disabled .qt-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.qt-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.qt-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.qt-modal-left-area--full .qt-modal-back-button {
  transition: width 300ms ease;
}

.qt-modal-left-area--full .qt-modal-back-button:hover {
  width: 3.5rem;
}

.qt-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.qt-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.qt-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qt-modal-content--item {
  padding-bottom: 1rem;
}

.qt-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.qt-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.qt-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.qt-modal-attachment-table-container .qt-modal-detail-table thead,
.qt-modal-attachment-table-container .qt-modal-attachment-table thead {
  box-shadow: none !important;
}

.qt-modal-attachment-table-container .qt-modal-detail-table tr,
.qt-modal-attachment-table-container .qt-modal-attachment-table tr {
  box-shadow: none !important;
}

.qt-modal-attachment-table-container .qt-modal-detail-table tbody tr:last-child,
.qt-modal-attachment-table-container .qt-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.qt-modal-attachment-table-container .qt-modal-detail-table tbody tr:last-child td,
.qt-modal-attachment-table-container .qt-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.qt-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.qt-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.qt-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.qt-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.qt-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.qt-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.qt-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.qt-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.qt-modal-attachment-filename--external {
  color: #E67E22;
}

.qt-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.qt-modal-tab-content--display .qt-modal-attachment-filename--external {
  color: #E67E22;
}

.qt-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.qt-modal-attachment-size {
  color: #666666;
}

.qt-modal-attachment-date {
  color: #666666;
}

.qt-modal-attachment-uploadedby {
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.qt-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.qt-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.qt-modal-attachment-browse-btn:focus {
  outline: none;
}

.qt-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.qt-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.qt-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-attachment-browse-btn--disabled .qt-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.qt-modal-tab-content--display .qt-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.qt-modal-tab-content--display .qt-modal-attachment-filename.qt-modal-attachment-filename--external {
  color: #E67E22;
}

.qt-modal-tab-content--display .qt-modal-attachment-type {
  color: #666666;
}

.qt-modal-tab-content--display .qt-modal-attachment-size {
  color: #666666;
}

.qt-modal-tab-content--display .qt-modal-attachment-date {
  color: #666666;
}

.qt-modal-tab-content--display .qt-modal-attachment-uploadedby {
  color: #333333;
}

.qt-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.qt-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.qt-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.qt-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.qt-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.qt-modal-tab-content--display .qt-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.qt-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.qt-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.qt-modal-tab-content--display .qt-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.qt-modal-basic-section--external .qt-modal-form-input:focus {
  border-color: #F5B041;
}

.qt-modal-basic-section--external .qt-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.qt-modal-tab-content--external .qt-modal-form-input:focus,
.qt-modal-tab-content--external .qt-modal-form-textarea:focus,
.qt-modal-tab-content--external .qt-modal-custom-dropdown-input:focus,
.qt-modal-tab-content--external .qt-modal-date-input:focus,
.qt-modal-tab-content--external .qt-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.qt-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.qt-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.qt-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.qt-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.qt-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.qt-modal-tab-content--display .qt-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.qt-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.qt-modal-tab-content--display .qt-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.qt-modal-partner-header-section--external .qt-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.qt-modal-notes-header-section {
  background-color: #FFFFFF;
  margin: 0 -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.qt-modal-tab-content--display .qt-modal-notes-header-section {
  background-color: #FFFFFF;
}

/* Notes Checkbox Styles */
.qt-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.qt-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.qt-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.qt-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.qt-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.qt-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.qt-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.qt-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.qt-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.qt-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.qt-modal-chat-section {
  padding: 1.5rem 0;
}

.qt-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.qt-modal-chat-header h3 {
  margin: 0;
}

.qt-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.qt-modal-chat-new-thread .qt-modal-form-textarea {
  min-height: 5rem;
}

.qt-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.qt-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qt-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.qt-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.qt-modal-chat-message--main {
  background-color: #FAFAFA;
}

.qt-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.qt-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.qt-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.qt-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.qt-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.qt-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.qt-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.qt-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.qt-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.qt-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-chat-user-name {
  color: #333333 !important;
}

.qt-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.qt-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.qt-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.qt-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.qt-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.qt-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.qt-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.qt-modal-chat-reply-btn:hover .qt-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.qt-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.qt-modal-chat-replies .qt-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.qt-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.qt-modal-chat-reply-input .qt-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.qt-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.qt-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.qt-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.qt-modal-tab-content--display .qt-modal-chat-thread {
  border-color: #E5E5E5;
}

.qt-modal-tab-content--display .qt-modal-chat-message--main {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display .qt-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-chat-user-position {
  background-color: #E8F5E9;
}

.qt-modal-tab-content--display .qt-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling — plain layout like Additional/Custom sections (no full-bleed, no extra top padding) */
.qt-modal-notes-header-section--external {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0 0 1.5rem 0;
  border-bottom: none;
}

.qt-modal-tab-content--display .qt-modal-notes-header-section--external {
  background-color: #FFFFFF;
}

.qt-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.qt-modal-notes-header-section--external .qt-modal-form-textarea:focus {
  border-color: #F5B041;
}

.qt-modal-chat-section--external .qt-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.qt-modal-chat-avatar--external {
  background-color: #F5B041;
}

.qt-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.qt-modal-tab-content--display .qt-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-thread {
  border-color: #E5E5E5;
}

.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-message--main {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-user-name {
  color: #333333 !important;
}

.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-user-position {
  background-color: #FDE8D0;
}

.qt-modal-tab-content--display.qt-modal-tab-content--external .qt-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.qt-modal-chat-reply-btn--external {
  color: #E67E22;
}

.qt-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.qt-modal-chat-reply-btn--external .qt-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.qt-modal-chat-reply-btn--external:hover .qt-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.qt-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.qt-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.qt-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.qt-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.qt-modal-chat-textarea-wrapper {
  position: relative;
}

.qt-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.qt-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.qt-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.qt-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.qt-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.qt-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.qt-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qt-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.qt-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.qt-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.qt-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.qt-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.qt-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.qt-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.qt-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.qt-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.qt-modal-tab-content--display .qt-modal-table-empty-state-title {
  color: #666666;
}

.qt-modal-tab-content--display .qt-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.qt-modal-partner-header-section + .qt-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Partner content section - keep overflow hidden, dropdowns use position:fixed */
.qt-modal-partner-header-section + .qt-modal-item-content-section--dropdown-open {
  overflow: hidden;
  z-index: 10;
}

.qt-modal-partner-header-section + .qt-modal-item-content-section .qt-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Partner Table wrapper - keep overflow hidden, dropdowns use position:fixed */
.qt-modal-partner-header-section + .qt-modal-item-content-section .qt-modal-item-table-wrapper--dropdown-open {
  overflow: hidden;
}

/* Partner Table - override min-height to allow shrinking */
.qt-modal-partner-header-section + .qt-modal-item-content-section .qt-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Partner Table container - keep overflow-y auto, dropdowns use position:fixed */
.qt-modal-partner-header-section + .qt-modal-item-content-section .qt-modal-detail-table-container--dropdown-open {
  overflow-y: auto;
}

/* Partner button section - stays at bottom with 16px padding */
.qt-modal-partner-header-section + .qt-modal-item-content-section .qt-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.qt-modal-partner-table-container .qt-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.qt-modal-partner-table-container .qt-modal-partner-table th:last-child,
.qt-modal-partner-table-container .qt-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.qt-modal-detail-table-container--external.qt-modal-partner-table-container .qt-modal-partner-table th:last-child,
.qt-modal-detail-table-container--external.qt-modal-partner-table-container .qt-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.qt-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.qt-modal-item-header-section .qt-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-tab-content--display .qt-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.qt-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.qt-modal-tab-content--display .qt-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.qt-modal-item-header-section--external .qt-modal-form-input:focus {
  border-color: #F5B041;
}

.qt-modal-item-header-section--external .qt-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.qt-modal-detail-subtabs--external .qt-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.qt-modal-detail-subtabs--external .qt-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.qt-modal-detail-subtabs--external .qt-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.qt-modal-tab-content--display .qt-modal-detail-subtabs--external .qt-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.qt-modal-tab-content--display .qt-modal-detail-subtabs--external .qt-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.qt-modal-tab-content.qt-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.qt-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.qt-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.qt-modal-item-table-wrapper .qt-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.qt-modal-item-table-wrapper .qt-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.qt-modal-item-table-wrapper--terms .qt-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.qt-modal-tab-content--external.qt-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.qt-modal-tab-content--external .qt-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-tab-content--external .qt-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-tab-content--external .qt-modal-item-table-wrapper--terms .qt-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables — same flex approach as Internal.
   Content-section: flex column + overflow hidden.
   Table-wrapper: flex 1 (fills remaining after summary).
   Summary: intrinsic height at bottom.
   Only scrollbar is inside the table-container (overflow-y: auto). */

.qt-modal-item-table-wrapper--terms .qt-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.qt-modal-item-table-wrapper--terms .qt-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qt-modal-item-table-wrapper--terms .qt-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #FCFCFC;
}

.qt-modal-item-table-wrapper--terms .qt-modal-detail-table tr {
  height: auto;
}

.qt-modal-item-table-wrapper--terms .qt-modal-detail-table-container .qt-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.qt-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.qt-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.qt-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.qt-modal-volume-input-group .qt-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.qt-modal-volume-input-group .qt-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.qt-modal-volume-input-group .qt-modal-sla-input-wrapper .qt-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.qt-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.qt-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.qt-modal-volume-uom-list--display .qt-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-volume-uom-list--display .qt-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.qt-modal-volume-uom-list--display .qt-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-volume-uom-list--display .qt-modal-volume-uom-check {
  color: #999999 !important;
}

.qt-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.qt-modal-volume-uom-dropdown--display .qt-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.qt-modal-volume-uom-dropdown--display .qt-modal-volume-uom-item:hover {
  background-color: transparent;
}

.qt-modal-volume-uom-dropdown--display .qt-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.qt-modal-volume-uom-dropdown--display .qt-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.qt-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.qt-modal-weight-input-group .qt-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.qt-modal-weight-input-group .qt-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.qt-modal-weight-input-group .qt-modal-sla-input-wrapper .qt-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.qt-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.qt-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-weight-uom-input::placeholder {
  color: #999999;
}

.qt-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.qt-modal-weight-uom-dropdown--display .qt-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.qt-modal-weight-uom-dropdown--display .qt-modal-weight-uom-item:hover {
  background-color: transparent;
}

.qt-modal-weight-uom-dropdown--display .qt-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.qt-modal-weight-uom-dropdown--display .qt-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.qt-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.qt-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.qt-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.qt-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.qt-modal-form-input--display ~ .qt-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.qt-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.qt-modal-form-input--display {
  cursor: default;
}

.qt-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.qt-modal-form-label--display {
  color: #333333 !important;
}

.qt-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.qt-modal-form-label--display .qt-modal-required {
  color: #FF4D4F;
}

.qt-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.qt-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.qt-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.qt-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.qt-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.qt-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.qt-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qt-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.qt-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.qt-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.qt-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.qt-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.qt-modal-sla-spinner-btn:disabled .qt-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.qt-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sla-spinner-btn:hover .qt-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.qt-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.qt-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.qt-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.qt-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.qt-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.qt-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.qt-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.qt-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.qt-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.qt-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.qt-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.qt-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.qt-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.qt-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.qt-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.qt-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.qt-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.qt-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.qt-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.qt-modal-stage-dropdown-input--display .qt-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.qt-modal-stage-dropdown-input--display .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.qt-modal-stage-section {
  width: 25.6%;
  min-width: 19rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.qt-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.qt-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.qt-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.qt-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.qt-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.qt-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.qt-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.qt-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.qt-modal-accordion-header--display {
  color: #333333;
}

.qt-modal-accordion-header--display.qt-modal-accordion-header--active {
  color: #333333;
}

.qt-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.qt-modal-accordion-header--display .qt-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.qt-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.qt-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.qt-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.qt-modal-stage-main-title--display {
  color: #138B4C;
}

.qt-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-stage-title--display {
  color: #333333;
}

.qt-modal-stage-current {
  margin-bottom: 1.875rem;
}

.qt-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.qt-modal-stage-label--display {
  color: #666666;
}

.qt-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-stage-subtitle--display {
  color: #333333;
}

.qt-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.qt-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.qt-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.qt-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.qt-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.qt-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.qt-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.qt-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.qt-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qt-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.qt-modal-download-button:active {
  background-color: #E0E0E0;
}

.qt-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-download-button--display .qt-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.qt-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.qt-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.qt-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.qt-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.qt-modal-timeline-item--display .qt-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.qt-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.qt-modal-timeline-badge--inactive .qt-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.qt-modal-timeline-item--display .qt-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.qt-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.qt-modal-timeline-item--display .qt-modal-timeline-line {
  background-color: #138B4C;
}

.qt-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qt-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.qt-modal-timeline-status--display {
  color: #333333;
}

.qt-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.qt-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.qt-modal-timeline-date--display {
  color: #666666;
}

.qt-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.qt-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.qt-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.qt-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.qt-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.qt-modal-timeline-document--display {
  color: #138B4C;
}

.qt-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.qt-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.qt-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.qt-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.qt-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.qt-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.qt-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.qt-modal-activity-item--display .qt-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.qt-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.qt-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.qt-modal-activity-item--display .qt-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.qt-modal-activity-item--display .qt-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.qt-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.qt-modal-activity-item--display .qt-modal-activity-line {
  background-color: #138B4C;
}

.qt-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.qt-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.qt-modal-activity-type--display {
  color: #333333;
}

.qt-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.qt-modal-activity-header--display {
  color: #666666;
}

.qt-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.qt-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.qt-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.qt-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.qt-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.qt-modal-activity-change--display .qt-modal-activity-field {
  color: #333333;
}

.qt-modal-activity-change--display .qt-modal-activity-new {
  color: #138B4C;
}

.qt-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.qt-modal-activity-date--display {
  color: #666666;
}

.qt-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.qt-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.qt-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.qt-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.qt-modal-activity-more--display {
  color: #138B4C;
}

.qt-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-activity-more--display .qt-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.qt-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.qt-modal-reference-table thead {
  background-color: #FCFCFC;
}

.qt-modal-tab-content--display .qt-modal-reference-table thead {
  background-color: #FAFAFA;
}

.qt-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.qt-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.qt-modal-tab-content--display .qt-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.qt-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.qt-modal-tab-content--display .qt-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.qt-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.qt-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.qt-modal-detail-subtab:hover {
  color: #138B4C;
}

.qt-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.qt-modal-tab-content--display .qt-modal-detail-subtab {
  color: #666666;
}

.qt-modal-tab-content--display .qt-modal-detail-subtab:hover {
  color: #138B4C;
}

.qt-modal-tab-content--display .qt-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.qt-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.qt-modal-tab-content.qt-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.qt-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-detail-delivery-wrapper .qt-modal-form-label {
  flex-shrink: 0;
}

.qt-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.qt-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.qt-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.qt-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.qt-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.qt-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.qt-modal-detail-table-container .qt-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.qt-modal-detail-table-container .qt-modal-detail-table thead {
  background-color: #FCFCFC;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qt-modal-detail-table-container .qt-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #FCFCFC;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-detail-table-container .qt-modal-detail-table th:not(.detail-table-frozen-item):not(.detail-table-frozen-product):not(.detail-table-frozen-description) {
  position: relative;
}

/* Column resize handle for detail tables */
.qt-modal-detail-table .qt-modal-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3125rem;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 20;
}

.qt-modal-detail-table .qt-modal-column-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.qt-modal-detail-table .qt-modal-column-resize-handle:hover::after {
  background-color: #408952;
}

.qt-modal-detail-table .qt-modal-column-resize-handle--active::after {
  background-color: #408952;
}

/* Sortable table header hover effect */
.qt-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.qt-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.qt-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.qt-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.qt-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.qt-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.qt-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-detail-table th,
.qt-modal-tab-content--display .qt-modal-packaging-table th,
.qt-modal-tab-content--display .qt-modal-partner-table th,
.qt-modal-tab-content--display .qt-modal-attachment-table th {
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-detail-table td,
.qt-modal-tab-content--display .qt-modal-packaging-table td,
.qt-modal-tab-content--display .qt-modal-partner-table td,
.qt-modal-tab-content--display .qt-modal-attachment-table td {
  color: #333333;
}

/* Display Mode - ALL cells uniform background */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Display Mode - ALL child elements inside cells must be transparent */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-detail-table tbody td * {
  background-color: transparent !important;
  background: transparent !important;
}


/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-description,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-text,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-available-qty,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-batch,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-serial,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-sales-order,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-so-item,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-pr-item,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-package-no,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-product-type,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-product-group,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-product-category,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .detail-table-product-variant,
.qt-modal-tab-content--display .qt-modal-detail-table tbody tr:hover .qt-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-description,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-text,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-available-qty,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-batch,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-serial,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-sales-order,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-so-item,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-pr-item,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-package-no,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-type,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-group,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-category,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-variant,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .qt-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.qt-modal-detail-table-container .qt-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.qt-modal-detail-table-container .qt-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.qt-modal-detail-table-container--external .qt-modal-detail-table td {
  color: #555555 !important;
}

.qt-modal-detail-table-container .qt-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  box-sizing: border-box;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Error state for detail-table cells — recolor the input's existing 1px
   transparent border-bottom to red. Matches the subtle single-line style used
   by the Multiple Sales Order table in the Delivery Order modal. */
.qt-modal-detail-table td .qt-modal-handling-product-input.qt-modal-table-cell--error,
.qt-modal-detail-table td .qt-modal-handling-product-input.qt-modal-table-cell--error:focus,
.qt-modal-detail-table td .qt-modal-handling-product-input.qt-modal-table-cell--error:hover {
  border-bottom-color: #DC3545 !important;
}

/* Read-only tables (Item Analysis, Surcharge Analysis) — always grey, even in Edit mode */
.qt-modal-detail-table.qt-modal-detail-table--readonly tbody td {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table.qt-modal-detail-table--readonly tbody td * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Frozen columns for detail table */
.qt-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FCFCFC !important;
  min-width: 5rem;
}

.qt-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #FCFCFC !important;
  color: #555555;
}

.qt-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #FCFCFC !important;
  min-width: 10rem;
}

.qt-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #FCFCFC !important;
  color: #555555;
}

.qt-modal-detail-table .detail-table-frozen-description {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
  background-color: #FCFCFC !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
  min-width: 12.5rem;
}

.qt-modal-detail-table thead .detail-table-frozen-description {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table tbody td.detail-table-frozen-description {
  background-color: #FCFCFC !important;
  color: #555555;
}

/* Description column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-description {
  background-color: #FCFCFC;
  color: #555555;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-text {
  background-color: #FCFCFC;
}

/* Remaining Qty column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.qt-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Secured Qty column - display mode style */
.qt-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #FCFCFC;
  color: #555555;
}

/* Taxable column - grey background */
.qt-modal-detail-table tbody td.detail-table-taxable {
  background-color: #FCFCFC;
}

/* Batch column - display mode style */
.qt-modal-detail-table tbody td.detail-table-batch {
  background-color: #FCFCFC;
  color: #555555;
}

/* Serial Number column - display mode style */
.qt-modal-detail-table tbody td.detail-table-serial {
  background-color: #FCFCFC;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #FCFCFC;
}

/* SO Item column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-so-item {
  background-color: #FCFCFC;
}

/* Purchase Requisition column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #FCFCFC;
}

/* PR Item column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #FCFCFC;
}

/* Package No. column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-package-no {
  background-color: #FCFCFC;
}

/* Shipment No. column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #FCFCFC;
}

/* Product Type column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-product-type {
  background-color: #FCFCFC;
}

/* Product Group column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-product-group {
  background-color: #FCFCFC;
}

/* Product Category column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-product-category {
  background-color: #FCFCFC;
}

/* Product Variant column - non-editable style */
.qt-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #FCFCFC;
}

.qt-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.qt-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.qt-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.qt-modal-detail-table tbody tr:hover .detail-table-description,
.qt-modal-detail-table tbody tr:hover .detail-table-text,
.qt-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.qt-modal-detail-table tbody tr:hover .detail-table-available-qty,
.qt-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.qt-modal-detail-table tbody tr:hover .detail-table-batch,
.qt-modal-detail-table tbody tr:hover .detail-table-serial,
.qt-modal-detail-table tbody tr:hover .detail-table-sales-order,
.qt-modal-detail-table tbody tr:hover .detail-table-so-item,
.qt-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.qt-modal-detail-table tbody tr:hover .detail-table-pr-item,
.qt-modal-detail-table tbody tr:hover .detail-table-package-no,
.qt-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.qt-modal-detail-table tbody tr:hover .detail-table-product-type,
.qt-modal-detail-table tbody tr:hover .detail-table-product-group,
.qt-modal-detail-table tbody tr:hover .detail-table-product-category,
.qt-modal-detail-table tbody tr:hover .detail-table-product-variant,
.qt-modal-detail-table tbody tr:hover .detail-table-taxable,
.qt-modal-detail-table tbody tr:hover .qt-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-description,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-text,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-available-qty,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-batch,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-serial,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-sales-order,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-so-item,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-pr-item,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-package-no,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-type,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-group,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-category,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .detail-table-product-variant,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .qt-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.qt-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.qt-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.qt-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.qt-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.qt-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.qt-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.qt-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.qt-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.qt-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.qt-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.qt-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.qt-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.qt-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.qt-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.qt-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.qt-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for delete cell */
.qt-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Edit Icon Button */
.qt-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.qt-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.qt-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.qt-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.qt-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.qt-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.qt-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.qt-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.qt-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.qt-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.qt-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.qt-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.qt-modal-add-item-btn--disabled .qt-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.qt-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.qt-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.qt-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.qt-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.qt-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.qt-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table thead {
  background-color: #FCFCFC;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #FCFCFC;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.qt-modal-sales-order-table-container .qt-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.qt-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FCFCFC !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.qt-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #FCFCFC !important;
}

.qt-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #FCFCFC !important;
}

.qt-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.qt-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.qt-modal-table-input:focus {
  outline: none;
}

.qt-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.qt-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.qt-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.qt-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.qt-modal-tags-container {
  position: relative;
  width: 100%;
}

.qt-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.qt-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.qt-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.qt-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.qt-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.qt-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.qt-modal-tags-input--display .qt-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.qt-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.qt-modal-tag-remove:hover {
  color: #333333;
}

.qt-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.qt-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.qt-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.qt-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.qt-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #FCFCFC;
}

.qt-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.qt-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.qt-modal-status-container {
  position: relative;
  width: 100%;
}

.qt-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.qt-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.qt-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.qt-modal-status-placeholder {
  color: #999999;
}

.qt-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.qt-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.qt-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.qt-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-status-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-status-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.qt-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.qt-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.qt-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.qt-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.qt-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.qt-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.qt-modal-status-input--display .qt-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.qt-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.qt-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.qt-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.qt-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.qt-modal-stage-dropdown-placeholder {
  color: #999999;
}

.qt-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.qt-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.qt-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.qt-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.qt-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.qt-modal-stage--created .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.qt-modal-stage--approved .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.qt-modal-stage--processed .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.qt-modal-stage--picked .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.qt-modal-stage--packed .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.qt-modal-stage--planned .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.qt-modal-stage--loaded .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.qt-modal-stage--issued .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.qt-modal-stage--departed .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.qt-modal-stage--arrived .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.qt-modal-stage--unloaded .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.qt-modal-stage--delivered .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.qt-modal-stage--confirmed .qt-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.qt-modal-stage--billed .qt-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.qt-modal-stage-dropdown-input .qt-modal-stage,
.qt-modal-stage-dropdown-item .qt-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.qt-modal-baseline-date-dropdown {
  position: relative;
}

.qt-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.qt-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.qt-modal-reference-type-dropdown {
  position: relative;
}

.qt-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.qt-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.qt-modal-delivery-priority-dropdown {
  position: relative;
}

.qt-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.qt-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.qt-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.qt-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.qt-modal-delivery-priority-separator {
  color: #666666;
}

.qt-modal-delivery-priority-name {
  color: #333333;
}

.qt-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.qt-modal-organization-dropdown {
  position: relative;
}

.qt-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.qt-modal-organization-dropdown-content--display .qt-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-organization-dropdown-content--display .qt-modal-organization-item:hover {
  background-color: transparent !important;
}

.qt-modal-organization-dropdown-content--display .qt-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-organization-dropdown-content--display .qt-modal-organization-code,
.qt-modal-organization-dropdown-content--display .qt-modal-organization-name,
.qt-modal-organization-dropdown-content--display .qt-modal-organization-separator {
  color: #999999 !important;
}

.qt-modal-organization-dropdown-content--display .qt-modal-organization-check {
  color: #999999 !important;
}

.qt-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-organization-separator {
  color: #999999;
}

.qt-modal-organization-name {
  color: #333333;
}

.qt-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.qt-modal-sales-structure-dropdown {
  position: relative;
}

.qt-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.qt-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.qt-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-sales-structure-separator {
  color: #999999;
}

.qt-modal-sales-structure-name {
  color: #333333;
}

.qt-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.qt-modal-delivery-type-dropdown {
  position: relative;
}

.qt-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.qt-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.qt-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.qt-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.qt-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.qt-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.qt-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.qt-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-delivery-type-separator {
  color: #999999;
}

.qt-modal-delivery-type-description {
  color: #333333;
}

.qt-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.qt-modal-content::-webkit-scrollbar,
.qt-modal-stage-content::-webkit-scrollbar,


.qt-modal-content::-webkit-scrollbar-track,
.qt-modal-stage-content::-webkit-scrollbar-track,


.qt-modal-content::-webkit-scrollbar-thumb,
.qt-modal-stage-content::-webkit-scrollbar-thumb,


.qt-modal-content::-webkit-scrollbar-thumb:hover,
.qt-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.qt-modal-sales-channel-dropdown {
  position: relative;
}

.qt-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.qt-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-sales-channel-separator {
  color: #999999;
}

.qt-modal-sales-channel-name {
  color: #333333;
}

.qt-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.qt-modal-sales-unit-dropdown {
  position: relative;
}

.qt-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.qt-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-sales-unit-separator {
  color: #999999;
}

.qt-modal-sales-unit-name {
  color: #333333;
}

.qt-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.qt-modal-organization-item--placeholder,
.qt-modal-sales-structure-item--placeholder,
.qt-modal-sales-channel-item--placeholder,
.qt-modal-sales-unit-item--placeholder,
.qt-modal-territory-item--placeholder,
.qt-modal-sales-office-item--placeholder,
.qt-modal-sold-to-party-item--placeholder,
.qt-modal-deliver-to-party-item--placeholder,
.qt-modal-attention-to-deliver-item--placeholder,
.qt-modal-incoterm-item--placeholder,
.qt-modal-delivery-point-item--placeholder,
.qt-modal-shipping-point-item--placeholder,
.qt-modal-sales-order-item--placeholder,
.qt-modal-sales-team-item--placeholder,
.qt-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.qt-modal-organization-item--placeholder:hover,
.qt-modal-sales-structure-item--placeholder:hover,
.qt-modal-sales-channel-item--placeholder:hover,
.qt-modal-sales-unit-item--placeholder:hover,
.qt-modal-territory-item--placeholder:hover,
.qt-modal-sales-office-item--placeholder:hover,
.qt-modal-sold-to-party-item--placeholder:hover,
.qt-modal-deliver-to-party-item--placeholder:hover,
.qt-modal-attention-to-deliver-item--placeholder:hover,
.qt-modal-incoterm-item--placeholder:hover,
.qt-modal-delivery-point-item--placeholder:hover,
.qt-modal-shipping-point-item--placeholder:hover,
.qt-modal-sales-order-item--placeholder:hover,
.qt-modal-sales-team-item--placeholder:hover,
.qt-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.qt-modal-sold-to-party-dropdown {
  position: relative;
}

.qt-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-sold-to-party-input:focus,
.qt-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.qt-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-sold-to-party-item--selected:hover {
  background-color: #F5F5F5;
}

.qt-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.qt-modal-sold-to-party-separator {
  color: #999999;
}

.qt-modal-sold-to-party-name {
  color: #333333;
}

.qt-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.qt-modal-deliver-to-party-dropdown {
  position: relative;
}

.qt-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.qt-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.qt-modal-deliver-to-party-separator {
  color: #999999;
}

.qt-modal-deliver-to-party-name {
  color: #333333;
}

.qt-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.qt-modal-attention-to-deliver-dropdown {
  position: relative;
}
.qt-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.qt-modal-attention-to-deliver-separator {
  color: #999999;
}
.qt-modal-attention-to-deliver-name {
  color: #333333;
}
.qt-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.qt-modal-incoterm-dropdown {
  position: relative;
}
.qt-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.qt-modal-incoterm-separator {
  color: #999999;
}
.qt-modal-incoterm-name {
  color: #333333;
}
.qt-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.qt-modal-delivery-point-dropdown {
  position: relative;
}
.qt-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.qt-modal-delivery-point-separator {
  color: #999999;
}
.qt-modal-delivery-point-name {
  color: #333333;
}
.qt-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.qt-modal-shipping-point-dropdown {
  position: relative;
}
.qt-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.qt-modal-shipping-point-separator {
  color: #999999;
}
.qt-modal-shipping-point-name {
  color: #333333;
}
.qt-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.qt-modal-sales-order-dropdown {
  position: relative;
}
.qt-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.qt-modal-sales-order-separator {
  color: #999999;
}
.qt-modal-sales-order-name {
  color: #333333;
}
.qt-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.qt-modal-date-picker {
  position: relative;
}
.qt-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.qt-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.qt-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.qt-modal-date-input::-webkit-datetime-edit-text,
.qt-modal-date-input::-webkit-datetime-edit-month-field,
.qt-modal-date-input::-webkit-datetime-edit-day-field,
.qt-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.qt-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.qt-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.qt-modal-sales-person-dropdown {
  position: relative;
}
.qt-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.qt-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.qt-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.qt-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.qt-modal-sales-person-separator {
  color: #999999;
}
.qt-modal-sales-person-name {
  color: #333333;
}
.qt-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.qt-modal-sales-team-dropdown {
  position: relative;
}
.qt-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.qt-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.qt-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.qt-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.qt-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.qt-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.qt-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.qt-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.qt-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.qt-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.qt-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qt-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.qt-modal-sales-team-separator {
  color: #999999;
}
.qt-modal-sales-team-name {
  color: #333333;
}
.qt-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.qt-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.qt-modal-territory-dropdown {
  position: relative;
}

.qt-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.qt-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-territory-separator {
  color: #999999;
}

.qt-modal-territory-name {
  color: #333333;
}

.qt-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.qt-modal-sales-office-dropdown {
  position: relative;
}

.qt-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.qt-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.qt-modal-sales-office-separator {
  color: #999999;
}

.qt-modal-sales-office-name {
  color: #333333;
}

.qt-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.qt-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.qt-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.qt-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.qt-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.qt-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.qt-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.qt-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-table-dropdown-input:focus {
  outline: none;
}

.qt-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.qt-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.qt-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.qt-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.qt-modal-delivery-type-list::-webkit-scrollbar,
.qt-modal-stage-dropdown-list::-webkit-scrollbar,
.qt-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.qt-modal-delivery-type-list::-webkit-scrollbar-track,
.qt-modal-stage-dropdown-list::-webkit-scrollbar-track,
.qt-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-delivery-type-list::-webkit-scrollbar-thumb,
.qt-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.qt-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.qt-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.qt-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.qt-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.qt-modal-wrapper,
.qt-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.quotation-modal,
.qt-modal-wrapper,
.qt-modal-wrapper *,
.qt-modal-content,
.qt-modal-data-flow-2-container,
.qt-modal-data-flow-container,
.qt-modal-calendar-container,
.qt-modal-calendar-milestones-list,
.qt-modal-calendar-view,
.qt-modal-calendar-yearly,
.qt-modal-calendar-monthly,
.qt-modal-calendar-weekly,
.qt-modal-calendar-weekly-body,
.qt-modal-calendar-daily,
.qt-modal-calendar-daily-timeline,
.qt-modal-calendar-grid,
.qt-modal-calendar-grid-body,
.qt-modal-detail-table-container,
.qt-modal-item-table-wrapper,
.qt-modal-attachment-table-container,
.qt-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.qt-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.qt-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.qt-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.qt-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.qt-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.qt-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.qt-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #FCFCFC;
}

.qt-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #FCFCFC;
}

.qt-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-tab-content--display .qt-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.qt-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-tab-content--display .qt-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.qt-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.qt-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.qt-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) {
  font-weight: 600;
}

.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) .qt-modal-packaging-input,
.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) .qt-modal-packaging-input--display,
.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) .qt-modal-handling-product-input,
.qt-modal-packaging-row--unassigned:not(.qt-modal-packaging-row--expanded) .qt-modal-handling-product-input--display {
  font-weight: 600;
}

.qt-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.qt-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row td.qt-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row td.qt-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row td.qt-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-expand-cell--unassigned {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-cell--unassigned {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-delete-cell--unassigned {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td.qt-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded td.qt-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row--expanded:hover td.qt-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display,
.qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display,
.qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.qt-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.qt-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-tab-content--display .qt-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.qt-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-tab-content--display .qt-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.qt-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.qt-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.qt-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.qt-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.qt-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.qt-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.qt-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.qt-modal-packaging-detail-table th:first-child,
.qt-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.qt-modal-packaging-detail-table th:nth-child(2),
.qt-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.qt-modal-packaging-detail-table th:nth-child(3),
.qt-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.qt-modal-packaging-detail-table td:nth-child(4),
.qt-modal-packaging-detail-table td:nth-child(6),
.qt-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.qt-modal-packaging-detail-table td:nth-child(5),
.qt-modal-packaging-detail-table td:nth-child(7),
.qt-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.qt-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.qt-modal-tab-content--display .qt-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display .qt-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.qt-modal-tab-content--display .qt-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.qt-modal-tab-content--display .qt-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.qt-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.qt-modal-packaging-table td:last-child,
.qt-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.qt-modal-packaging-table td:last-child .qt-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.qt-modal-detail-table-container--external .qt-modal-packaging-table th:last-child,
.qt-modal-detail-table-container--external .qt-modal-packaging-table td.qt-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.qt-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.qt-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.qt-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.qt-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.qt-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.qt-modal-packaging-child-table thead {
  background-color: #FCFCFC !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.qt-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.qt-modal-packaging-child-table tbody tr {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table tbody tr:hover {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table th {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table td {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table th:hover {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table td:hover {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table tbody tr:hover td {
  background-color: #FCFCFC !important;
}

.qt-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.qt-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.qt-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.qt-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.qt-modal-packaging-child-table tr {
  border: none !important;
}

.qt-modal-packaging-child-table thead,
.qt-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.qt-modal-packaging-child-table th:first-child,
.qt-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.qt-modal-packaging-child-table th:nth-child(2),
.qt-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.qt-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.qt-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.qt-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.qt-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.qt-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.qt-modal-packaging-child-table th:nth-child(3),
.qt-modal-packaging-child-table td:nth-child(3),
.qt-modal-packaging-child-table th:nth-child(4),
.qt-modal-packaging-child-table td:nth-child(4),
.qt-modal-packaging-child-table th:nth-child(5),
.qt-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.qt-modal-packaging-child-table th:nth-child(6),
.qt-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.qt-modal-packaging-child-table th:nth-child(7),
.qt-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.qt-modal-detail-table-container--external .qt-modal-packaging-child-table th:last-child,
.qt-modal-detail-table-container--external .qt-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.qt-modal-packaging-child-table td:last-child .qt-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.qt-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.qt-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.qt-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.qt-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.qt-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row {
  transition: none !important;
}

.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display,
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display:focus,
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display,
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display:focus,
.qt-modal-tab-content--display .qt-modal-detail-table-container .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display:focus,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display:focus,
.qt-modal-tab-content--display .qt-modal-detail-table-container--external .qt-modal-packaging-table tbody tr.qt-modal-packaging-row:hover td .qt-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.qt-modal-detail-table-container--external .qt-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.qt-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.qt-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.qt-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: none;
  cursor: pointer;
  margin: 0;
}

.qt-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.qt-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Right-aligned handling product input (for numeric fields like Unit Price, Amount) */
.qt-modal-handling-product-input--right {
  width: 100%;
  height: 100%;
  padding: 0 0.625rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: none;
  cursor: text;
  margin: 0;
  text-align: right;
}

.qt-modal-handling-product-input--right:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.qt-modal-handling-product-input--right::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.qt-modal-handling-product-input--right-display {
  cursor: default;
  background-color: #FCFCFC !important;
  width: 100%;
  height: 100%;
  padding: 0 0.625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  text-align: right;
}

/* Display mode handling product input — non-editable #FCFCFC */
.qt-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.qt-modal-handling-product-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.qt-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.qt-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.qt-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.qt-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.qt-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* External PoV Handling Product Input - match font color */
.qt-modal-detail-table-container--external .qt-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.qt-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
  cursor: pointer;
}

/* Display mode dropdown content styling */
.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-item--display {
  color: #999999 !important;
}

.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-code,
.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-name,
.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-separator {
  color: #999999 !important;
}

.qt-modal-handling-product-dropdown-content--display .qt-modal-handling-product-check {
  color: #999999 !important;
}

.qt-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.qt-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.qt-modal-handling-product-dropdown-content--narrow .qt-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.qt-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.qt-modal-packaging-detail-table .qt-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.qt-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.qt-modal-detail-table-container--dropdown-open .qt-modal-detail-table {
  overflow: visible;
}

.qt-modal-detail-table-container--dropdown-open .qt-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.qt-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.qt-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.qt-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.qt-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.qt-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.qt-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.qt-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.qt-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.qt-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.qt-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.qt-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.qt-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.qt-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.qt-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.qt-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.qt-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.qt-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.qt-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qt-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.qt-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.qt-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-item:hover {
  background-color: transparent;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-item--placeholder {
  display: none;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-code,
.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-name,
.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-separator {
  color: #555555;
}

.qt-modal-handling-product-dropdown-content--view-only .qt-modal-handling-product-check {
  color: #888888;
}

.qt-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.qt-modal-handling-product-separator {
  color: #999999;
}

.qt-modal-handling-product-name {
  color: #333333;
}

.qt-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.qt-modal-handling-product-item--placeholder {
  cursor: default;
}

.qt-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.qt-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.qt-modal-detail-table td:has(.qt-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

/* Frozen cells must keep sticky even with dropdown inside */
.qt-modal-detail-table td.detail-table-frozen-item:has(.qt-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.qt-modal-detail-table td.detail-table-frozen-product:has(.qt-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
}

.qt-modal-detail-table td.detail-table-frozen-description:has(.qt-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
}

.qt-modal-detail-table td .qt-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.qt-modal-detail-table td .qt-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.qt-modal-detail-table td .qt-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
}

.qt-modal-detail-table td .qt-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.qt-modal-detail-table td .qt-modal-handling-product-input--display,
.qt-modal-detail-table td .qt-modal-handling-product-input--display:focus,
.qt-modal-detail-table td .qt-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display:focus,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display:focus,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Display mode - right-aligned input (Unit Price, Item Discount, Amount) green on row hover */
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right-display {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - right-aligned input orange on row hover */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right-display {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Edit mode - editable input green on row hover (Internal PoV) */
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input:focus,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input:hover {
  background-color: #EDF5EC !important;
}

/* Edit mode - editable right-aligned input green on row hover (Internal PoV) */
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right:focus,
.qt-modal-detail-table-container .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right:hover {
  background-color: #EDF5EC !important;
}

/* Edit mode - editable input orange on row hover (External PoV) */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input:focus,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input:hover {
  background-color: #FFF8F0 !important;
}

/* Edit mode - editable right-aligned input orange on row hover (External PoV) */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right:focus,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover td .qt-modal-handling-product-input--right:hover {
  background-color: #FFF8F0 !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.qt-modal-detail-table td .qt-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.qt-modal-detail-table td .qt-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.qt-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.qt-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.qt-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.qt-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-table-text-icon-btn--filled:not(.qt-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.qt-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.qt-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.qt-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.qt-modal-table-text-icon-btn--display.qt-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.qt-modal-table-text-icon-btn--display.qt-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-table-text-icon-btn--display.qt-modal-table-text-icon-btn--external.qt-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.qt-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.qt-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.qt-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.qt-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.qt-modal-serial-assignment-btn {
  width: 10.625rem;
}

.qt-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.qt-modal-batch-assignment-btn--filled .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.qt-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.qt-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.qt-modal-batch-assignment-btn--display .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-batch-assignment-btn--display.qt-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.qt-modal-batch-assignment-btn--display.qt-modal-batch-assignment-btn--filled .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.qt-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.qt-modal-secured-qty-btn.qt-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.qt-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.qt-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.qt-modal-secured-qty-btn--grey .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.qt-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.qt-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.qt-modal-batch-assignment-btn--partial .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.qt-modal-batch-assignment-btn--display.qt-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.qt-modal-batch-assignment-btn--display.qt-modal-batch-assignment-btn--partial .qt-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.qt-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.qt-modal-secured-qty-modal .qt-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.qt-modal-secured-qty-modal .qt-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.qt-modal-secured-qty-modal.qt-modal-batch-assignment-modal--display .qt-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.qt-modal-secured-qty-modal .qt-modal-item-text-content {
  overflow-x: hidden;
}

.qt-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.qt-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.qt-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.qt-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.qt-modal-batch-assignment-modal--display .qt-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.qt-modal-batch-assignment-modal--display .qt-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.qt-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.qt-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.qt-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.qt-modal-secured-qty-lock-btn--open .qt-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.qt-modal-secured-qty-lock-btn--locked .qt-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.qt-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.qt-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.qt-modal-batch-assignment-modal .qt-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.qt-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.qt-modal-batch-assignment-modal .qt-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.qt-modal-batch-assignment-modal .qt-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.qt-modal-batch-assignment-modal.qt-modal-batch-assignment-modal--display .qt-modal-item-text-info {
  background-color: #F2F8EA;
}

.qt-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.qt-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.qt-modal-batch-assignment-info-group {
  flex: 1 1;
}

.qt-modal-batch-assignment-info-group .qt-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.qt-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.qt-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.qt-modal-batch-assignment-table-section .qt-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.qt-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.qt-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.qt-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.qt-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.qt-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.qt-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.qt-modal-batch-assignment-table th,
.qt-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.qt-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.qt-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.qt-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.qt-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.qt-modal-batch-assignment-table tbody td:has(.qt-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.qt-modal-batch-assignment-table tbody td:has(.qt-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.qt-modal-batch-assignment-table tbody td:nth-child(2),
.qt-modal-batch-assignment-table tbody td:nth-child(3),
.qt-modal-batch-assignment-table tbody td:nth-child(4),
.qt-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.qt-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.qt-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.qt-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.qt-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.qt-modal-batch-assignment-modal--display .qt-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.qt-modal-batch-assignment-modal--display .qt-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.qt-modal-batch-assignment-modal--display .qt-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-batch-assignment-modal--display .qt-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.qt-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.qt-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.qt-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.qt-modal-batch-assignment-table .qt-modal-placeholder-text {
  color: #CCCCCC;
}

.qt-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.qt-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.qt-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.qt-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.qt-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.qt-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.qt-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.qt-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.qt-modal-batch-assignment-table th.batch-table-frozen-batch,
table.qt-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.qt-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.qt-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.qt-modal-batch-assignment-table td.batch-table-frozen-batch,
table.qt-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.qt-modal-batch-assignment-table th.batch-table-frozen-batch,
table.qt-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.qt-modal-batch-assignment-table th.batch-table-frozen-assign,
table.qt-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.qt-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.qt-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.qt-modal-item-text-info {
  margin-bottom: 1rem;
}

.qt-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.qt-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.qt-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.qt-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.qt-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.qt-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.qt-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.qt-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-item-text-modal .modal-header .modal-title,
.qt-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.qt-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.qt-modal-item-text-label--display {
  color: #333333;
}

.qt-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.qt-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.qt-modal-item-text-modal .qt-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.qt-modal-item-text-modal .qt-modal-item-text-textarea-wrapper .qt-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.qt-modal-item-text-textarea {
  overflow-y: auto !important;
}

.qt-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.qt-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.qt-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.qt-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.qt-modal-add-do-item-modal .qt-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.qt-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.qt-modal-add-do-item-dropdown-section .qt-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.qt-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.qt-modal-add-do-item-table-section .qt-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.qt-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.qt-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.qt-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.qt-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.qt-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.qt-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.qt-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.qt-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.qt-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.qt-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.qt-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.qt-modal-detail-table td:first-child .qt-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.qt-modal-detail-table td:first-child .qt-modal-partner-type-input {
  padding-left: 0.625rem;
}

.qt-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.qt-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.qt-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.qt-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.qt-modal-partner-type-dropdown--display .qt-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.qt-modal-partner-type-dropdown-content--display .qt-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-partner-type-dropdown-content--display .qt-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.qt-modal-partner-type-dropdown-content--display .qt-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-partner-type-dropdown-content--display .qt-modal-partner-type-check {
  color: #999999 !important;
}

.qt-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.qt-modal-partner-type-dropdown--display .qt-modal-partner-type-value {
  color: #555555;
}

.qt-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.qt-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.qt-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.qt-modal-partner-type-item--placeholder {
  cursor: default;
}

.qt-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.qt-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.qt-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.qt-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.qt-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.qt-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.qt-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.qt-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.qt-modal-partner-id-dropdown--display .qt-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-code,
.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-name,
.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-separator {
  color: #999999 !important;
}

.qt-modal-partner-id-dropdown-content--display .qt-modal-partner-id-check {
  color: #999999 !important;
}

.qt-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.qt-modal-partner-id-dropdown--display .qt-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.qt-modal-detail-table tbody tr:hover .qt-modal-partner-type-dropdown--display .qt-modal-partner-type-input-wrapper,
.qt-modal-detail-table tbody tr:hover .qt-modal-partner-id-dropdown--display .qt-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .qt-modal-partner-type-dropdown--display .qt-modal-partner-type-input-wrapper,
.qt-modal-detail-table-container--external .qt-modal-detail-table tbody tr:hover .qt-modal-partner-id-dropdown--display .qt-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.qt-modal-partner-type-arrow--external {
  visibility: hidden;
}

.qt-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.qt-modal-partner-type-dropdown--external .qt-modal-partner-type-value {
  color: #555555;
}

.qt-modal-partner-id-dropdown--external .qt-modal-partner-id-value {
  color: #555555;
}

.qt-modal-detail-table-container--external .qt-modal-detail-table td.qt-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.qt-modal-partner-header-section--external .qt-modal-form-input--display {
  color: #555555;
}

.qt-modal-detail-table td.qt-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.qt-modal-tab-content--display .qt-modal-detail-table td.qt-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.qt-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.qt-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.qt-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.qt-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.qt-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.qt-modal-partner-id-item--placeholder {
  cursor: default;
}

.qt-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.qt-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.qt-modal-partner-id-separator {
  color: #999999;
}

.qt-modal-partner-id-name {
  color: #666666;
}

.qt-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.qt-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.qt-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.qt-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.qt-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.qt-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.qt-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.qt-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.qt-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.qt-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.qt-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.qt-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.qt-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.qt-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.qt-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.qt-modal-data-flow-stage--completed .qt-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.qt-modal-data-flow-stage--active .qt-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.qt-modal-data-flow-stage--completed .qt-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-data-flow-stage--active .qt-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.qt-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.qt-modal-data-flow-stage--completed .qt-modal-data-flow-stage-label {
  color: #138B4C;
}

.qt-modal-data-flow-stage--active .qt-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.qt-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.qt-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.qt-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.qt-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.qt-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.qt-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.qt-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.qt-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.qt-modal-data-flow-document--active .qt-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.qt-modal-data-flow-document-fold {
  display: none;
}

.qt-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.qt-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.qt-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.qt-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.qt-modal-data-flow-document-icon-wrapper--active .qt-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.qt-modal-data-flow-document--active .qt-modal-data-flow-document-title {
  color: #138B4C;
}

.qt-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.qt-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.qt-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.qt-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.qt-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.qt-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.qt-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.qt-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.qt-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qt-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.qt-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.qt-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.qt-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.qt-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.qt-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.qt-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.qt-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.qt-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.qt-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.qt-modal-terms-area-button .qt-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.qt-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.qt-modal-tab-content--display .qt-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.qt-modal-tab-content--display .qt-modal-terms-area-button .qt-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.qt-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.qt-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.qt-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.qt-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.qt-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.qt-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.qt-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.qt-modal-data-flow-2-row {
  display: flex;
}

.qt-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qt-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.qt-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.qt-modal-data-flow-2-row--content .qt-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.qt-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.qt-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.qt-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.qt-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-label {
  color: #333333;
}

.qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage-label {
  color: #999999;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--completed .qt-modal-data-flow-2-stage-label {
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--active .qt-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.qt-modal-tab-content--display .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.qt-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.qt-modal-data-flow-2-row--content .qt-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.qt-modal-data-flow-2-row--content .qt-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.qt-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.qt-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.qt-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.qt-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.qt-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.qt-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.qt-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.qt-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.qt-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-title,
.qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-title {
  color: #333333;
}

.qt-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.qt-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.qt-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.qt-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-title {
  color: #888888;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-title,
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-title {
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--completed .qt-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--active .qt-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-date {
  color: #333333;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.qt-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.qt-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.qt-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.qt-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.qt-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.qt-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.qt-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.qt-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.qt-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.qt-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.qt-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.qt-modal-data-flow-2-grid--external .qt-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #FCFCFC;
  border-bottom: 1px solid #D0D0D0;
}

.qt-modal-data-flow-2-grid--external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell {
  border-bottom: none;
}

.qt-modal-data-flow-2-grid--external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell--label {
  background-color: #FCFCFC;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.qt-modal-data-flow-2-grid--external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell--label::after {
  display: none;
}

.qt-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.qt-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.qt-modal-data-flow-2-row--content-top .qt-modal-data-flow-2-document--buyer.qt-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.qt-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.qt-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.qt-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.qt-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.qt-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.qt-modal-data-flow-2-stage--external-completed .qt-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.qt-modal-data-flow-2-stage--external-active .qt-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.qt-modal-data-flow-2-stage--external-completed .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.qt-modal-data-flow-2-stage--external-active .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.qt-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.qt-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.qt-modal-data-flow-2-document--external .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.qt-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.qt-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.qt-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.qt-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.qt-modal-data-flow-2-document--external .qt-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.qt-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.qt-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.qt-modal-data-flow-2-document--supplier .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.qt-modal-data-flow-2-document--supplier .qt-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.qt-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.qt-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.qt-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.qt-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier .qt-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier .qt-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-completed .qt-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--supplier-active .qt-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.qt-modal-tab-content--data-flow-2-external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.qt-modal-tab-content--data-flow-2-external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external .qt-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external .qt-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.qt-modal-tab-content--display.qt-modal-tab-content--data-flow-2-external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.qt-modal-tab-content--display.qt-modal-tab-content--data-flow-2-external .qt-modal-data-flow-2-row--header .qt-modal-data-flow-2-cell:has(.qt-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-circle,
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external-completed .qt-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external-active .qt-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-icon,
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external-completed .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external-active .qt-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-stage--external .qt-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-completed .qt-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.qt-modal-tab-content--display .qt-modal-data-flow-2-document--external-active .qt-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.qt-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.qt-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.qt-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.qt-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.qt-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.qt-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.qt-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.qt-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.qt-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.qt-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.qt-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.qt-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.qt-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.qt-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.qt-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.qt-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.qt-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.qt-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.qt-modal-milestone-date-value {
  color: #666666;
}

.qt-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.qt-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.qt-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.qt-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.qt-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.qt-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.qt-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.qt-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.qt-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.qt-modal-activity-item--display .qt-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.qt-modal-calendar-milestones .qt-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.qt-modal-calendar-milestones .qt-modal-activity-user:hover {
  text-decoration: none;
}

.qt-modal-calendar-milestones .qt-modal-activity-item--display .qt-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.qt-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.qt-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qt-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.qt-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.qt-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-calendar-nav-btn:hover .qt-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.qt-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.qt-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.qt-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.qt-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.qt-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.qt-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.qt-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.qt-modal-calendar-view-mode-btn--active + .qt-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.qt-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.qt-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.qt-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.qt-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.qt-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.qt-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.qt-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.qt-modal-calendar-grid-cell:nth-child(7n-1),
.qt-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.qt-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.qt-modal-calendar-grid-day-name:nth-child(6),
.qt-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.qt-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.qt-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.qt-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.qt-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.qt-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.qt-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.qt-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.qt-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.qt-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qt-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.qt-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qt-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.qt-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.qt-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.qt-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.qt-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.qt-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.qt-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.qt-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.qt-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.qt-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.qt-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.qt-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.qt-modal-calendar-weekly-day-column:nth-child(6),
.qt-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.qt-modal-calendar-weekly-day-header:nth-child(6),
.qt-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.qt-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.qt-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.qt-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.qt-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.qt-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.qt-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.qt-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.qt-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.qt-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.qt-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.qt-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.qt-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.qt-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.qt-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.qt-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.qt-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.qt-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.qt-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.qt-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.qt-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.qt-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.qt-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.qt-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.qt-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-view {
  border-color: #D0D0D0;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-view-mode-btn--active + .qt-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-milestones-header {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-view-title {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-grid-day-name {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-grid-cell-day {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-weekly-day-name {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-weekly-day-date {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-weekly-event-title {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-daily-header {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-daily-hour-label {
  color: #666666;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-daily-event-title {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar .qt-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.qt-modal-calendar-milestones-header--external {
  color: #333333;
}

.qt-modal-calendar-nav-btn--external .qt-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.qt-modal-calendar-nav-btn--external:hover .qt-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.qt-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.qt-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.qt-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.qt-modal-calendar-view-mode-btn--active-external + .qt-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.qt-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.qt-modal-tab-content--calendar-external .qt-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.qt-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.qt-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.qt-modal-activity-type--external {
  color: #333333;
}

.qt-modal-activity-user--external {
  color: #E67E22;
}

.qt-modal-activity-user--external:hover {
  color: #D35400;
}

.qt-modal-calendar-milestones .qt-modal-activity-user--external {
  color: #E67E22;
}

.qt-modal-calendar-milestones .qt-modal-activity-user--external:hover {
  color: #D35400;
}

.qt-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.qt-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.qt-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.qt-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.qt-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.qt-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.qt-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.qt-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.qt-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.qt-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.qt-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.qt-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.qt-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-milestones-header--external {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-view-mode-btn--active-external + .qt-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-calendar-nav-btn--external .qt-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-activity-type--external {
  color: #333333;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-activity-user--external {
  color: #E67E22;
}

.qt-modal-tab-content--display.qt-modal-tab-content--calendar-external .qt-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.qt-modal-input--error,
.qt-modal-form-input.qt-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.qt-modal-dropdown--error .qt-modal-delivery-type-input,
.qt-modal-dropdown--error .qt-modal-organization-input,
.qt-modal-dropdown--error .qt-modal-sales-structure-input,
.qt-modal-dropdown--error .qt-modal-sales-channel-input,
.qt-modal-dropdown--error .qt-modal-sales-unit-input,
.qt-modal-dropdown--error .qt-modal-territory-input,
.qt-modal-dropdown--error .qt-modal-sales-office-input,
.qt-modal-dropdown--error .qt-modal-sold-to-party-input,
.qt-modal-dropdown--error .qt-modal-deliver-to-party-input,
.qt-modal-dropdown--error .qt-modal-attention-to-deliver-input,
.qt-modal-dropdown--error .qt-modal-incoterm-input,
.qt-modal-dropdown--error .qt-modal-delivery-point-input,
.qt-modal-dropdown--error .qt-modal-shipping-point-input,
.qt-modal-dropdown--error .qt-modal-sales-order-input,
.qt-modal-dropdown--error .qt-modal-sales-team-input,
.qt-modal-dropdown--error .qt-modal-sales-person-input,
.qt-modal-dropdown--error .qt-modal-delivery-priority-input,
.qt-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.qt-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.qt-modal-date-picker-wrapper.qt-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.qt-modal-custom-dropdown {
  position: relative;
}

.qt-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.qt-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.qt-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.qt-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.qt-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-check {
  color: #999999 !important;
}

.qt-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.qt-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.qt-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.qt-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.qt-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qt-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.qt-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.qt-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.qt-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.qt-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.qt-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.qt-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.qt-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.qt-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.qt-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.qt-modal-setting-form-label--display {
  color: #333333;
}

.qt-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.qt-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-setting-dropdown--active .qt-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.qt-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.qt-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.qt-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.qt-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.qt-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.qt-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.qt-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-setting-dropdown-icon.qt-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.qt-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.qt-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.qt-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.qt-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.qt-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.qt-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.qt-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.qt-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.qt-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.qt-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.qt-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.qt-modal-setting-dropdown-item-separator {
  color: #999999;
}

.qt-modal-setting-dropdown-item-name {
  color: #333333;
}

.qt-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.qt-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.qt-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.qt-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.qt-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.qt-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.qt-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.qt-modal-setting-tab-content--print .qt-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.qt-modal-setting-tab-content--print .qt-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qt-modal-setting-tab-content--print .qt-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FCFCFC;
  z-index: 10;
}

.qt-modal-setting-tab-content--print .so-setting-add-item-section {
  flex-shrink: 0;
  padding-top: 0.75rem;
  background-color: #FFFFFF;
}

/* DO Setting Modal Table */
.qt-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.qt-modal-setting-table thead tr {
  height: 2.25rem;
}

.qt-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.qt-modal-setting-table tbody tr {
  height: 2.25rem;
}

.qt-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.qt-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */
.so-setting-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
}

.so-setting-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.so-setting-checkbox-mark {
  width: 1rem;
  height: 1rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.so-setting-checkbox input:checked + .so-setting-checkbox-mark {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-setting-checkbox input:checked + .so-setting-checkbox-mark::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
}

.so-setting-checkbox-mark--disabled {
  background-color: #FFFFFF;
  border-color: #D0D0D0;
  cursor: default;
}

/* Keep green color for checked checkbox in display mode (same as edit mode) */
.so-setting-checkbox input:checked + .so-setting-checkbox-mark--disabled {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* DO Setting Output Dropdown */
.so-setting-output-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}

.so-setting-output-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}

.so-setting-output-dropdown--disabled .so-setting-output-trigger {
  cursor: default;
}

.so-setting-output-text {
  font-size: 0.8125rem;
  color: #333333;
}

.so-setting-output-text--placeholder {
  color: #999999;
  font-style: italic;
}

/* Keep dark text in display mode (same as edit mode) */
.so-setting-output-dropdown--disabled .so-setting-output-text {
  color: #333333;
}

.so-setting-output-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}

.so-setting-output-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}

/* Keep green icon in display mode (same as edit mode) */
.so-setting-output-dropdown--disabled .so-setting-output-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-setting-output-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

.so-setting-output-menu::-webkit-scrollbar {
  width: 1px;
}

.so-setting-output-menu::-webkit-scrollbar-track {
  background: transparent;
}

.so-setting-output-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-setting-output-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Flipped dropdown menu - appears above the trigger */
.so-setting-output-menu--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.so-setting-output-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}

.so-setting-output-option:hover {
  background-color: #F5F5F5;
}

.so-setting-output-option--selected {
  background-color: #E8F5E9;
}

.so-setting-output-option--selected:hover {
  background-color: #D5EDD8;
}

.so-setting-output-option--placeholder {
  color: #999999;
  font-style: italic;
}

.so-setting-output-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FCFCFC;
}

.so-setting-output-option--disabled:hover {
  background-color: #FCFCFC;
}

.so-setting-output-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* DO Setting Description Column (read-only) */
.qt-modal-setting-table tbody td:nth-child(3) {
  background-color: #FCFCFC;
}

/* DO Setting Table Display Mode - keep colorful */
.qt-modal-setting-table--display thead th:nth-child(2),
.qt-modal-setting-table--display thead th:nth-child(3),
.qt-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.qt-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */
.so-setting-add-item-section {
  margin-top: 0.75rem;
}

/* DO Setting Modal Display Mode Styles */
.qt-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */
.so-setting-transfer-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}

.so-setting-transfer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}

.so-setting-transfer-dropdown--disabled .so-setting-transfer-trigger {
  cursor: default;
}

.so-setting-transfer-text {
  font-size: 0.8125rem;
  color: #333333;
}

.so-setting-transfer-text--placeholder {
  color: #999999;
  font-style: italic;
}

/* Keep dark text in display mode (same as edit mode) */
.so-setting-transfer-dropdown--disabled .so-setting-transfer-text {
  color: #333333;
}

.so-setting-transfer-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}

.so-setting-transfer-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}

/* Keep green icon in display mode (same as edit mode) */
.so-setting-transfer-dropdown--disabled .so-setting-transfer-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-setting-transfer-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

.so-setting-transfer-menu::-webkit-scrollbar {
  width: 1px;
}

.so-setting-transfer-menu::-webkit-scrollbar-track {
  background: transparent;
}

.so-setting-transfer-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-setting-transfer-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-setting-transfer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}

.so-setting-transfer-option:hover {
  background-color: #F5F5F5;
}

.so-setting-transfer-option--selected {
  background-color: #E8F5E9;
}

.so-setting-transfer-option--selected:hover {
  background-color: #D5EDD8;
}

.so-setting-transfer-option--placeholder {
  color: #999999;
  font-style: italic;
}

.so-setting-transfer-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FCFCFC;
}

.so-setting-transfer-option--disabled:hover {
  background-color: #FCFCFC;
}

.so-setting-transfer-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Transfer Data Code Column (read-only) */
.so-setting-transfer-code-cell {
  background-color: #FCFCFC;
  color: #666666;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
}

/* Transfer Data Read-only Cell */
.so-setting-transfer-readonly-cell {
  background-color: #FFFFFF !important;
  color: #666666;
  font-size: 0.8125rem;
}

/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.qt-modal-setting-table--display .so-setting-transfer-code-cell,
.qt-modal-setting-table--display .so-setting-transfer-readonly-cell {
  color: #666666;
}

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.qt-modal-setting-table--transfer.qt-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.qt-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.qt-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qt-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FCFCFC;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.qt-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.qt-modal-setting-table--transfer:not(.qt-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.qt-modal-setting-table--transfer:not(.qt-modal-setting-table--dragging) tbody tr:hover td.so-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Being Dragged - Green Style */
.qt-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.qt-modal-setting-table--transfer tbody tr.update-layout-row-dragging td.so-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Locked - Grey background, non-draggable */
.qt-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.qt-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.qt-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.qt-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.qt-modal-tab-content--display .qt-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.qt-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.qt-modal-tab-content--display .qt-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.qt-modal-attribute-header-section--external .qt-modal-form-input:focus {
  border-color: #F5B041;
}

.qt-modal-attribute-header-section--external .qt-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.qt-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.qt-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.qt-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Icon (regular/solid hover toggle) */
.qt-modal-available-qty-info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  color: #000000;
}

.qt-modal-available-qty-info-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
}

.qt-modal-available-qty-info-icon--solid {
  display: none;
}

.qt-modal-available-qty-info-icon-wrapper:hover .qt-modal-available-qty-info-icon--regular,
.qt-modal-available-qty-info-icon-wrapper--active .qt-modal-available-qty-info-icon--regular {
  display: none;
}

.qt-modal-available-qty-info-icon-wrapper:hover .qt-modal-available-qty-info-icon--solid,
.qt-modal-available-qty-info-icon-wrapper--active .qt-modal-available-qty-info-icon--solid {
  display: block;
}

/* Available Qty Info Container */
.qt-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.qt-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.qt-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.qt-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.qt-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.qt-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.qt-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.qt-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.qt-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.qt-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.qt-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.qt-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.qt-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.qt-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.qt-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.qt-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.qt-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.qt-modal-available-qty-tree-level {
  position: relative;
}

.qt-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.qt-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.qt-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.qt-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.qt-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.qt-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.qt-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.qt-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.qt-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.qt-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.qt-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.qt-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.qt-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.qt-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.qt-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.qt-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.qt-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.qt-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.qt-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.qt-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.qt-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.qt-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.qt-modal-available-qty-tree-batch-header .qt-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.qt-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.qt-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.qt-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.qt-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.qt-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.qt-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.qt-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.qt-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.qt-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.qt-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.qt-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.qt-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.qt-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.qt-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.qt-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.qt-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.qt-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.qt-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.qt-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.qt-modal-activity-type--clickable.qt-modal-activity-type--display:hover {
  color: #138B4C;
}

.qt-modal-activity-type--clickable.qt-modal-activity-type--external:hover {
  color: #E67E00;
}

.qt-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.qt-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.qt-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.qt-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.qt-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.qt-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.qt-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to qt-modal-form-label */
.qt-modal-activity-detail-content .qt-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.qt-modal-activity-detail-modal .qt-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.qt-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.qt-modal-activity-detail-modal .qt-modal-tabs--display .qt-modal-tab {
  color: #333333;
}

.qt-modal-activity-detail-modal .qt-modal-tabs--display .qt-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.qt-modal-activity-detail-modal .qt-modal-tabs--external.qt-modal-tabs--display .qt-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.qt-modal-activity-detail-tab-content--general .qt-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.qt-modal-activity-detail-content .qt-modal-milestone-status {
  margin: 0;
}

.qt-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.qt-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.qt-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.qt-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

/* Field-level chat icon (Sales Rep, Attention To, etc.) — regular/solid swap on hover */
.qt-modal-field-chat-wrapper .qt-modal-field-chat-icon--regular { opacity: 1; transition: opacity 150ms ease; }
.qt-modal-field-chat-wrapper .qt-modal-field-chat-icon--solid { opacity: 0 !important; transition: opacity 150ms ease; }
.qt-modal-field-chat-wrapper:hover .qt-modal-field-chat-icon--regular { opacity: 0; }
.qt-modal-field-chat-wrapper:hover .qt-modal-field-chat-icon--solid { opacity: 1 !important; filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(1000%) hue-rotate(100deg) brightness(90%) contrast(95%) !important; }

.qt-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.qt-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.qt-modal-activity-detail-pic-chat-wrapper:hover .qt-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.qt-modal-activity-detail-pic-chat-wrapper:hover .qt-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.qt-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.qt-modal-activity-detail-pic--clickable:hover .qt-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.qt-modal-activity-detail-content--external .qt-modal-activity-detail-pic {
  color: #E67E22;
}

.qt-modal-activity-detail-content--external .qt-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.qt-modal-activity-detail-content--external .qt-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.qt-modal-activity-detail-content--external .qt-modal-activity-detail-pic--clickable:hover .qt-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.qt-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.qt-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.qt-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.qt-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.qt-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.qt-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.qt-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.qt-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.qt-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.qt-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.qt-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qt-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.qt-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.qt-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.qt-modal-activity-detail-content--external .qt-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.qt-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.qt-modal-activity-detail-content--external .qt-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.qt-modal-activity-detail-content--external .qt-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.qt-modal-activity-detail-content--external .qt-modal-activity-detail-document-name {
  color: #E67E22;
}

.qt-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.qt-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.qt-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.qt-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.qt-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.qt-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.qt-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qt-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.qt-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.qt-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.qt-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.qt-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.qt-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.qt-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.qt-modal-activity-detail-tab-content--general {
  padding: 0;
}

.qt-modal-activity-detail-tab-content--general .qt-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.qt-modal-activity-detail-tab-content--general > div:not(.qt-modal-item-text-info) {
  padding: 0 1.5rem;
}

.qt-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.qt-modal-activity-detail-tab-content--attachment,
.qt-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.qt-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.qt-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.qt-modal-activity-detail-tab-content--attachment .qt-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.qt-modal-activity-detail-tab-content--attachment .qt-modal-batch-assignment-table-section > .qt-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.qt-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.qt-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.qt-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.qt-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.qt-modal-activity-detail-content--external .qt-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.qt-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.qt-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.qt-modal-activity-detail-content--external .qt-modal-item-text-info {
  background-color: #FEF5E7;
}

.qt-modal-activity-detail-content--external .qt-modal-task-notes-section {
  background-color: #FEF5E7;
}

.qt-modal-task-notes-section .qt-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.qt-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.qt-modal-task-notes-textarea.qt-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.qt-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.qt-modal-task-chat-section > .qt-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.qt-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.qt-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.qt-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.qt-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qt-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.qt-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.qt-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.qt-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.qt-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.qt-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.qt-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.qt-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.qt-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.qt-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.qt-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.qt-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.qt-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.qt-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.qt-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.qt-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.qt-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.qt-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.qt-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.qt-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.qt-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.qt-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.qt-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.qt-modal-activity-detail-content--external .qt-modal-task-chat-avatar {
  background-color: #F5B041;
}

.qt-modal-activity-detail-content--external .qt-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.qt-modal-activity-detail-content--external .qt-modal-task-chat-reply-btn {
  color: #E67E22;
}

.qt-modal-activity-detail-content--external .qt-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.qt-modal-dropdown--display .qt-modal-dropdown-item,
.qt-modal-dropdown--display [class*="-item"],
.qt-modal-tags-dropdown--display .qt-modal-tags-dropdown-item,
.qt-modal-baseline-date-dropdown--display .qt-modal-baseline-date-item,
.qt-modal-reference-type-dropdown--display .qt-modal-reference-type-item,
.qt-modal-delivery-priority-dropdown--display .qt-modal-delivery-priority-item,
.qt-modal-organization-dropdown--display .qt-modal-organization-item,
.qt-modal-sales-structure-dropdown--display .qt-modal-sales-structure-item,
.qt-modal-delivery-type-dropdown--display .qt-modal-delivery-type-item,
.qt-modal-sales-channel-dropdown--display .qt-modal-sales-channel-item,
.qt-modal-sales-unit-dropdown--display .qt-modal-sales-unit-item,
.qt-modal-sold-to-party-dropdown--display .qt-modal-sold-to-party-item,
.qt-modal-deliver-to-party-dropdown--display .qt-modal-deliver-to-party-item,
.qt-modal-attention-to-deliver-dropdown--display .qt-modal-attention-to-deliver-item,
.qt-modal-incoterm-dropdown--display .qt-modal-incoterm-item,
.qt-modal-delivery-point-dropdown--display .qt-modal-delivery-point-item,
.qt-modal-shipping-point-dropdown--display .qt-modal-shipping-point-item,
.qt-modal-sales-order-dropdown--display .qt-modal-sales-order-item,
.qt-modal-sales-person-dropdown--display .qt-modal-sales-person-item,
.qt-modal-sales-team-dropdown--display .qt-modal-sales-team-item,
.qt-modal-territory-dropdown--display .qt-modal-territory-item,
.qt-modal-sales-office-dropdown--display .qt-modal-sales-office-item,
.qt-modal-status-dropdown--display .qt-modal-status-item,
.qt-modal-handling-product-dropdown--display .qt-modal-handling-product-item,
.qt-modal-child-uom-dropdown--display .qt-modal-child-uom-item,
.qt-modal-partner-type-dropdown--display .qt-modal-partner-type-item,
.qt-modal-partner-id-dropdown--display .qt-modal-partner-id-item,
.qt-modal-custom-dropdown--display .qt-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.qt-modal-dropdown--display .qt-modal-dropdown-item:hover,
.qt-modal-dropdown--display [class*="-item"]:hover,
.qt-modal-tags-dropdown--display .qt-modal-tags-dropdown-item:hover,
.qt-modal-baseline-date-dropdown--display .qt-modal-baseline-date-item:hover,
.qt-modal-reference-type-dropdown--display .qt-modal-reference-type-item:hover,
.qt-modal-delivery-priority-dropdown--display .qt-modal-delivery-priority-item:hover,
.qt-modal-organization-dropdown--display .qt-modal-organization-item:hover,
.qt-modal-sales-structure-dropdown--display .qt-modal-sales-structure-item:hover,
.qt-modal-delivery-type-dropdown--display .qt-modal-delivery-type-item:hover,
.qt-modal-sales-channel-dropdown--display .qt-modal-sales-channel-item:hover,
.qt-modal-sales-unit-dropdown--display .qt-modal-sales-unit-item:hover,
.qt-modal-sold-to-party-dropdown--display .qt-modal-sold-to-party-item:hover,
.qt-modal-deliver-to-party-dropdown--display .qt-modal-deliver-to-party-item:hover,
.qt-modal-attention-to-deliver-dropdown--display .qt-modal-attention-to-deliver-item:hover,
.qt-modal-incoterm-dropdown--display .qt-modal-incoterm-item:hover,
.qt-modal-delivery-point-dropdown--display .qt-modal-delivery-point-item:hover,
.qt-modal-shipping-point-dropdown--display .qt-modal-shipping-point-item:hover,
.qt-modal-sales-order-dropdown--display .qt-modal-sales-order-item:hover,
.qt-modal-sales-person-dropdown--display .qt-modal-sales-person-item:hover,
.qt-modal-sales-team-dropdown--display .qt-modal-sales-team-item:hover,
.qt-modal-territory-dropdown--display .qt-modal-territory-item:hover,
.qt-modal-sales-office-dropdown--display .qt-modal-sales-office-item:hover,
.qt-modal-status-dropdown--display .qt-modal-status-item:hover,
.qt-modal-handling-product-dropdown--display .qt-modal-handling-product-item:hover,
.qt-modal-child-uom-dropdown--display .qt-modal-child-uom-item:hover,
.qt-modal-partner-type-dropdown--display .qt-modal-partner-type-item:hover,
.qt-modal-partner-id-dropdown--display .qt-modal-partner-id-item:hover,
.qt-modal-custom-dropdown--display .qt-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.qt-modal-dropdown--display [class*="-item--selected"],
.qt-modal-tags-dropdown--display .qt-modal-tags-dropdown-item--selected,
.qt-modal-baseline-date-dropdown--display .qt-modal-baseline-date-item--selected,
.qt-modal-reference-type-dropdown--display .qt-modal-reference-type-item--selected,
.qt-modal-delivery-priority-dropdown--display .qt-modal-delivery-priority-item--selected,
.qt-modal-organization-dropdown--display .qt-modal-organization-item--selected,
.qt-modal-sales-structure-dropdown--display .qt-modal-sales-structure-item--selected,
.qt-modal-delivery-type-dropdown--display .qt-modal-delivery-type-item--selected,
.qt-modal-sales-channel-dropdown--display .qt-modal-sales-channel-item--selected,
.qt-modal-sales-unit-dropdown--display .qt-modal-sales-unit-item--selected,
.qt-modal-sold-to-party-dropdown--display .qt-modal-sold-to-party-item--selected,
.qt-modal-deliver-to-party-dropdown--display .qt-modal-deliver-to-party-item--selected,
.qt-modal-attention-to-deliver-dropdown--display .qt-modal-attention-to-deliver-item--selected,
.qt-modal-incoterm-dropdown--display .qt-modal-incoterm-item--selected,
.qt-modal-delivery-point-dropdown--display .qt-modal-delivery-point-item--selected,
.qt-modal-shipping-point-dropdown--display .qt-modal-shipping-point-item--selected,
.qt-modal-sales-order-dropdown--display .qt-modal-sales-order-item--selected,
.qt-modal-sales-person-dropdown--display .qt-modal-sales-person-item--selected,
.qt-modal-sales-team-dropdown--display .qt-modal-sales-team-item--selected,
.qt-modal-territory-dropdown--display .qt-modal-territory-item--selected,
.qt-modal-sales-office-dropdown--display .qt-modal-sales-office-item--selected,
.qt-modal-status-dropdown--display .qt-modal-status-item--selected,
.qt-modal-handling-product-dropdown--display .qt-modal-handling-product-item--selected,
.qt-modal-child-uom-dropdown--display .qt-modal-child-uom-item--selected,
.qt-modal-partner-type-dropdown--display .qt-modal-partner-type-item--selected,
.qt-modal-partner-id-dropdown--display .qt-modal-partner-id-item--selected,
.qt-modal-custom-dropdown--display .qt-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.qt-modal-dropdown--display [class*="-check"],
.qt-modal-dropdown--display .qt-modal-dropdown-check,
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.qt-modal-dropdown--display [class*="-item-code"],
.qt-modal-dropdown--display [class*="-item-name"],
.qt-modal-dropdown--display [class*="-item-content"],
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-code,
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-name,
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-item,
.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.qt-modal-sold-to-party-dropdown-content--display .qt-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.qt-modal-tags-dropdown--display .qt-modal-tags-item,
.qt-modal-tags-dropdown--display .qt-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-tags-dropdown--display .qt-modal-tags-item:hover {
  background-color: transparent !important;
}

.qt-modal-tags-dropdown--display .qt-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.qt-modal-tags-dropdown--display .qt-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item,
.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.qt-modal-custom-dropdown-list--display .qt-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */
.so-setting-output-menu--display .so-setting-output-option,
.so-setting-output-menu--display .so-setting-output-option--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-setting-output-menu--display .so-setting-output-option:hover {
  background-color: transparent !important;
}

.so-setting-output-menu--display .so-setting-output-option--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.so-setting-output-menu--display .so-setting-output-check {
  color: #999999 !important;
}

/* ===== from pages/Sales/RecurringSalesOrder/RecurringSalesOrder.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.recurring-so-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.recurring-so-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.recurring-so-header {
  margin-bottom: 0;
}

.recurring-so-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.recurring-so-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.recurring-so-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.recurring-so-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.recurring-so-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.recurring-so-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.recurring-so-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.recurring-so-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.recurring-so-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.recurring-so-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.recurring-so-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.recurring-so-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.recurring-so-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.recurring-so-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.recurring-so-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.recurring-so-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.recurring-so-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.recurring-so-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.recurring-so-layout-dropdown-item:last-child {
  border-bottom: none;
}

.recurring-so-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.recurring-so-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.recurring-so-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.recurring-so-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.recurring-so-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.recurring-so-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.recurring-so-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.recurring-so-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recurring-so-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.recurring-so-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.recurring-so-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.recurring-so-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.recurring-so-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.recurring-so-filter-parameter-wrapper {
  position: relative;
}

.recurring-so-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.recurring-so-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.recurring-so-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.recurring-so-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.recurring-so-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.recurring-so-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.recurring-so-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.recurring-so-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.recurring-so-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.recurring-so-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.recurring-so-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.recurring-so-filter-close:hover {
  background-color: #f0f0f0;
}

.recurring-so-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.recurring-so-filter-group {
  margin-bottom: 1rem;
}

.recurring-so-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.recurring-so-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recurring-so-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.recurring-so-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.recurring-so-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.recurring-so-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.recurring-so-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.recurring-so-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.recurring-so-filter-org-container {
  flex: 1 1;
  position: relative;
}

.recurring-so-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.recurring-so-filter-org-input:hover {
  border-color: #C2DE54;
}

.recurring-so-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.recurring-so-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.recurring-so-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.recurring-so-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.recurring-so-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.recurring-so-filter-tag-remove:hover {
  color: #000;
}

.recurring-so-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.recurring-so-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.recurring-so-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.recurring-so-filter-org-item:hover {
  background-color: #f5f5f5;
}

.recurring-so-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.recurring-so-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.recurring-so-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.recurring-so-filter-org-code {
  font-weight: 600;
  color: #333;
}

.recurring-so-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.recurring-so-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.recurring-so-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.recurring-so-type-dropdown-item:last-child {
  border-bottom: none;
}

.recurring-so-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.recurring-so-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.recurring-so-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.recurring-so-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.recurring-so-table {
  animation: recurringSoFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes recurringSoFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .recurring-so-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .recurring-so-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .recurring-so-type-dropdown {
    min-width: 11.25rem;
  }

  .recurring-so-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/RecurringSalesOrder/RecurringSalesOrderModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.rs-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.rs-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.rs-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.rs-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.rs-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.rs-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.rs-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.rs-modal-pov-button--external.rs-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.rs-modal-pov-button--external .rs-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-pov-button--external .rs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.rs-modal-pov-caret--open {
  transform: rotate(180deg);
}

.rs-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.rs-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.rs-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.rs-modal-pov-dropdown-item span {
  flex: 1 1;
}

.rs-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.rs-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.rs-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.rs-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.rs-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.rs-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.rs-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.rs-modal-tabs--display .rs-modal-tab {
  color: #666666;
}

.rs-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.rs-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.rs-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.rs-modal-tabs--display .rs-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.rs-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.rs-modal-tabs--external .rs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.rs-modal-tabs--external.rs-modal-tabs--display .rs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.rs-modal-tabs--external .rs-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.rs-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.rs-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.rs-modal-action-button span {
  white-space: nowrap;
}

.rs-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.rs-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.rs-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.rs-modal-action-button--disabled .rs-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.rs-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.rs-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.rs-modal-left-area--full .rs-modal-back-button {
  transition: width 300ms ease;
}

.rs-modal-left-area--full .rs-modal-back-button:hover {
  width: 3.5rem;
}

.rs-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.rs-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.rs-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rs-modal-content--item {
  padding-bottom: 1rem;
}

.rs-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.rs-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.rs-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.rs-modal-attachment-table-container .rs-modal-detail-table thead,
.rs-modal-attachment-table-container .rs-modal-attachment-table thead {
  box-shadow: none !important;
}

.rs-modal-attachment-table-container .rs-modal-detail-table tr,
.rs-modal-attachment-table-container .rs-modal-attachment-table tr {
  box-shadow: none !important;
}

.rs-modal-attachment-table-container .rs-modal-detail-table tbody tr:last-child,
.rs-modal-attachment-table-container .rs-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.rs-modal-attachment-table-container .rs-modal-detail-table tbody tr:last-child td,
.rs-modal-attachment-table-container .rs-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.rs-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.rs-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.rs-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.rs-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.rs-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.rs-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.rs-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.rs-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.rs-modal-attachment-filename--external {
  color: #E67E22;
}

.rs-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.rs-modal-tab-content--display .rs-modal-attachment-filename--external {
  color: #E67E22;
}

.rs-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.rs-modal-attachment-size {
  color: #666666;
}

.rs-modal-attachment-date {
  color: #666666;
}

.rs-modal-attachment-uploadedby {
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.rs-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.rs-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.rs-modal-attachment-browse-btn:focus {
  outline: none;
}

.rs-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.rs-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.rs-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-attachment-browse-btn--disabled .rs-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.rs-modal-tab-content--display .rs-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.rs-modal-tab-content--display .rs-modal-attachment-filename.rs-modal-attachment-filename--external {
  color: #E67E22;
}

.rs-modal-tab-content--display .rs-modal-attachment-type {
  color: #666666;
}

.rs-modal-tab-content--display .rs-modal-attachment-size {
  color: #666666;
}

.rs-modal-tab-content--display .rs-modal-attachment-date {
  color: #666666;
}

.rs-modal-tab-content--display .rs-modal-attachment-uploadedby {
  color: #333333;
}

.rs-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.rs-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.rs-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.rs-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.rs-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.rs-modal-tab-content--display .rs-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.rs-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.rs-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.rs-modal-tab-content--display .rs-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.rs-modal-basic-section--external .rs-modal-form-input:focus {
  border-color: #F5B041;
}

.rs-modal-basic-section--external .rs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.rs-modal-tab-content--external .rs-modal-form-input:focus,
.rs-modal-tab-content--external .rs-modal-form-textarea:focus,
.rs-modal-tab-content--external .rs-modal-custom-dropdown-input:focus,
.rs-modal-tab-content--external .rs-modal-date-input:focus,
.rs-modal-tab-content--external .rs-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.rs-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.rs-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.rs-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.rs-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.rs-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.rs-modal-tab-content--display .rs-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.rs-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.rs-modal-tab-content--display .rs-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.rs-modal-partner-header-section--external .rs-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.rs-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.rs-modal-tab-content--display .rs-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.rs-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.rs-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.rs-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.rs-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rs-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.rs-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.rs-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.rs-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.rs-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.rs-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.rs-modal-chat-section {
  padding: 1.5rem 0;
}

.rs-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.rs-modal-chat-header h3 {
  margin: 0;
}

.rs-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.rs-modal-chat-new-thread .rs-modal-form-textarea {
  min-height: 5rem;
}

.rs-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.rs-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.rs-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.rs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.rs-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.rs-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.rs-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.rs-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.rs-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.rs-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.rs-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.rs-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.rs-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.rs-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-chat-user-name {
  color: #333333 !important;
}

.rs-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.rs-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.rs-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.rs-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.rs-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.rs-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.rs-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.rs-modal-chat-reply-btn:hover .rs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.rs-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.rs-modal-chat-replies .rs-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.rs-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.rs-modal-chat-reply-input .rs-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.rs-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.rs-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.rs-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.rs-modal-tab-content--display .rs-modal-chat-thread {
  border-color: #E5E5E5;
}

.rs-modal-tab-content--display .rs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display .rs-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-chat-user-position {
  background-color: #E8F5E9;
}

.rs-modal-tab-content--display .rs-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.rs-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.rs-modal-tab-content--display .rs-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.rs-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.rs-modal-notes-header-section--external .rs-modal-form-textarea:focus {
  border-color: #F5B041;
}

.rs-modal-chat-section--external .rs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.rs-modal-chat-avatar--external {
  background-color: #F5B041;
}

.rs-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.rs-modal-tab-content--display .rs-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-thread {
  border-color: #E5E5E5;
}

.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-message--main {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-user-name {
  color: #333333 !important;
}

.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-user-position {
  background-color: #FDE8D0;
}

.rs-modal-tab-content--display.rs-modal-tab-content--external .rs-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.rs-modal-chat-reply-btn--external {
  color: #E67E22;
}

.rs-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.rs-modal-chat-reply-btn--external .rs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.rs-modal-chat-reply-btn--external:hover .rs-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.rs-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.rs-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.rs-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.rs-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.rs-modal-chat-textarea-wrapper {
  position: relative;
}

.rs-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.rs-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.rs-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.rs-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.rs-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.rs-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.rs-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rs-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.rs-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.rs-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.rs-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.rs-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.rs-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.rs-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.rs-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.rs-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.rs-modal-tab-content--display .rs-modal-table-empty-state-title {
  color: #666666;
}

.rs-modal-tab-content--display .rs-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.rs-modal-partner-header-section + .rs-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.rs-modal-partner-header-section + .rs-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.rs-modal-partner-header-section + .rs-modal-item-content-section .rs-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.rs-modal-partner-header-section + .rs-modal-item-content-section .rs-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.rs-modal-partner-header-section + .rs-modal-item-content-section .rs-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.rs-modal-partner-header-section + .rs-modal-item-content-section .rs-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.rs-modal-partner-header-section + .rs-modal-item-content-section .rs-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.rs-modal-partner-table-container .rs-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.rs-modal-partner-table-container .rs-modal-partner-table th:last-child,
.rs-modal-partner-table-container .rs-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.rs-modal-detail-table-container--external.rs-modal-partner-table-container .rs-modal-partner-table th:last-child,
.rs-modal-detail-table-container--external.rs-modal-partner-table-container .rs-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.rs-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.rs-modal-item-header-section .rs-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-tab-content--display .rs-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.rs-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.rs-modal-tab-content--display .rs-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.rs-modal-item-header-section--external .rs-modal-form-input:focus {
  border-color: #F5B041;
}

.rs-modal-item-header-section--external .rs-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.rs-modal-detail-subtabs--external .rs-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.rs-modal-detail-subtabs--external .rs-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.rs-modal-detail-subtabs--external .rs-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.rs-modal-tab-content--display .rs-modal-detail-subtabs--external .rs-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.rs-modal-tab-content--display .rs-modal-detail-subtabs--external .rs-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.rs-modal-tab-content.rs-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.rs-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.rs-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.rs-modal-item-table-wrapper .rs-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.rs-modal-item-table-wrapper .rs-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.rs-modal-item-table-wrapper--terms .rs-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.rs-modal-tab-content--external.rs-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.rs-modal-tab-content--external .rs-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-tab-content--external .rs-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-tab-content--external .rs-modal-item-table-wrapper--terms .rs-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.rs-modal-tab-content--external .rs-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.rs-modal-item-table-wrapper--terms .rs-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.rs-modal-item-table-wrapper--terms .rs-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-modal-item-table-wrapper--terms .rs-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.rs-modal-item-table-wrapper--terms .rs-modal-detail-table tr {
  height: auto;
}

.rs-modal-item-table-wrapper--terms .rs-modal-detail-table-container .rs-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.rs-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.rs-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.rs-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.rs-modal-volume-input-group .rs-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.rs-modal-volume-input-group .rs-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.rs-modal-volume-input-group .rs-modal-sla-input-wrapper .rs-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.rs-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.rs-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.rs-modal-volume-uom-list--display .rs-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-volume-uom-list--display .rs-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.rs-modal-volume-uom-list--display .rs-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-volume-uom-list--display .rs-modal-volume-uom-check {
  color: #999999 !important;
}

.rs-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.rs-modal-volume-uom-dropdown--display .rs-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.rs-modal-volume-uom-dropdown--display .rs-modal-volume-uom-item:hover {
  background-color: transparent;
}

.rs-modal-volume-uom-dropdown--display .rs-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.rs-modal-volume-uom-dropdown--display .rs-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.rs-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.rs-modal-weight-input-group .rs-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.rs-modal-weight-input-group .rs-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.rs-modal-weight-input-group .rs-modal-sla-input-wrapper .rs-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.rs-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.rs-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-weight-uom-input::placeholder {
  color: #999999;
}

.rs-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.rs-modal-weight-uom-dropdown--display .rs-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.rs-modal-weight-uom-dropdown--display .rs-modal-weight-uom-item:hover {
  background-color: transparent;
}

.rs-modal-weight-uom-dropdown--display .rs-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.rs-modal-weight-uom-dropdown--display .rs-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.rs-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.rs-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.rs-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.rs-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.rs-modal-form-input--display ~ .rs-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.rs-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.rs-modal-form-input--display {
  cursor: default;
}

.rs-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.rs-modal-form-label--display {
  color: #333333 !important;
}

.rs-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.rs-modal-form-label--display .rs-modal-required {
  color: #FF4D4F;
}

.rs-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.rs-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.rs-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.rs-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.rs-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.rs-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.rs-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rs-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.rs-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.rs-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.rs-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.rs-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.rs-modal-sla-spinner-btn:disabled .rs-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.rs-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sla-spinner-btn:hover .rs-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.rs-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.rs-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.rs-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.rs-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.rs-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.rs-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.rs-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.rs-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.rs-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.rs-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.rs-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.rs-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.rs-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.rs-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.rs-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.rs-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.rs-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.rs-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.rs-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.rs-modal-stage-dropdown-input--display .rs-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.rs-modal-stage-dropdown-input--display .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.rs-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.rs-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.rs-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.rs-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.rs-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.rs-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.rs-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.rs-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.rs-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.rs-modal-accordion-header--display {
  color: #333333;
}

.rs-modal-accordion-header--display.rs-modal-accordion-header--active {
  color: #333333;
}

.rs-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.rs-modal-accordion-header--display .rs-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.rs-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.rs-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.rs-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.rs-modal-stage-main-title--display {
  color: #138B4C;
}

.rs-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-stage-title--display {
  color: #333333;
}

.rs-modal-stage-current {
  margin-bottom: 1.875rem;
}

.rs-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.rs-modal-stage-label--display {
  color: #666666;
}

.rs-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-stage-subtitle--display {
  color: #333333;
}

.rs-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.rs-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.rs-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.rs-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.rs-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.rs-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.rs-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.rs-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.rs-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rs-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.rs-modal-download-button:active {
  background-color: #E0E0E0;
}

.rs-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-download-button--display .rs-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.rs-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.rs-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.rs-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.rs-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.rs-modal-timeline-item--display .rs-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.rs-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.rs-modal-timeline-badge--inactive .rs-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.rs-modal-timeline-item--display .rs-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.rs-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.rs-modal-timeline-item--display .rs-modal-timeline-line {
  background-color: #138B4C;
}

.rs-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rs-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.rs-modal-timeline-status--display {
  color: #333333;
}

.rs-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.rs-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.rs-modal-timeline-date--display {
  color: #666666;
}

.rs-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.rs-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.rs-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.rs-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.rs-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.rs-modal-timeline-document--display {
  color: #138B4C;
}

.rs-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.rs-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.rs-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.rs-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.rs-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.rs-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.rs-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.rs-modal-activity-item--display .rs-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.rs-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.rs-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.rs-modal-activity-item--display .rs-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.rs-modal-activity-item--display .rs-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.rs-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.rs-modal-activity-item--display .rs-modal-activity-line {
  background-color: #138B4C;
}

.rs-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.rs-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.rs-modal-activity-type--display {
  color: #333333;
}

.rs-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.rs-modal-activity-header--display {
  color: #666666;
}

.rs-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.rs-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.rs-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.rs-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.rs-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.rs-modal-activity-change--display .rs-modal-activity-field {
  color: #333333;
}

.rs-modal-activity-change--display .rs-modal-activity-new {
  color: #138B4C;
}

.rs-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.rs-modal-activity-date--display {
  color: #666666;
}

.rs-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.rs-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.rs-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.rs-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.rs-modal-activity-more--display {
  color: #138B4C;
}

.rs-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-activity-more--display .rs-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.rs-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.rs-modal-reference-table thead {
  background-color: #F9F9F9;
}

.rs-modal-tab-content--display .rs-modal-reference-table thead {
  background-color: #FAFAFA;
}

.rs-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.rs-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.rs-modal-tab-content--display .rs-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.rs-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.rs-modal-tab-content--display .rs-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.rs-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.rs-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.rs-modal-detail-subtab:hover {
  color: #138B4C;
}

.rs-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.rs-modal-tab-content--display .rs-modal-detail-subtab {
  color: #666666;
}

.rs-modal-tab-content--display .rs-modal-detail-subtab:hover {
  color: #138B4C;
}

.rs-modal-tab-content--display .rs-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.rs-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.rs-modal-tab-content.rs-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.rs-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-detail-delivery-wrapper .rs-modal-form-label {
  flex-shrink: 0;
}

.rs-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.rs-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.rs-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.rs-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.rs-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.rs-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.rs-modal-detail-table-container .rs-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.rs-modal-detail-table-container .rs-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-modal-detail-table-container .rs-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.rs-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.rs-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.rs-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.rs-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.rs-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.rs-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.rs-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-detail-table th,
.rs-modal-tab-content--display .rs-modal-packaging-table th,
.rs-modal-tab-content--display .rs-modal-partner-table th,
.rs-modal-tab-content--display .rs-modal-attachment-table th {
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-detail-table td,
.rs-modal-tab-content--display .rs-modal-packaging-table td,
.rs-modal-tab-content--display .rs-modal-partner-table td,
.rs-modal-tab-content--display .rs-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-description,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-text,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-batch,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-serial,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-so-item,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-package-no,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-product-type,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-product-group,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-product-category,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.rs-modal-tab-content--display .rs-modal-detail-table tbody tr:hover .rs-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-description,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-text,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-batch,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-serial,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-so-item,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-package-no,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-type,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-group,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-category,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .rs-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.rs-modal-detail-table-container .rs-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.rs-modal-detail-table-container .rs-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.rs-modal-detail-table-container--external .rs-modal-detail-table td {
  color: #555555 !important;
}

.rs-modal-detail-table-container .rs-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.rs-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.rs-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.rs-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.rs-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.rs-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.rs-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.rs-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.rs-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.rs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.rs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.rs-modal-detail-table tbody tr:hover .detail-table-description,
.rs-modal-detail-table tbody tr:hover .detail-table-text,
.rs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.rs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.rs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.rs-modal-detail-table tbody tr:hover .detail-table-batch,
.rs-modal-detail-table tbody tr:hover .detail-table-serial,
.rs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.rs-modal-detail-table tbody tr:hover .detail-table-so-item,
.rs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.rs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.rs-modal-detail-table tbody tr:hover .detail-table-package-no,
.rs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.rs-modal-detail-table tbody tr:hover .detail-table-product-type,
.rs-modal-detail-table tbody tr:hover .detail-table-product-group,
.rs-modal-detail-table tbody tr:hover .detail-table-product-category,
.rs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.rs-modal-detail-table tbody tr:hover .rs-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-description,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-text,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-available-qty,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-batch,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-serial,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-sales-order,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-so-item,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-pr-item,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-package-no,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-type,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-group,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-category,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .detail-table-product-variant,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .rs-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.rs-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.rs-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.rs-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.rs-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.rs-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.rs-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rs-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.rs-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.rs-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.rs-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.rs-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.rs-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.rs-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.rs-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.rs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.rs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.rs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.rs-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.rs-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.rs-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.rs-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.rs-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rs-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.rs-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.rs-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.rs-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.rs-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.rs-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.rs-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.rs-modal-add-item-btn--disabled .rs-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.rs-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.rs-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.rs-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.rs-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.rs-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.rs-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.rs-modal-sales-order-table-container .rs-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.rs-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.rs-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.rs-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.rs-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.rs-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.rs-modal-table-input:focus {
  outline: none;
}

.rs-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.rs-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.rs-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.rs-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.rs-modal-tags-container {
  position: relative;
  width: 100%;
}

.rs-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.rs-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.rs-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.rs-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.rs-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.rs-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.rs-modal-tags-input--display .rs-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.rs-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.rs-modal-tag-remove:hover {
  color: #333333;
}

.rs-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.rs-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.rs-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.rs-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.rs-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.rs-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.rs-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.rs-modal-status-container {
  position: relative;
  width: 100%;
}

.rs-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.rs-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.rs-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.rs-modal-status-placeholder {
  color: #999999;
}

.rs-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.rs-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.rs-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.rs-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-status-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-status-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.rs-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.rs-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.rs-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.rs-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.rs-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.rs-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.rs-modal-status-input--display .rs-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.rs-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.rs-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.rs-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.rs-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.rs-modal-stage-dropdown-placeholder {
  color: #999999;
}

.rs-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.rs-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.rs-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.rs-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.rs-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.rs-modal-stage--created .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.rs-modal-stage--approved .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.rs-modal-stage--processed .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.rs-modal-stage--picked .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.rs-modal-stage--packed .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.rs-modal-stage--planned .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.rs-modal-stage--loaded .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.rs-modal-stage--issued .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.rs-modal-stage--departed .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.rs-modal-stage--arrived .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.rs-modal-stage--unloaded .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.rs-modal-stage--delivered .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.rs-modal-stage--confirmed .rs-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.rs-modal-stage--billed .rs-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.rs-modal-stage-dropdown-input .rs-modal-stage,
.rs-modal-stage-dropdown-item .rs-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.rs-modal-baseline-date-dropdown {
  position: relative;
}

.rs-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.rs-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.rs-modal-reference-type-dropdown {
  position: relative;
}

.rs-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.rs-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.rs-modal-delivery-priority-dropdown {
  position: relative;
}

.rs-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.rs-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.rs-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.rs-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.rs-modal-delivery-priority-separator {
  color: #666666;
}

.rs-modal-delivery-priority-name {
  color: #333333;
}

.rs-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.rs-modal-organization-dropdown {
  position: relative;
}

.rs-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.rs-modal-organization-dropdown-content--display .rs-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-organization-dropdown-content--display .rs-modal-organization-item:hover {
  background-color: transparent !important;
}

.rs-modal-organization-dropdown-content--display .rs-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-organization-dropdown-content--display .rs-modal-organization-code,
.rs-modal-organization-dropdown-content--display .rs-modal-organization-name,
.rs-modal-organization-dropdown-content--display .rs-modal-organization-separator {
  color: #999999 !important;
}

.rs-modal-organization-dropdown-content--display .rs-modal-organization-check {
  color: #999999 !important;
}

.rs-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-organization-separator {
  color: #999999;
}

.rs-modal-organization-name {
  color: #333333;
}

.rs-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.rs-modal-sales-structure-dropdown {
  position: relative;
}

.rs-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.rs-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.rs-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-sales-structure-separator {
  color: #999999;
}

.rs-modal-sales-structure-name {
  color: #333333;
}

.rs-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.rs-modal-delivery-type-dropdown {
  position: relative;
}

.rs-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.rs-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.rs-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.rs-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.rs-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.rs-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.rs-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.rs-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-delivery-type-separator {
  color: #999999;
}

.rs-modal-delivery-type-description {
  color: #333333;
}

.rs-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.rs-modal-content::-webkit-scrollbar,
.rs-modal-stage-content::-webkit-scrollbar,


.rs-modal-content::-webkit-scrollbar-track,
.rs-modal-stage-content::-webkit-scrollbar-track,


.rs-modal-content::-webkit-scrollbar-thumb,
.rs-modal-stage-content::-webkit-scrollbar-thumb,


.rs-modal-content::-webkit-scrollbar-thumb:hover,
.rs-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.rs-modal-sales-channel-dropdown {
  position: relative;
}

.rs-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.rs-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-sales-channel-separator {
  color: #999999;
}

.rs-modal-sales-channel-name {
  color: #333333;
}

.rs-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.rs-modal-sales-unit-dropdown {
  position: relative;
}

.rs-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.rs-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-sales-unit-separator {
  color: #999999;
}

.rs-modal-sales-unit-name {
  color: #333333;
}

.rs-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.rs-modal-organization-item--placeholder,
.rs-modal-sales-structure-item--placeholder,
.rs-modal-sales-channel-item--placeholder,
.rs-modal-sales-unit-item--placeholder,
.rs-modal-territory-item--placeholder,
.rs-modal-sales-office-item--placeholder,
.rs-modal-sold-to-party-item--placeholder,
.rs-modal-deliver-to-party-item--placeholder,
.rs-modal-attention-to-deliver-item--placeholder,
.rs-modal-incoterm-item--placeholder,
.rs-modal-delivery-point-item--placeholder,
.rs-modal-shipping-point-item--placeholder,
.rs-modal-sales-order-item--placeholder,
.rs-modal-sales-team-item--placeholder,
.rs-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.rs-modal-organization-item--placeholder:hover,
.rs-modal-sales-structure-item--placeholder:hover,
.rs-modal-sales-channel-item--placeholder:hover,
.rs-modal-sales-unit-item--placeholder:hover,
.rs-modal-territory-item--placeholder:hover,
.rs-modal-sales-office-item--placeholder:hover,
.rs-modal-sold-to-party-item--placeholder:hover,
.rs-modal-deliver-to-party-item--placeholder:hover,
.rs-modal-attention-to-deliver-item--placeholder:hover,
.rs-modal-incoterm-item--placeholder:hover,
.rs-modal-delivery-point-item--placeholder:hover,
.rs-modal-shipping-point-item--placeholder:hover,
.rs-modal-sales-order-item--placeholder:hover,
.rs-modal-sales-team-item--placeholder:hover,
.rs-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.rs-modal-sold-to-party-dropdown {
  position: relative;
}

.rs-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-sold-to-party-input:focus,
.rs-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.rs-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.rs-modal-sold-to-party-separator {
  color: #999999;
}

.rs-modal-sold-to-party-name {
  color: #333333;
}

.rs-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.rs-modal-deliver-to-party-dropdown {
  position: relative;
}

.rs-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.rs-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.rs-modal-deliver-to-party-separator {
  color: #999999;
}

.rs-modal-deliver-to-party-name {
  color: #333333;
}

.rs-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.rs-modal-attention-to-deliver-dropdown {
  position: relative;
}
.rs-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.rs-modal-attention-to-deliver-separator {
  color: #999999;
}
.rs-modal-attention-to-deliver-name {
  color: #333333;
}
.rs-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.rs-modal-incoterm-dropdown {
  position: relative;
}
.rs-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.rs-modal-incoterm-separator {
  color: #999999;
}
.rs-modal-incoterm-name {
  color: #333333;
}
.rs-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.rs-modal-delivery-point-dropdown {
  position: relative;
}
.rs-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.rs-modal-delivery-point-separator {
  color: #999999;
}
.rs-modal-delivery-point-name {
  color: #333333;
}
.rs-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.rs-modal-shipping-point-dropdown {
  position: relative;
}
.rs-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.rs-modal-shipping-point-separator {
  color: #999999;
}
.rs-modal-shipping-point-name {
  color: #333333;
}
.rs-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.rs-modal-sales-order-dropdown {
  position: relative;
}
.rs-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.rs-modal-sales-order-separator {
  color: #999999;
}
.rs-modal-sales-order-name {
  color: #333333;
}
.rs-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.rs-modal-date-picker {
  position: relative;
}
.rs-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.rs-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.rs-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.rs-modal-date-input::-webkit-datetime-edit-text,
.rs-modal-date-input::-webkit-datetime-edit-month-field,
.rs-modal-date-input::-webkit-datetime-edit-day-field,
.rs-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.rs-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.rs-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.rs-modal-sales-person-dropdown {
  position: relative;
}
.rs-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.rs-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.rs-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.rs-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.rs-modal-sales-person-separator {
  color: #999999;
}
.rs-modal-sales-person-name {
  color: #333333;
}
.rs-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.rs-modal-sales-team-dropdown {
  position: relative;
}
.rs-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rs-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.rs-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.rs-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.rs-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.rs-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.rs-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rs-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.rs-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.rs-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.rs-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rs-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.rs-modal-sales-team-separator {
  color: #999999;
}
.rs-modal-sales-team-name {
  color: #333333;
}
.rs-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.rs-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.rs-modal-territory-dropdown {
  position: relative;
}

.rs-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.rs-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-territory-separator {
  color: #999999;
}

.rs-modal-territory-name {
  color: #333333;
}

.rs-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.rs-modal-sales-office-dropdown {
  position: relative;
}

.rs-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.rs-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.rs-modal-sales-office-separator {
  color: #999999;
}

.rs-modal-sales-office-name {
  color: #333333;
}

.rs-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.rs-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.rs-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.rs-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.rs-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.rs-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.rs-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.rs-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-table-dropdown-input:focus {
  outline: none;
}

.rs-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.rs-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.rs-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.rs-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.rs-modal-delivery-type-list::-webkit-scrollbar,
.rs-modal-stage-dropdown-list::-webkit-scrollbar,
.rs-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.rs-modal-delivery-type-list::-webkit-scrollbar-track,
.rs-modal-stage-dropdown-list::-webkit-scrollbar-track,
.rs-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-delivery-type-list::-webkit-scrollbar-thumb,
.rs-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.rs-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.rs-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.rs-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.rs-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.rs-modal-wrapper,
.rs-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.rs-modal-wrapper,
.rs-modal-wrapper *,
.rs-modal-content,
.rs-modal-data-flow-2-container,
.rs-modal-data-flow-container,
.rs-modal-calendar-container,
.rs-modal-calendar-milestones-list,
.rs-modal-calendar-view,
.rs-modal-calendar-yearly,
.rs-modal-calendar-monthly,
.rs-modal-calendar-weekly,
.rs-modal-calendar-weekly-body,
.rs-modal-calendar-daily,
.rs-modal-calendar-daily-timeline,
.rs-modal-calendar-grid,
.rs-modal-calendar-grid-body,
.rs-modal-detail-table-container,
.rs-modal-item-table-wrapper,
.rs-modal-attachment-table-container,
.rs-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.rs-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.rs-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.rs-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.rs-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.rs-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.rs-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.rs-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.rs-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.rs-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-tab-content--display .rs-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.rs-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-tab-content--display .rs-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.rs-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.rs-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.rs-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) {
  font-weight: 600;
}

.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) .rs-modal-packaging-input,
.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) .rs-modal-packaging-input--display,
.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) .rs-modal-handling-product-input,
.rs-modal-packaging-row--unassigned:not(.rs-modal-packaging-row--expanded) .rs-modal-handling-product-input--display {
  font-weight: 600;
}

.rs-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.rs-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row td.rs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row td.rs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row td.rs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td.rs-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded td.rs-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row--expanded:hover td.rs-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display,
.rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display,
.rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.rs-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.rs-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-tab-content--display .rs-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.rs-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-tab-content--display .rs-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.rs-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.rs-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.rs-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.rs-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.rs-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.rs-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.rs-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.rs-modal-packaging-detail-table th:first-child,
.rs-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.rs-modal-packaging-detail-table th:nth-child(2),
.rs-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.rs-modal-packaging-detail-table th:nth-child(3),
.rs-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.rs-modal-packaging-detail-table td:nth-child(4),
.rs-modal-packaging-detail-table td:nth-child(6),
.rs-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.rs-modal-packaging-detail-table td:nth-child(5),
.rs-modal-packaging-detail-table td:nth-child(7),
.rs-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.rs-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.rs-modal-tab-content--display .rs-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display .rs-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.rs-modal-tab-content--display .rs-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.rs-modal-tab-content--display .rs-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.rs-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.rs-modal-packaging-table td:last-child,
.rs-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.rs-modal-packaging-table td:last-child .rs-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.rs-modal-detail-table-container--external .rs-modal-packaging-table th:last-child,
.rs-modal-detail-table-container--external .rs-modal-packaging-table td.rs-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.rs-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.rs-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.rs-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.rs-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.rs-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.rs-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.rs-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.rs-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.rs-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.rs-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.rs-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.rs-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.rs-modal-packaging-child-table tr {
  border: none !important;
}

.rs-modal-packaging-child-table thead,
.rs-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.rs-modal-packaging-child-table th:first-child,
.rs-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.rs-modal-packaging-child-table th:nth-child(2),
.rs-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.rs-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.rs-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.rs-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.rs-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.rs-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.rs-modal-packaging-child-table th:nth-child(3),
.rs-modal-packaging-child-table td:nth-child(3),
.rs-modal-packaging-child-table th:nth-child(4),
.rs-modal-packaging-child-table td:nth-child(4),
.rs-modal-packaging-child-table th:nth-child(5),
.rs-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.rs-modal-packaging-child-table th:nth-child(6),
.rs-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.rs-modal-packaging-child-table th:nth-child(7),
.rs-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.rs-modal-detail-table-container--external .rs-modal-packaging-child-table th:last-child,
.rs-modal-detail-table-container--external .rs-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.rs-modal-packaging-child-table td:last-child .rs-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.rs-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.rs-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.rs-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.rs-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.rs-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row {
  transition: none !important;
}

.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display,
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display:focus,
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display,
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display:focus,
.rs-modal-tab-content--display .rs-modal-detail-table-container .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display:focus,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display:focus,
.rs-modal-tab-content--display .rs-modal-detail-table-container--external .rs-modal-packaging-table tbody tr.rs-modal-packaging-row:hover td .rs-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.rs-modal-detail-table-container--external .rs-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.rs-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.rs-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.rs-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.rs-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.rs-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.rs-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.rs-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.rs-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.rs-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.rs-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.rs-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.rs-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.rs-modal-detail-table-container--external .rs-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.rs-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-item--display {
  color: #999999 !important;
}

.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-code,
.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-name,
.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-separator {
  color: #999999 !important;
}

.rs-modal-handling-product-dropdown-content--display .rs-modal-handling-product-check {
  color: #999999 !important;
}

.rs-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.rs-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.rs-modal-handling-product-dropdown-content--narrow .rs-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.rs-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.rs-modal-packaging-detail-table .rs-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.rs-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.rs-modal-detail-table-container--dropdown-open .rs-modal-detail-table {
  overflow: visible;
}

.rs-modal-detail-table-container--dropdown-open .rs-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.rs-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rs-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.rs-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.rs-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.rs-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.rs-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.rs-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.rs-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.rs-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.rs-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.rs-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.rs-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.rs-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.rs-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.rs-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.rs-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.rs-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.rs-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.rs-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.rs-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.rs-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-item:hover {
  background-color: transparent;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-item--placeholder {
  display: none;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-code,
.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-name,
.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-separator {
  color: #555555;
}

.rs-modal-handling-product-dropdown-content--view-only .rs-modal-handling-product-check {
  color: #888888;
}

.rs-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.rs-modal-handling-product-separator {
  color: #999999;
}

.rs-modal-handling-product-name {
  color: #333333;
}

.rs-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.rs-modal-handling-product-item--placeholder {
  cursor: default;
}

.rs-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.rs-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.rs-modal-detail-table td:has(.rs-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.rs-modal-detail-table td .rs-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.rs-modal-detail-table td .rs-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.rs-modal-detail-table td .rs-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.rs-modal-detail-table td .rs-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.rs-modal-detail-table td .rs-modal-handling-product-input--display,
.rs-modal-detail-table td .rs-modal-handling-product-input--display:focus,
.rs-modal-detail-table td .rs-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display,
.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display:focus,
.rs-modal-detail-table-container .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display:focus,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover td .rs-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.rs-modal-detail-table td .rs-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.rs-modal-detail-table td .rs-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.rs-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.rs-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.rs-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.rs-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-table-text-icon-btn--filled:not(.rs-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.rs-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.rs-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.rs-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.rs-modal-table-text-icon-btn--display.rs-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.rs-modal-table-text-icon-btn--display.rs-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-table-text-icon-btn--display.rs-modal-table-text-icon-btn--external.rs-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.rs-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.rs-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.rs-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.rs-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.rs-modal-serial-assignment-btn {
  width: 10.625rem;
}

.rs-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.rs-modal-batch-assignment-btn--filled .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.rs-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.rs-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.rs-modal-batch-assignment-btn--display .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-batch-assignment-btn--display.rs-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.rs-modal-batch-assignment-btn--display.rs-modal-batch-assignment-btn--filled .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.rs-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.rs-modal-secured-qty-btn.rs-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.rs-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.rs-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.rs-modal-secured-qty-btn--grey .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.rs-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.rs-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.rs-modal-batch-assignment-btn--partial .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.rs-modal-batch-assignment-btn--display.rs-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.rs-modal-batch-assignment-btn--display.rs-modal-batch-assignment-btn--partial .rs-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.rs-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.rs-modal-secured-qty-modal .rs-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.rs-modal-secured-qty-modal .rs-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.rs-modal-secured-qty-modal.rs-modal-batch-assignment-modal--display .rs-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.rs-modal-secured-qty-modal .rs-modal-item-text-content {
  overflow-x: hidden;
}

.rs-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.rs-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.rs-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.rs-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.rs-modal-batch-assignment-modal--display .rs-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.rs-modal-batch-assignment-modal--display .rs-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.rs-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.rs-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.rs-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.rs-modal-secured-qty-lock-btn--open .rs-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.rs-modal-secured-qty-lock-btn--locked .rs-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.rs-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.rs-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.rs-modal-batch-assignment-modal .rs-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.rs-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.rs-modal-batch-assignment-modal .rs-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.rs-modal-batch-assignment-modal .rs-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.rs-modal-batch-assignment-modal.rs-modal-batch-assignment-modal--display .rs-modal-item-text-info {
  background-color: #F2F8EA;
}

.rs-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.rs-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.rs-modal-batch-assignment-info-group {
  flex: 1 1;
}

.rs-modal-batch-assignment-info-group .rs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.rs-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.rs-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rs-modal-batch-assignment-table-section .rs-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.rs-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.rs-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.rs-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.rs-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.rs-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.rs-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.rs-modal-batch-assignment-table th,
.rs-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.rs-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.rs-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.rs-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.rs-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.rs-modal-batch-assignment-table tbody td:has(.rs-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.rs-modal-batch-assignment-table tbody td:has(.rs-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.rs-modal-batch-assignment-table tbody td:nth-child(2),
.rs-modal-batch-assignment-table tbody td:nth-child(3),
.rs-modal-batch-assignment-table tbody td:nth-child(4),
.rs-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.rs-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.rs-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.rs-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rs-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.rs-modal-batch-assignment-modal--display .rs-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.rs-modal-batch-assignment-modal--display .rs-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.rs-modal-batch-assignment-modal--display .rs-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-batch-assignment-modal--display .rs-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.rs-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.rs-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.rs-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.rs-modal-batch-assignment-table .rs-modal-placeholder-text {
  color: #CCCCCC;
}

.rs-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.rs-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.rs-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.rs-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.rs-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.rs-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.rs-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.rs-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.rs-modal-batch-assignment-table th.batch-table-frozen-batch,
table.rs-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.rs-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.rs-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.rs-modal-batch-assignment-table td.batch-table-frozen-batch,
table.rs-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.rs-modal-batch-assignment-table th.batch-table-frozen-batch,
table.rs-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.rs-modal-batch-assignment-table th.batch-table-frozen-assign,
table.rs-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.rs-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.rs-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.rs-modal-item-text-info {
  margin-bottom: 1rem;
}

.rs-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rs-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.rs-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.rs-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.rs-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.rs-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.rs-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.rs-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-item-text-modal .modal-header .modal-title,
.rs-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.rs-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.rs-modal-item-text-label--display {
  color: #333333;
}

.rs-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.rs-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.rs-modal-item-text-modal .rs-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.rs-modal-item-text-modal .rs-modal-item-text-textarea-wrapper .rs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.rs-modal-item-text-textarea {
  overflow-y: auto !important;
}

.rs-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.rs-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.rs-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.rs-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.rs-modal-add-do-item-modal .rs-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.rs-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.rs-modal-add-do-item-dropdown-section .rs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.rs-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rs-modal-add-do-item-table-section .rs-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.rs-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.rs-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.rs-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.rs-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.rs-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.rs-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.rs-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.rs-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.rs-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.rs-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.rs-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.rs-modal-detail-table td:first-child .rs-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.rs-modal-detail-table td:first-child .rs-modal-partner-type-input {
  padding-left: 0.625rem;
}

.rs-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.rs-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.rs-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.rs-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.rs-modal-partner-type-dropdown--display .rs-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.rs-modal-partner-type-dropdown-content--display .rs-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-partner-type-dropdown-content--display .rs-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.rs-modal-partner-type-dropdown-content--display .rs-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-partner-type-dropdown-content--display .rs-modal-partner-type-check {
  color: #999999 !important;
}

.rs-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.rs-modal-partner-type-dropdown--display .rs-modal-partner-type-value {
  color: #555555;
}

.rs-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.rs-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.rs-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.rs-modal-partner-type-item--placeholder {
  cursor: default;
}

.rs-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.rs-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.rs-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.rs-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.rs-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.rs-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.rs-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.rs-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.rs-modal-partner-id-dropdown--display .rs-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-code,
.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-name,
.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-separator {
  color: #999999 !important;
}

.rs-modal-partner-id-dropdown-content--display .rs-modal-partner-id-check {
  color: #999999 !important;
}

.rs-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.rs-modal-partner-id-dropdown--display .rs-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.rs-modal-detail-table tbody tr:hover .rs-modal-partner-type-dropdown--display .rs-modal-partner-type-input-wrapper,
.rs-modal-detail-table tbody tr:hover .rs-modal-partner-id-dropdown--display .rs-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .rs-modal-partner-type-dropdown--display .rs-modal-partner-type-input-wrapper,
.rs-modal-detail-table-container--external .rs-modal-detail-table tbody tr:hover .rs-modal-partner-id-dropdown--display .rs-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.rs-modal-partner-type-arrow--external {
  visibility: hidden;
}

.rs-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.rs-modal-partner-type-dropdown--external .rs-modal-partner-type-value {
  color: #555555;
}

.rs-modal-partner-id-dropdown--external .rs-modal-partner-id-value {
  color: #555555;
}

.rs-modal-detail-table-container--external .rs-modal-detail-table td.rs-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.rs-modal-partner-header-section--external .rs-modal-form-input--display {
  color: #555555;
}

.rs-modal-detail-table td.rs-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.rs-modal-tab-content--display .rs-modal-detail-table td.rs-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.rs-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.rs-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.rs-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.rs-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.rs-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.rs-modal-partner-id-item--placeholder {
  cursor: default;
}

.rs-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.rs-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.rs-modal-partner-id-separator {
  color: #999999;
}

.rs-modal-partner-id-name {
  color: #666666;
}

.rs-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.rs-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.rs-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.rs-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.rs-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.rs-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.rs-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.rs-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.rs-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.rs-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.rs-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.rs-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.rs-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.rs-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.rs-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.rs-modal-data-flow-stage--completed .rs-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.rs-modal-data-flow-stage--active .rs-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.rs-modal-data-flow-stage--completed .rs-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-data-flow-stage--active .rs-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.rs-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.rs-modal-data-flow-stage--completed .rs-modal-data-flow-stage-label {
  color: #138B4C;
}

.rs-modal-data-flow-stage--active .rs-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.rs-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.rs-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.rs-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.rs-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.rs-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.rs-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.rs-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.rs-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.rs-modal-data-flow-document--active .rs-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.rs-modal-data-flow-document-fold {
  display: none;
}

.rs-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.rs-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.rs-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.rs-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.rs-modal-data-flow-document-icon-wrapper--active .rs-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.rs-modal-data-flow-document--active .rs-modal-data-flow-document-title {
  color: #138B4C;
}

.rs-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.rs-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.rs-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.rs-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.rs-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.rs-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.rs-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.rs-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.rs-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.rs-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.rs-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.rs-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.rs-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.rs-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.rs-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.rs-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.rs-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.rs-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.rs-modal-terms-area-button .rs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.rs-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.rs-modal-tab-content--display .rs-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.rs-modal-tab-content--display .rs-modal-terms-area-button .rs-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.rs-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.rs-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.rs-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.rs-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.rs-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.rs-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.rs-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.rs-modal-data-flow-2-row {
  display: flex;
}

.rs-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.rs-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.rs-modal-data-flow-2-row--content .rs-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.rs-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.rs-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.rs-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.rs-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-label {
  color: #333333;
}

.rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage-label {
  color: #999999;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--completed .rs-modal-data-flow-2-stage-label {
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--active .rs-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.rs-modal-tab-content--display .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.rs-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.rs-modal-data-flow-2-row--content .rs-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.rs-modal-data-flow-2-row--content .rs-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.rs-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rs-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.rs-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.rs-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.rs-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.rs-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.rs-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.rs-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.rs-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-title,
.rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-title {
  color: #333333;
}

.rs-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.rs-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.rs-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.rs-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-title {
  color: #888888;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-title,
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-title {
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--completed .rs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--active .rs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-date {
  color: #333333;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.rs-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.rs-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.rs-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.rs-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.rs-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.rs-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.rs-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.rs-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.rs-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.rs-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.rs-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.rs-modal-data-flow-2-grid--external .rs-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.rs-modal-data-flow-2-grid--external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell {
  border-bottom: none;
}

.rs-modal-data-flow-2-grid--external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.rs-modal-data-flow-2-grid--external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell--label::after {
  display: none;
}

.rs-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.rs-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.rs-modal-data-flow-2-row--content-top .rs-modal-data-flow-2-document--buyer.rs-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.rs-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.rs-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.rs-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.rs-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.rs-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.rs-modal-data-flow-2-stage--external-completed .rs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.rs-modal-data-flow-2-stage--external-active .rs-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.rs-modal-data-flow-2-stage--external-completed .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.rs-modal-data-flow-2-stage--external-active .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.rs-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.rs-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.rs-modal-data-flow-2-document--external .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.rs-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.rs-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.rs-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.rs-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.rs-modal-data-flow-2-document--external .rs-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.rs-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.rs-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.rs-modal-data-flow-2-document--supplier .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.rs-modal-data-flow-2-document--supplier .rs-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.rs-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.rs-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.rs-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.rs-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier .rs-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier .rs-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-completed .rs-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--supplier-active .rs-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.rs-modal-tab-content--data-flow-2-external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.rs-modal-tab-content--data-flow-2-external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external .rs-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external .rs-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.rs-modal-tab-content--display.rs-modal-tab-content--data-flow-2-external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.rs-modal-tab-content--display.rs-modal-tab-content--data-flow-2-external .rs-modal-data-flow-2-row--header .rs-modal-data-flow-2-cell:has(.rs-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-circle,
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external-completed .rs-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external-active .rs-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-icon,
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external-completed .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external-active .rs-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-stage--external .rs-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-completed .rs-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.rs-modal-tab-content--display .rs-modal-data-flow-2-document--external-active .rs-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.rs-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.rs-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.rs-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.rs-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.rs-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.rs-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.rs-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.rs-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rs-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.rs-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.rs-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.rs-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.rs-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.rs-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.rs-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.rs-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.rs-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.rs-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.rs-modal-milestone-date-value {
  color: #666666;
}

.rs-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.rs-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.rs-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.rs-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.rs-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.rs-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.rs-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.rs-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.rs-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.rs-modal-activity-item--display .rs-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.rs-modal-calendar-milestones .rs-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.rs-modal-calendar-milestones .rs-modal-activity-user:hover {
  text-decoration: none;
}

.rs-modal-calendar-milestones .rs-modal-activity-item--display .rs-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.rs-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.rs-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rs-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.rs-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.rs-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-calendar-nav-btn:hover .rs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.rs-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.rs-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.rs-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.rs-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.rs-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.rs-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.rs-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.rs-modal-calendar-view-mode-btn--active + .rs-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.rs-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rs-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.rs-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.rs-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.rs-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.rs-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.rs-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.rs-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.rs-modal-calendar-grid-cell:nth-child(7n-1),
.rs-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.rs-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.rs-modal-calendar-grid-day-name:nth-child(6),
.rs-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.rs-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.rs-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.rs-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.rs-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.rs-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.rs-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.rs-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.rs-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.rs-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rs-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.rs-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rs-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.rs-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.rs-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.rs-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rs-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.rs-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.rs-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.rs-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.rs-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.rs-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.rs-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.rs-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.rs-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.rs-modal-calendar-weekly-day-column:nth-child(6),
.rs-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.rs-modal-calendar-weekly-day-header:nth-child(6),
.rs-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.rs-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.rs-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.rs-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.rs-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.rs-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.rs-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.rs-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.rs-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.rs-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rs-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.rs-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.rs-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.rs-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.rs-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.rs-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.rs-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.rs-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.rs-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.rs-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.rs-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.rs-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.rs-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.rs-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.rs-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.rs-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-view {
  border-color: #D0D0D0;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-view-mode-btn--active + .rs-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-milestones-header {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-view-title {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-grid-day-name {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-grid-cell-day {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-weekly-day-name {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-weekly-day-date {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-weekly-event-title {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-daily-header {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-daily-hour-label {
  color: #666666;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-daily-event-title {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar .rs-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.rs-modal-calendar-milestones-header--external {
  color: #333333;
}

.rs-modal-calendar-nav-btn--external .rs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.rs-modal-calendar-nav-btn--external:hover .rs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.rs-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.rs-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.rs-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.rs-modal-calendar-view-mode-btn--active-external + .rs-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.rs-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.rs-modal-tab-content--calendar-external .rs-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.rs-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.rs-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.rs-modal-activity-type--external {
  color: #333333;
}

.rs-modal-activity-user--external {
  color: #E67E22;
}

.rs-modal-activity-user--external:hover {
  color: #D35400;
}

.rs-modal-calendar-milestones .rs-modal-activity-user--external {
  color: #E67E22;
}

.rs-modal-calendar-milestones .rs-modal-activity-user--external:hover {
  color: #D35400;
}

.rs-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.rs-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.rs-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.rs-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.rs-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.rs-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.rs-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.rs-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.rs-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.rs-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.rs-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.rs-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.rs-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-milestones-header--external {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-view-mode-btn--active-external + .rs-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-calendar-nav-btn--external .rs-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-activity-type--external {
  color: #333333;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-activity-user--external {
  color: #E67E22;
}

.rs-modal-tab-content--display.rs-modal-tab-content--calendar-external .rs-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.rs-modal-input--error,
.rs-modal-form-input.rs-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.rs-modal-dropdown--error .rs-modal-delivery-type-input,
.rs-modal-dropdown--error .rs-modal-organization-input,
.rs-modal-dropdown--error .rs-modal-sales-structure-input,
.rs-modal-dropdown--error .rs-modal-sales-channel-input,
.rs-modal-dropdown--error .rs-modal-sales-unit-input,
.rs-modal-dropdown--error .rs-modal-territory-input,
.rs-modal-dropdown--error .rs-modal-sales-office-input,
.rs-modal-dropdown--error .rs-modal-sold-to-party-input,
.rs-modal-dropdown--error .rs-modal-deliver-to-party-input,
.rs-modal-dropdown--error .rs-modal-attention-to-deliver-input,
.rs-modal-dropdown--error .rs-modal-incoterm-input,
.rs-modal-dropdown--error .rs-modal-delivery-point-input,
.rs-modal-dropdown--error .rs-modal-shipping-point-input,
.rs-modal-dropdown--error .rs-modal-sales-order-input,
.rs-modal-dropdown--error .rs-modal-sales-team-input,
.rs-modal-dropdown--error .rs-modal-sales-person-input,
.rs-modal-dropdown--error .rs-modal-delivery-priority-input,
.rs-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.rs-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.rs-modal-date-picker-wrapper.rs-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.rs-modal-custom-dropdown {
  position: relative;
}

.rs-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.rs-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.rs-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.rs-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-check {
  color: #999999 !important;
}

.rs-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.rs-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.rs-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.rs-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.rs-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rs-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.rs-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.rs-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.rs-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.rs-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.rs-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.rs-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.rs-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rs-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.rs-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.rs-modal-setting-form-label--display {
  color: #333333;
}

.rs-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.rs-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-setting-dropdown--active .rs-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.rs-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.rs-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.rs-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.rs-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.rs-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.rs-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.rs-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-setting-dropdown-icon.rs-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.rs-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.rs-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.rs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.rs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.rs-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.rs-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.rs-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.rs-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.rs-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.rs-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.rs-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.rs-modal-setting-dropdown-item-separator {
  color: #999999;
}

.rs-modal-setting-dropdown-item-name {
  color: #333333;
}

.rs-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.rs-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.rs-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.rs-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.rs-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.rs-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.rs-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.rs-modal-setting-tab-content--print .rs-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.rs-modal-setting-tab-content--print .rs-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-modal-setting-tab-content--print .rs-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.rs-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.rs-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.rs-modal-setting-table thead tr {
  height: 2.25rem;
}

.rs-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.rs-modal-setting-table tbody tr {
  height: 2.25rem;
}

.rs-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.rs-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.rs-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.rs-modal-setting-table--display thead th:nth-child(2),
.rs-modal-setting-table--display thead th:nth-child(3),
.rs-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.rs-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.rs-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.rs-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.rs-modal-setting-table--transfer.rs-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.rs-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.rs-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.rs-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.rs-modal-setting-table--transfer:not(.rs-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.rs-modal-setting-table--transfer:not(.rs-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.rs-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.rs-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.rs-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.rs-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.rs-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.rs-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.rs-modal-tab-content--display .rs-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.rs-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.rs-modal-tab-content--display .rs-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.rs-modal-attribute-header-section--external .rs-modal-form-input:focus {
  border-color: #F5B041;
}

.rs-modal-attribute-header-section--external .rs-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.rs-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.rs-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.rs-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.rs-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.rs-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.rs-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.rs-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.rs-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.rs-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.rs-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.rs-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.rs-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.rs-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.rs-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.rs-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.rs-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.rs-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.rs-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.rs-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.rs-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.rs-modal-available-qty-tree-level {
  position: relative;
}

.rs-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.rs-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.rs-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.rs-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.rs-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.rs-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.rs-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.rs-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.rs-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.rs-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.rs-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.rs-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.rs-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.rs-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.rs-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.rs-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.rs-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.rs-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.rs-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.rs-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.rs-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.rs-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.rs-modal-available-qty-tree-batch-header .rs-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.rs-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.rs-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.rs-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.rs-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.rs-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.rs-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.rs-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.rs-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.rs-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.rs-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.rs-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.rs-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.rs-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.rs-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.rs-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.rs-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.rs-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.rs-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.rs-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.rs-modal-activity-type--clickable.rs-modal-activity-type--display:hover {
  color: #138B4C;
}

.rs-modal-activity-type--clickable.rs-modal-activity-type--external:hover {
  color: #E67E00;
}

.rs-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.rs-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.rs-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.rs-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.rs-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.rs-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.rs-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rs-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.rs-modal-activity-detail-content .rs-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.rs-modal-activity-detail-modal .rs-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.rs-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.rs-modal-activity-detail-modal .rs-modal-tabs--display .rs-modal-tab {
  color: #333333;
}

.rs-modal-activity-detail-modal .rs-modal-tabs--display .rs-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.rs-modal-activity-detail-modal .rs-modal-tabs--external.rs-modal-tabs--display .rs-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.rs-modal-activity-detail-tab-content--general .rs-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.rs-modal-activity-detail-content .rs-modal-milestone-status {
  margin: 0;
}

.rs-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.rs-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.rs-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.rs-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.rs-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.rs-modal-activity-detail-pic-chat-wrapper:hover .rs-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.rs-modal-activity-detail-pic-chat-wrapper:hover .rs-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.rs-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.rs-modal-activity-detail-pic--clickable:hover .rs-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.rs-modal-activity-detail-content--external .rs-modal-activity-detail-pic {
  color: #E67E22;
}

.rs-modal-activity-detail-content--external .rs-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.rs-modal-activity-detail-content--external .rs-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.rs-modal-activity-detail-content--external .rs-modal-activity-detail-pic--clickable:hover .rs-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.rs-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.rs-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.rs-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.rs-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.rs-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.rs-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.rs-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.rs-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.rs-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.rs-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.rs-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.rs-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.rs-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.rs-modal-activity-detail-content--external .rs-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.rs-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.rs-modal-activity-detail-content--external .rs-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.rs-modal-activity-detail-content--external .rs-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.rs-modal-activity-detail-content--external .rs-modal-activity-detail-document-name {
  color: #E67E22;
}

.rs-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.rs-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.rs-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.rs-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.rs-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.rs-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.rs-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.rs-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.rs-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.rs-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.rs-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.rs-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.rs-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.rs-modal-activity-detail-tab-content--general {
  padding: 0;
}

.rs-modal-activity-detail-tab-content--general .rs-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.rs-modal-activity-detail-tab-content--general > div:not(.rs-modal-item-text-info) {
  padding: 0 1.5rem;
}

.rs-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.rs-modal-activity-detail-tab-content--attachment,
.rs-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.rs-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.rs-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.rs-modal-activity-detail-tab-content--attachment .rs-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.rs-modal-activity-detail-tab-content--attachment .rs-modal-batch-assignment-table-section > .rs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.rs-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.rs-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.rs-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.rs-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.rs-modal-activity-detail-content--external .rs-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.rs-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.rs-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.rs-modal-activity-detail-content--external .rs-modal-item-text-info {
  background-color: #FEF5E7;
}

.rs-modal-activity-detail-content--external .rs-modal-task-notes-section {
  background-color: #FEF5E7;
}

.rs-modal-task-notes-section .rs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.rs-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.rs-modal-task-notes-textarea.rs-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.rs-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.rs-modal-task-chat-section > .rs-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.rs-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.rs-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.rs-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.rs-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rs-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.rs-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.rs-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.rs-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.rs-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.rs-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.rs-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.rs-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.rs-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.rs-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.rs-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.rs-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.rs-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.rs-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.rs-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.rs-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.rs-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.rs-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.rs-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.rs-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.rs-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.rs-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.rs-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.rs-modal-activity-detail-content--external .rs-modal-task-chat-avatar {
  background-color: #F5B041;
}

.rs-modal-activity-detail-content--external .rs-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.rs-modal-activity-detail-content--external .rs-modal-task-chat-reply-btn {
  color: #E67E22;
}

.rs-modal-activity-detail-content--external .rs-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.rs-modal-dropdown--display .rs-modal-dropdown-item,
.rs-modal-dropdown--display [class*="-item"],
.rs-modal-tags-dropdown--display .rs-modal-tags-dropdown-item,
.rs-modal-baseline-date-dropdown--display .rs-modal-baseline-date-item,
.rs-modal-reference-type-dropdown--display .rs-modal-reference-type-item,
.rs-modal-delivery-priority-dropdown--display .rs-modal-delivery-priority-item,
.rs-modal-organization-dropdown--display .rs-modal-organization-item,
.rs-modal-sales-structure-dropdown--display .rs-modal-sales-structure-item,
.rs-modal-delivery-type-dropdown--display .rs-modal-delivery-type-item,
.rs-modal-sales-channel-dropdown--display .rs-modal-sales-channel-item,
.rs-modal-sales-unit-dropdown--display .rs-modal-sales-unit-item,
.rs-modal-sold-to-party-dropdown--display .rs-modal-sold-to-party-item,
.rs-modal-deliver-to-party-dropdown--display .rs-modal-deliver-to-party-item,
.rs-modal-attention-to-deliver-dropdown--display .rs-modal-attention-to-deliver-item,
.rs-modal-incoterm-dropdown--display .rs-modal-incoterm-item,
.rs-modal-delivery-point-dropdown--display .rs-modal-delivery-point-item,
.rs-modal-shipping-point-dropdown--display .rs-modal-shipping-point-item,
.rs-modal-sales-order-dropdown--display .rs-modal-sales-order-item,
.rs-modal-sales-person-dropdown--display .rs-modal-sales-person-item,
.rs-modal-sales-team-dropdown--display .rs-modal-sales-team-item,
.rs-modal-territory-dropdown--display .rs-modal-territory-item,
.rs-modal-sales-office-dropdown--display .rs-modal-sales-office-item,
.rs-modal-status-dropdown--display .rs-modal-status-item,
.rs-modal-handling-product-dropdown--display .rs-modal-handling-product-item,
.rs-modal-child-uom-dropdown--display .rs-modal-child-uom-item,
.rs-modal-partner-type-dropdown--display .rs-modal-partner-type-item,
.rs-modal-partner-id-dropdown--display .rs-modal-partner-id-item,
.rs-modal-custom-dropdown--display .rs-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.rs-modal-dropdown--display .rs-modal-dropdown-item:hover,
.rs-modal-dropdown--display [class*="-item"]:hover,
.rs-modal-tags-dropdown--display .rs-modal-tags-dropdown-item:hover,
.rs-modal-baseline-date-dropdown--display .rs-modal-baseline-date-item:hover,
.rs-modal-reference-type-dropdown--display .rs-modal-reference-type-item:hover,
.rs-modal-delivery-priority-dropdown--display .rs-modal-delivery-priority-item:hover,
.rs-modal-organization-dropdown--display .rs-modal-organization-item:hover,
.rs-modal-sales-structure-dropdown--display .rs-modal-sales-structure-item:hover,
.rs-modal-delivery-type-dropdown--display .rs-modal-delivery-type-item:hover,
.rs-modal-sales-channel-dropdown--display .rs-modal-sales-channel-item:hover,
.rs-modal-sales-unit-dropdown--display .rs-modal-sales-unit-item:hover,
.rs-modal-sold-to-party-dropdown--display .rs-modal-sold-to-party-item:hover,
.rs-modal-deliver-to-party-dropdown--display .rs-modal-deliver-to-party-item:hover,
.rs-modal-attention-to-deliver-dropdown--display .rs-modal-attention-to-deliver-item:hover,
.rs-modal-incoterm-dropdown--display .rs-modal-incoterm-item:hover,
.rs-modal-delivery-point-dropdown--display .rs-modal-delivery-point-item:hover,
.rs-modal-shipping-point-dropdown--display .rs-modal-shipping-point-item:hover,
.rs-modal-sales-order-dropdown--display .rs-modal-sales-order-item:hover,
.rs-modal-sales-person-dropdown--display .rs-modal-sales-person-item:hover,
.rs-modal-sales-team-dropdown--display .rs-modal-sales-team-item:hover,
.rs-modal-territory-dropdown--display .rs-modal-territory-item:hover,
.rs-modal-sales-office-dropdown--display .rs-modal-sales-office-item:hover,
.rs-modal-status-dropdown--display .rs-modal-status-item:hover,
.rs-modal-handling-product-dropdown--display .rs-modal-handling-product-item:hover,
.rs-modal-child-uom-dropdown--display .rs-modal-child-uom-item:hover,
.rs-modal-partner-type-dropdown--display .rs-modal-partner-type-item:hover,
.rs-modal-partner-id-dropdown--display .rs-modal-partner-id-item:hover,
.rs-modal-custom-dropdown--display .rs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.rs-modal-dropdown--display [class*="-item--selected"],
.rs-modal-tags-dropdown--display .rs-modal-tags-dropdown-item--selected,
.rs-modal-baseline-date-dropdown--display .rs-modal-baseline-date-item--selected,
.rs-modal-reference-type-dropdown--display .rs-modal-reference-type-item--selected,
.rs-modal-delivery-priority-dropdown--display .rs-modal-delivery-priority-item--selected,
.rs-modal-organization-dropdown--display .rs-modal-organization-item--selected,
.rs-modal-sales-structure-dropdown--display .rs-modal-sales-structure-item--selected,
.rs-modal-delivery-type-dropdown--display .rs-modal-delivery-type-item--selected,
.rs-modal-sales-channel-dropdown--display .rs-modal-sales-channel-item--selected,
.rs-modal-sales-unit-dropdown--display .rs-modal-sales-unit-item--selected,
.rs-modal-sold-to-party-dropdown--display .rs-modal-sold-to-party-item--selected,
.rs-modal-deliver-to-party-dropdown--display .rs-modal-deliver-to-party-item--selected,
.rs-modal-attention-to-deliver-dropdown--display .rs-modal-attention-to-deliver-item--selected,
.rs-modal-incoterm-dropdown--display .rs-modal-incoterm-item--selected,
.rs-modal-delivery-point-dropdown--display .rs-modal-delivery-point-item--selected,
.rs-modal-shipping-point-dropdown--display .rs-modal-shipping-point-item--selected,
.rs-modal-sales-order-dropdown--display .rs-modal-sales-order-item--selected,
.rs-modal-sales-person-dropdown--display .rs-modal-sales-person-item--selected,
.rs-modal-sales-team-dropdown--display .rs-modal-sales-team-item--selected,
.rs-modal-territory-dropdown--display .rs-modal-territory-item--selected,
.rs-modal-sales-office-dropdown--display .rs-modal-sales-office-item--selected,
.rs-modal-status-dropdown--display .rs-modal-status-item--selected,
.rs-modal-handling-product-dropdown--display .rs-modal-handling-product-item--selected,
.rs-modal-child-uom-dropdown--display .rs-modal-child-uom-item--selected,
.rs-modal-partner-type-dropdown--display .rs-modal-partner-type-item--selected,
.rs-modal-partner-id-dropdown--display .rs-modal-partner-id-item--selected,
.rs-modal-custom-dropdown--display .rs-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.rs-modal-dropdown--display [class*="-check"],
.rs-modal-dropdown--display .rs-modal-dropdown-check,
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.rs-modal-dropdown--display [class*="-item-code"],
.rs-modal-dropdown--display [class*="-item-name"],
.rs-modal-dropdown--display [class*="-item-content"],
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-code,
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-name,
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-item,
.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.rs-modal-sold-to-party-dropdown-content--display .rs-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.rs-modal-tags-dropdown--display .rs-modal-tags-item,
.rs-modal-tags-dropdown--display .rs-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-tags-dropdown--display .rs-modal-tags-item:hover {
  background-color: transparent !important;
}

.rs-modal-tags-dropdown--display .rs-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.rs-modal-tags-dropdown--display .rs-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item,
.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.rs-modal-custom-dropdown-list--display .rs-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* Recurrence Tab Styles */
.rs-modal-recurrence-container {
  padding: 1rem;
}

.rs-modal-recurrence-config {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rs-modal-recurrence-config-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rs-modal-recurrence-config-label {
  font-size: 0.6875rem;
  color: #666;
  font-weight: 500;
}

.rs-modal-recurrence-config-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
}

.rs-modal-recurrence-calendar {
  margin-top: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.rs-modal-recurrence-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 0.8125rem;
}

.rs-modal-recurrence-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
  background-color: #e0e0e0;
}

.rs-modal-recurrence-calendar-day {
  padding: 0.5rem;
  background-color: #fff;
  text-align: center;
  font-size: 0.75rem;
  min-height: 2.5rem;
}

.rs-modal-recurrence-calendar-day--billing {
  background-color: #e8f5e9;
  font-weight: 600;
  color: #2e7d32;
}

.rs-modal-recurrence-calendar-day--header {
  background-color: #fafafa;
  font-weight: 600;
  color: #666;
  font-size: 0.6875rem;
}

.rs-modal-billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.rs-modal-billing-history-table th {
  background-color: #fafafa;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid #e0e0e0;
  font-weight: 600;
  color: #333;
}

.rs-modal-billing-history-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

.rs-modal-billing-history-table tr:hover {
  background-color: #f9f9f9;
}

.rs-modal-billing-status-badge {
  display: inline-block;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.rs-modal-subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.rs-modal-recurrence-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.rs-modal-recurrence-progress-bar {
  flex: 1 1;
  height: 0.5rem;
  background-color: #e0e0e0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.rs-modal-recurrence-progress-fill {
  height: 100%;
  border-radius: 0.25rem;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

.rs-modal-recurrence-progress-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  min-width: 3.125rem;
  text-align: right;
}

.rs-modal-recurrence-summary {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.rs-modal-recurrence-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}

.rs-modal-recurrence-summary-label {
  font-size: 0.6875rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.rs-modal-recurrence-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.rs-modal-escalation-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #e65100;
  font-weight: 500;
}

/* ===== from pages/Sales/Sales.css ===== */
/* Sales Page Layout */
.sales-page {
  width: 100%;
  height: calc(100vh - 12.25rem); /* Subtract all nav bars: 60px + 56px + 80px */
  background-color: #F9FAFC;
  overflow: hidden;
}

.sales-layout {
  display: flex;
  gap: 1.125rem;
  padding: 0 2rem 1.125rem 2rem; /* Remove top padding */
  height: 100%;
  box-sizing: border-box;
}

/* Column 1: Sidebar - INDEPENDENT SCROLL */
.sales-sidebar {
  width: 14.375rem;
  flex-shrink: 0;
  transition: width 200ms ease;
  height: calc(100vh - 13.375rem); /* viewport - all navs (196px) - bottom padding (18px) */
  overflow-y: scroll; /* Always show scrollbar for consistent behavior */
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* Prevent scroll chaining */
}

.sales-sidebar--collapsed {
  width: 3.5rem;
}

/* Column 2: Main Content - INDEPENDENT SCROLL */
.sales-main {
  flex: 1 1;
  min-width: 0;
  height: calc(100vh - 13.375rem); /* viewport - all navs (196px) - bottom padding (18px) */
  overflow-y: scroll; /* Always show scrollbar for consistent behavior */
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* Prevent scroll chaining */
}

/* Column 3: Insight - INDEPENDENT SCROLL */
.sales-insight {
  width: 18.75rem;
  flex-shrink: 0;
  transition: width 200ms ease;
  height: calc(100vh - 13.375rem); /* viewport - all navs (196px) - bottom padding (18px) */
  overflow-y: scroll; /* Always show scrollbar for consistent behavior */
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* Prevent scroll chaining */
}

/* Collapsed insight column */
.sales-insight--collapsed {
  width: 3.5rem; /* Same width as collapsed sidebar */
  overflow-y: auto; /* Keep vertical scroll */
  overflow-x: visible; /* Allow dropdown to show outside */
}

/* Common container styles for all columns */
.sales-container {
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1.5rem; /* 24px on all sides */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Custom scrollbar styles for columns */
.sales-sidebar::-webkit-scrollbar,
.sales-main::-webkit-scrollbar,
.sales-insight::-webkit-scrollbar {
  width: 0.5rem;
}

.sales-sidebar::-webkit-scrollbar-track,
.sales-main::-webkit-scrollbar-track,
.sales-insight::-webkit-scrollbar-track {
  background: transparent;
}

.sales-sidebar::-webkit-scrollbar-thumb,
.sales-main::-webkit-scrollbar-thumb,
.sales-insight::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
}

.sales-sidebar::-webkit-scrollbar-thumb:hover,
.sales-main::-webkit-scrollbar-thumb:hover,
.sales-insight::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .sales-sidebar {
    width: 12.5rem;
  }
  .sales-insight {
    width: 16.25rem; /* Proportionally reduced from 300px */
  }
}

@media (max-width: 1200px) {
  .sales-sidebar {
    width: 11.25rem;
  }
  .sales-insight {
    width: 15rem; /* Proportionally reduced from 300px */
  }
}

@media (max-width: 1024px) {
  .sales-layout {
    gap: 1rem;
    padding: 1rem;
  }
  
  .sales-sidebar {
    display: none;
  }
  
  .sales-insight {
    display: none;
  }
  
  .sales-main {
    width: 100%;
  }
}
/* ===== from pages/Sales/SalesActivity/SalesActivity.css ===== */
.sales-activity-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sales-activity-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background-color: #fff;
  overflow-y: auto;
}

/* Header Section */
.activity-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.activity-add-btn {
  padding: 0.625rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.activity-add-btn:hover {
  background-color: #0f6d3a;
}

.activity-subtitle {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

/* Summary Cards */
.activity-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.summary-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.05);
}

.summary-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.summary-card-header h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  margin: 0;
}

.summary-icon {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.5;
}

.summary-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.summary-number {
  font-size: 2rem;
  font-weight: 700;
  color: #138B4C;
}

.summary-breakdown {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.summary-breakdown span {
  font-size: 0.75rem;
  color: #666;
  padding: 0.25rem 0.5rem;
  background: #f5f5f5;
  border-radius: 0.25rem;
}

.summary-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 0.5rem;
  background: #f0f0f0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #138B4C;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
}

/* Filters Section */
.activity-filters {
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.filter-select,
.filter-date {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
}

.filter-select:focus,
.filter-date:focus {
  outline: none;
  border-color: #138B4C;
}

/* Activities Table */
.activities-table-container {
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.05);
}

.activities-table {
  width: 100%;
  border-collapse: collapse;
}

.activities-table thead {
  background: #f9f9f9;
  border-bottom: 2px solid #e5e5e5;
}

.activities-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.activities-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.activities-table tbody tr:hover {
  background: #fafafa;
}

.activities-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #333;
  vertical-align: top;
}

.activity-type {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.customer-name {
  font-weight: 600;
  color: #000;
}

.date-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-time .time {
  font-size: 0.75rem;
  color: #666;
}

.activity-details {
  max-width: 18.75rem;
}

.details-content {
  font-size: 0.75rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.details-content .notes {
  color: #333;
  font-style: italic;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-btn {
  border-color: #138B4C;
  color: #138B4C;
  background: white;
}

.edit-btn:hover {
  background: #138B4C;
  color: white;
}

.view-btn {
  border-color: #ddd;
  color: #666;
  background: white;
}

.view-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* Upcoming Activities */
.upcoming-activities {
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.05);
}

.upcoming-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.upcoming-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upcoming-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: #f9f9f9;
  border-radius: 0.375rem;
  align-items: center;
}

.upcoming-time {
  min-width: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.upcoming-date {
  font-size: 0.75rem;
  color: #666;
}

.upcoming-hour {
  font-size: 0.875rem;
  font-weight: 600;
  color: #138B4C;
}

.upcoming-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.upcoming-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.upcoming-customer {
  font-size: 0.875rem;
  color: #000;
}

.upcoming-person {
  font-size: 0.75rem;
  color: #666;
}

.upcoming-action {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #138B4C;
  background: white;
  border: 1px solid #138B4C;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upcoming-action:hover {
  background: #138B4C;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .activity-summary-cards {
    grid-template-columns: 1fr;
  }
  
  .activity-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    width: 100%;
    justify-content: space-between;
  }
}
/* ===== from pages/Sales/SalesDashboard/SalesDashboard.css ===== */
/* Sales Dashboard Wrapper - for scrolling */
.sales-dashboard-wrapper {
  height: 100%;
  overflow: auto;
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sales-dashboard-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Sales Dashboard Container */
.sales-dashboard-container {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Top Cards Row */
.dashboard-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

.dashboard-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  min-height: 11.25rem;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}

.card-expand-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.card-expand-icon:hover {
  opacity: 0.7;
}

.card-left-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 45%;
  flex-shrink: 0;
}

.card-right-section {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.revenue-chart {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-date-labels {
  position: absolute;
  bottom: 0.3125rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0;
  pointer-events: none;
}

.chart-date-start {
  font-size: 0.625rem;
  color: #999999;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 0.1875rem;
  border-radius: 2px;
  margin-left: 0;
}

.chart-date-end {
  font-size: 0.625rem;
  color: #999999;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 0.1875rem;
  border-radius: 2px;
  margin-right: 0;
}

.dashboard-card:hover {
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.1);
}

/* Sales Funnel Container */
.dashboard-funnel-container {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  padding: 1.25rem;
  min-height: 23.125rem;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
}

/* Charts Row */
.dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  height: 21.875rem;
}

.dashboard-chart-container {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  padding: 1.25rem;
  min-height: 18.75rem;
  height: 100%;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* Card Header and Content */
.card-header {
  margin-bottom: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
  padding: 0;
  text-align: left;
}

.card-subtitle {
  font-size: 0.8125rem;
  color: #666666;
  margin: 0;
  padding: 0;
  text-align: left;
  align-self: flex-start;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.sales-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.2;
  text-align: left;
}

.sales-comparison {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  text-align: left;
}

.sales-comparison.positive .comparison-value {
  color: #16a34a;
}

.sales-comparison.negative .comparison-value {
  color: #dc2626;
}

.comparison-text {
  color: #666666;
}

.comparison-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.sales-comparison.positive .comparison-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(448%) hue-rotate(86deg) brightness(95%) contrast(86%);
}

.sales-comparison.negative .comparison-icon {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(2005%) hue-rotate(342deg) brightness(95%) contrast(88%);
  transform: rotate(180deg);
}

/* Summary Metrics */
.summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2.5rem;
  gap: 2.5rem;
  width: 100%;
}

.summary-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.summary-metric::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background-color: #E5E5E5;
  transition: background-color 200ms ease;
}

.summary-metric--active::after {
  background-color: #138B4C;
}

.summary-metric:hover::after {
  background-color: #138B4C;
}

.summary-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: #999999;
  margin: 0;
  line-height: 1.2;
  transition: color 200ms ease;
}

.summary-metric--active .summary-amount {
  color: #1a1a1a;
}

.summary-metric:hover .summary-amount {
  color: #1a1a1a;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #999999;
  margin: 0;
  letter-spacing: 0.5px;
  transition: color 200ms ease;
}

.summary-metric--active .summary-label {
  color: #666666;
}

.summary-metric:hover .summary-label {
  color: #666666;
}

/* Section Titles */
.dashboard-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

/* Content Areas */
.dashboard-funnel-content {
  min-height: 9.375rem;
  margin-top: 1.5rem;
  position: relative;
}

/* Funnel Stages */
.funnel-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0;
  gap: 0;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

.funnel-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.funnel-stage::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: -9.6875rem;
  width: 1px;
  background-color: #E5E5E5;
  z-index: 1;
}

.funnel-stage-content {
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

/* Funnel Chart */
.funnel-chart {
  width: 100%;
  height: 9.375rem;
  position: relative;
  margin-top: 0.3125rem;
}

.funnel-chart svg {
  width: 100%;
  height: 100%;
}

.funnel-stage-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #333333;
  margin: 0;
  line-height: 1.2;
}

.funnel-stage-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-bottom: 0.9375rem;
  line-height: 1.2;
}

.funnel-stage-count {
  font-size: 0.8125rem;
  color: #666666;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

.funnel-stage-percentage {
  font-size: 0.75rem;
  color: #B0B0B0;
  font-weight: 400;
  margin: 0;
  margin-top: 0.25rem;
  line-height: 1.2;
}

.dashboard-chart-content {
  min-height: 15.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.dashboard-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-header-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-icon-box {
  width: 3rem;
  height: 3rem;
  background-color: #e8f5e8;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dashboard-header-content {
  flex: 1 1;
  text-align: left;
}

.dashboard-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #138B4C;
  color: var(--color-sales-green);
  margin-top: 2px;
  margin-bottom: 0;
}

.breadcrumb-link {
  color: #138B4C;
  color: var(--color-sales-green);
  cursor: pointer;
  transition: font-weight 200ms ease;
}

.breadcrumb-link:hover {
  font-weight: 700;
}

.breadcrumb-separator {
  color: #138B4C;
  color: var(--color-sales-green);
  font-size: 0.8125rem;
  opacity: 0.5;
  -webkit-user-select: none;
          user-select: none;
}

/* Dashboard Dropdown Inputs */
.dashboard-dropdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
  margin-top: 0.25rem;
}

.dashboard-dropdown:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.dashboard-dropdown--active {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.dashboard-dropdown-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dashboard-dropdown-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dashboard-dropdown-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.dashboard-dropdown-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Dropdown Menu - Matching Notification Style */
.dashboard-dropdown-wrapper {
  position: relative;
  margin-left: 0.5rem;
}

.dashboard-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.dashboard-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 15rem;
  box-sizing: border-box;
  max-width: 15rem;
}

.dashboard-dropdown-item:hover {
  background-color: #f0f8e8;
}

.dashboard-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.dashboard-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.dashboard-dropdown-separator {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
  margin: 0.25rem 0;
}

.dashboard-dropdown-check-icon {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Dropdown Menu */
.dashboard-filter-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: 43.75rem;
  min-height: 12.5rem;
  max-height: calc(100vh - 6.25rem);
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.dashboard-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  position: relative;
}

.dashboard-filter-header-title {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #000000;
  margin: 0;
}

.dashboard-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-filter-menu-separator {
  width: 1px;
  height: 1rem;
  background-color: #dee2e6;
  background-color: var(--color-gray-300);
  margin: 0 0.25rem;
}

.dashboard-filter-close {
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  padding: 0.375rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  width: 1.75rem;
  height: 1.75rem;
}

.dashboard-filter-close:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.dashboard-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}

.dashboard-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.dashboard-filter-menu-item:hover .dashboard-filter-menu-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.dashboard-filter-menu-item:hover .dashboard-filter-menu-label {
  font-weight: 700;
}

.dashboard-filter-menu-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 200ms ease;
}

.dashboard-filter-menu-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  color: var(--color-sales-green);
  transition: font-weight 200ms ease;
}

.dashboard-filter-parameter-wrapper {
  position: relative;
}

.dashboard-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 10001;
  min-width: 12.5rem;
  padding: 0.25rem 0;
}

.dashboard-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background-color 200ms ease;
  white-space: nowrap;
  text-align: left;
}

.dashboard-filter-parameter-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.dashboard-filter-parameter-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #C2DE54;
  accent-color: var(--color-primary);
  cursor: pointer;
  border: 1px solid #adb5bd;
  border: 1px solid var(--color-gray-500);
}

.dashboard-filter-parameter-checkbox:disabled {
  cursor: not-allowed;
  opacity: 1;
  accent-color: #C2DE54;
  background-color: #C2DE54;
}

.dashboard-filter-parameter-checkbox:disabled:checked {
  accent-color: #C2DE54;
}

.dashboard-filter-parameter-item--disabled {
  cursor: default;
}

.dashboard-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.dashboard-filter-content {
  flex: 1 1;
  padding: 1rem;
  overflow: visible;
  max-height: 37.5rem;
  position: relative;
  z-index: 1;
}

.dashboard-filter-group {
  margin-bottom: 1rem;
}

.dashboard-filter-group:last-child {
  margin-bottom: 0;
}

.dashboard-filter-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 0.75rem 0;
  text-align: left;
}

.dashboard-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  min-width: 7.5rem;
  width: 7.5rem;
  text-align: left;
  flex-shrink: 0;
  align-self: center;
}

.dashboard-filter-date-wrapper {
  position: relative;
  width: 11.25rem;
}

.dashboard-filter-date-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: #212529;
  color: var(--color-gray-900);
  background-color: #ffffff;
  background-color: var(--color-white);
  transition: border-color 200ms ease;
  outline: none;
  height: 2.25rem;
  cursor: pointer;
  text-align: left;
  direction: ltr;
}

.dashboard-filter-date-input::-webkit-datetime-edit,
.dashboard-filter-date-input::-webkit-datetime-edit-fields-wrapper,
.dashboard-filter-date-input::-webkit-datetime-edit-text,
.dashboard-filter-date-input::-webkit-datetime-edit-month-field,
.dashboard-filter-date-input::-webkit-datetime-edit-day-field,
.dashboard-filter-date-input::-webkit-datetime-edit-year-field {
  text-align: left;
}

.dashboard-filter-date-input:hover {
  border-color: #C2DE54;
}

.dashboard-filter-date-input:focus {
  border-color: #C2DE54;
}

.dashboard-filter-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
  margin-right: 0;
}

.dashboard-filter-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8;
}

.dashboard-filter-date-overlay {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  right: 2.1875rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: #ffffff;
  background-color: var(--color-white);
  font-size: 0.8125rem;
  color: #212529;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  display: flex;
  align-items: center;
}

.dashboard-filter-to {
  font-size: 0.8125rem;
  color: #8e8e8e;
  color: var(--color-gray-600);
  font-weight: 500;
  padding: 0 0.25rem;
}

.dashboard-filter-organization-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-filter-org-container {
  flex: 1 1;
  position: relative;
  z-index: 10;
}

.dashboard-filter-org-input {
  height: 2.25rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color 200ms ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  overflow: hidden;
}

.dashboard-filter-org-input:hover {
  border-color: #C2DE54;
}

.dashboard-filter-org-placeholder {
  color: #adb5bd;
  color: var(--color-gray-500);
  font-size: 0.8125rem;
}

.dashboard-filter-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  flex: 1 1;
  overflow: hidden;
  align-items: center;
}

.dashboard-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
}

.dashboard-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8e8e8e;
  color: var(--color-gray-600);
  font-size: 1rem;
  line-height: 1;
  transition: color 200ms ease;
}

.dashboard-filter-tag-remove:hover {
  color: #212529;
  color: var(--color-gray-900);
}

.dashboard-filter-tag--others {
  background-color: #F0F1F3;
  background-color: var(--color-gray-100);
  border-color: #ced4da;
  border-color: var(--color-gray-400);
  color: #495057;
  color: var(--color-gray-700);
  padding: 2px 0.625rem;
}

.dashboard-filter-org-arrow {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

.dashboard-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 10002;
  max-height: 15rem;
  overflow-y: auto;
}

.dashboard-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.dashboard-filter-org-item:hover {
  background-color: #f0f8e8;
}

.dashboard-filter-org-checkbox {
  width: 1rem;
  height: 1rem;
  margin-right: 0.75rem;
  margin-right: var(--space-3);
  margin-top: 2px;
  accent-color: #C2DE54;
  accent-color: var(--color-primary);
  cursor: pointer;
  border: 1px solid #adb5bd;
  border: 1px solid var(--color-gray-500);
}

.dashboard-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1;
  text-align: left;
}

.dashboard-filter-org-code {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  min-width: 3.125rem;
}

.dashboard-filter-org-name {
  font-size: 0.8125rem;
  color: #8e8e8e;
  color: var(--color-gray-600);
}

.dashboard-filter-org-divider {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
  margin: 0.25rem 0;
}

.dashboard-filter-separator {
  height: 1px;
  background-color: #e9ecef;
  background-color: var(--color-gray-200);
  margin: 1rem 0;
}

.dashboard-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1rem;
  background-color: var(--color-gray-50);
  border-radius: 0 0 0.375rem 0.375rem;
  position: relative;
  z-index: 0;
}

.dashboard-filter-button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  border: none;
  outline: none;
  width: 5rem;
}

.dashboard-filter-button--clear {
  background-color: #ffffff;
  background-color: var(--color-white);
  color: #495057;
  color: var(--color-gray-700);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
}

.dashboard-filter-button--clear:hover {
  background-color: #F0F1F3;
  background-color: var(--color-gray-100);
  border-color: #ced4da;
  border-color: var(--color-gray-400);
}

.dashboard-filter-button--apply {
  background-color: #C2DE54;
  background-color: var(--color-primary);
  color: #343a40;
  color: var(--color-gray-800);
  border: 1px solid #C2DE54;
  border: 1px solid var(--color-primary);
}

.dashboard-filter-button--apply:hover {
  background-color: #b5d147;
  background-color: var(--color-primary-dark);
  border-color: #b5d147;
  border-color: var(--color-primary-dark);
}

.dashboard-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 2px 0;
  text-align: left;
}

.dashboard-header p {
  font-size: 0.875rem;
  color: #8e8e8e;
  color: var(--color-gray-600);
  margin: 0;
  text-align: left;
}

/* Metrics Grid */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-card {
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
  padding: 1rem;
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #212529;
  color: var(--color-gray-900);
  margin-bottom: 0.25rem;
}

.metric-label {
  font-size: 0.8125rem;
  color: #8e8e8e;
  color: var(--color-gray-600);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-change {
  font-size: 0.8125rem;
  font-weight: 500;
}

.metric-change.positive {
  color: #16a34a;
}

.metric-change.negative {
  color: #dc2626;
}

/* Charts Section */
.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.chart-container {
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
}

.chart-container h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 1rem 0;
}

.chart-placeholder {
  height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  color: #adb5bd;
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

/* Sales Dashboard Insights (Column 3) - Independent styling */
.sales-dashboard-insight {
  background-color: #138B4C;
  background-color: var(--color-sales-green); /* Same green as sidebar */
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0.75rem 0; /* Match sidebar container padding */
  box-sizing: border-box;
  transition: width 200ms ease;
  width: 100%;
}

/* Collapsed state for insights container */
.sales-dashboard-insight--collapsed {
  padding: 0.75rem 0; /* Match sidebar padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible; /* Allow dropdown to show */
}

.insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 0.75rem 1rem; /* Left/right padding for header */
  margin-bottom: 0.5rem;
  min-height: 2.375rem;
  height: 2.375rem; /* Fixed height matching sidebar */
  box-sizing: border-box;
  cursor: pointer;
  transition: all 200ms ease;
}

/* Center the icon when collapsed */
.sales-dashboard-insight--collapsed .insight-header {
  justify-content: center;
  padding: 0.5rem 1rem 0.75rem 1rem; /* Match sidebar header padding exactly */
  height: 2.375rem;
  min-height: 2.375rem;
}

.insight-title {
  font-size: 1rem; /* Insight title size */
  font-weight: 700;
  color: #ffffff;
  color: var(--color-white); /* White text on green background */
  text-transform: none;
  letter-spacing: 0.5px;
  line-height: 1.25rem;
  margin: 0;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* Hide title when collapsed */
.insight-title--collapsed {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

.insight-icon {
  width: 1.25rem; /* Increased icon size */
  height: 1.25rem;
  filter: brightness(0) invert(1); /* White icon on green background */
}

.insight-card {
  background-color: rgba(255, 255, 255, 0.95); /* White cards on green background */
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin: 0 1rem 0.75rem 1rem; /* Left/right margins for cards */
  border-left: 4px solid #C2DE54; /* Lime green border accent */
  transition: all 200ms ease;
}

/* Collapsed card state - matching sidebar item styles */
.sales-dashboard-insight--collapsed .insight-card {
  padding: 0.625rem 0;
  margin: 0;
  background-color: transparent;
  border-left: none;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.5rem;
  width: 100%;
  cursor: pointer;
  transition: background-color 200ms ease;
  position: relative;
}

.sales-dashboard-insight--collapsed .insight-card:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Active state when dropdown is open */
.sales-dashboard-insight--collapsed .insight-card--active {
  background-color: rgba(255, 255, 255, 0.1);
}

.sales-dashboard-insight--collapsed .insight-card--active .insight-card-icon {
  filter: brightness(0) saturate(100%) invert(98%) sepia(93%) saturate(7495%) hue-rotate(358deg) brightness(109%) contrast(104%) !important; /* Yellow color #FFFF54 */
}

.insight-card-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Center content when collapsed */
.sales-dashboard-insight--collapsed .insight-card-content {
  justify-content: center;
  align-items: center;
}

.insight-card-text {
  flex: 1 1;
  text-align: left;
}

/* Hide text when collapsed */
.insight-card-text--collapsed {
  display: none;
}

.insight-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 0.25rem 0;
  text-align: left;
}

.insight-card p {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

.insight-card-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%); /* Sales green color */
  transition: filter 200ms ease;
}

/* Same size white icons when collapsed - matching sidebar */
.sales-dashboard-insight--collapsed .insight-card-icon {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  filter: brightness(0) invert(1); /* White color */
  opacity: 1;
}

.sales-dashboard-insight--collapsed .insight-card:hover .insight-card-icon {
  opacity: 1;
  filter: brightness(0) invert(1); /* Keep white on hover */
}

/* Divider line for collapsed state - matching sidebar style */
.insight-divider {
  display: block;
  height: 1.0625rem; /* Total height including margins - matching sidebar */
  position: relative;
  margin: 0;
  width: 100%;
}

.insight-divider::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 200ms ease;
}

/* Wrapper for card and dropdown */
.insight-card-wrapper {
  position: relative;
  width: 100%;
}

/* Ensure wrapper takes full width in collapsed state */
.sales-dashboard-insight--collapsed .insight-card-wrapper {
  width: 100%;
}

/* Dropdown that appears to the left of collapsed insights */
.insight-dropdown {
  position: absolute;
  left: -16.125rem; /* Position to the left (250px width + 8px gap) */
  top: 0;
  background-color: #FFFFFF; /* Solid white background */
  border-radius: 0.375rem;
  padding: 1rem;
  width: 15.625rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 9999;
  border-left: 4px solid #C2DE54; /* Lime green like user profile */
}

.insight-dropdown-content {
  text-align: left;
}

.insight-dropdown-content h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  color: var(--color-gray-900);
  margin: 0 0 0.5rem 0;
  white-space: normal;
  text-align: left;
}

.insight-dropdown-content p {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  margin: 0;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .dashboard-charts-row {
    grid-template-columns: 1fr;
  }
  
  .dashboard-cards-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-card {
    flex-direction: column;
    min-height: auto;
  }
  
  .card-left-section {
    width: 100%;
    margin-bottom: 1.25rem;
  }
  
  .card-right-section {
    width: 100%;
    padding-left: 0;
    height: 7.5rem;
  }
  
  .sales-dashboard-container {
    padding: 1rem;
  }
}
/* ===== from pages/Sales/SalesOrder/SalesOrder.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.sales-order-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.sales-order-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* Header Section */
.sales-order-header {
  margin-bottom: 0;
}

.sales-order-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.sales-order-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.sales-order-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.sales-order-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sales-order-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sales-order-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.sales-order-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.sales-order-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.sales-order-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.sales-order-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.sales-order-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.sales-order-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.sales-order-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.sales-order-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-order-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-order-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.sales-order-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.sales-order-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.sales-order-layout-dropdown-item:last-child {
  border-bottom: none;
}

.sales-order-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-order-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.sales-order-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.sales-order-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.sales-order-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.sales-order-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.sales-order-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.sales-order-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sales-order-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-order-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.sales-order-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sales-order-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.sales-order-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.sales-order-filter-parameter-wrapper {
  position: relative;
}

.sales-order-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.sales-order-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-order-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.sales-order-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sales-order-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.sales-order-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.sales-order-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.sales-order-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.sales-order-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-order-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.sales-order-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.sales-order-filter-close:hover {
  background-color: #f0f0f0;
}

.sales-order-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.sales-order-filter-group {
  margin-bottom: 1rem;
}

.sales-order-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.sales-order-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sales-order-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.sales-order-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.sales-order-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.sales-order-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.sales-order-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.sales-order-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sales-order-filter-org-container {
  flex: 1 1;
  position: relative;
}

.sales-order-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.sales-order-filter-org-input:hover {
  border-color: #C2DE54;
}

.sales-order-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.sales-order-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.sales-order-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sales-order-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.sales-order-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.sales-order-filter-tag-remove:hover {
  color: #000;
}

.sales-order-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.sales-order-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.sales-order-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sales-order-filter-org-item:hover {
  background-color: #f5f5f5;
}

.sales-order-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.sales-order-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.sales-order-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.sales-order-filter-org-code {
  font-weight: 600;
  color: #333;
}

.sales-order-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.sales-order-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.sales-order-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.sales-order-type-dropdown-item:last-child {
  border-bottom: none;
}

.sales-order-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-order-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.sales-order-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.sales-order-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.sales-order-table {
  animation: salesOrderFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes salesOrderFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sales-order-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .sales-order-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .sales-order-type-dropdown {
    min-width: 11.25rem;
  }

  .sales-order-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/SalesOrder/SalesOrderModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

/* ==========================================
   PAGE MODE — render modal content inline, no overlay
   Fixed height chain: container (calc) → column (100%) → main (100%) → inner (100%) → wrapper (100%) → backdrop (100%) → modal (100%)
   ========================================== */
.so-page-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-align: left;
}

.so-page-wrapper .modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  z-index: auto !important;
  animation: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

.so-page-wrapper .modal-backdrop .modal,
.so-page-wrapper .modal-backdrop .modal.modal--fullscreen {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.so-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.so-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 16.25rem;
}

.so-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.so-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.so-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.so-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.so-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.so-modal-pov-button--external.so-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.so-modal-pov-button--external .so-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-pov-button--external .so-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.so-modal-pov-caret--open {
  transform: rotate(180deg);
}

.so-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 16.25rem;
  margin-top: 2px;
  overflow: hidden;
}

.so-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.so-modal-pov-dropdown-item:hover {
  background-color: #FAFAFA;
}

.so-modal-pov-dropdown-item--selected {
  background-color: #FAFAFA;
  font-weight: 500;
}

.so-modal-pov-dropdown-item span {
  flex: 0 0 auto;
}

.so-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.so-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.so-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.so-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.so-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.so-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.so-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.so-modal-tabs--display .so-modal-tab {
  color: #666666;
}

.so-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.so-modal-tab:hover {
  color: #333333;
  background-color: #FAFAFA;
}

.so-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.so-modal-tabs--display .so-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.so-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.so-modal-tabs--external .so-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.so-modal-tabs--external.so-modal-tabs--display .so-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.so-modal-tabs--external .so-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.so-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.so-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.so-modal-action-button span {
  white-space: nowrap;
}

.so-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.so-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.so-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.so-modal-action-button--disabled .so-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.so-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.so-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.so-modal-left-area--full .so-modal-back-button {
  transition: width 300ms ease;
}

.so-modal-left-area--full .so-modal-back-button:hover {
  width: 3.5rem;
}

.so-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.so-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
  /* Hide scrollbar — still scrollable via wheel/trackpad. This keeps
     tabs like General/Additional/Notes flush to the right edge
     (matching Partner/Item/Terms which already use --no-scroll). */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}

.so-modal-content::-webkit-scrollbar {
  display: none; /* Chrome / Safari / new Edge */
}

.so-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.so-modal-content--item {
  padding-bottom: 1rem;
}

.so-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.so-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.so-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.so-modal-attachment-table-container .so-modal-detail-table thead,
.so-modal-attachment-table-container .so-modal-attachment-table thead {
  box-shadow: none !important;
}

.so-modal-attachment-table-container .so-modal-detail-table tr,
.so-modal-attachment-table-container .so-modal-attachment-table tr {
  box-shadow: none !important;
}

.so-modal-attachment-table-container .so-modal-detail-table tbody tr:last-child,
.so-modal-attachment-table-container .so-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.so-modal-attachment-table-container .so-modal-detail-table tbody tr:last-child td,
.so-modal-attachment-table-container .so-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.so-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.so-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.so-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.so-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.so-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.so-modal-attachment-table tbody tr:hover {
  background-color: #FAFAFA;
}

.so-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.so-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.so-modal-attachment-filename--external {
  color: #E67E22;
}

.so-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.so-modal-tab-content--display .so-modal-attachment-filename--external {
  color: #E67E22;
}

.so-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.so-modal-attachment-size {
  color: #666666;
}

.so-modal-attachment-date {
  color: #666666;
}

.so-modal-attachment-uploadedby {
  color: #333333;
}

.so-modal-tab-content--display .so-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.so-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.so-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #FAFAFA;
  border-color: #CCCCCC;
}

.so-modal-attachment-browse-btn:focus {
  outline: none;
}

.so-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.so-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.so-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-attachment-browse-btn--disabled .so-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.so-modal-tab-content--display .so-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.so-modal-tab-content--display .so-modal-attachment-filename.so-modal-attachment-filename--external {
  color: #E67E22;
}

.so-modal-tab-content--display .so-modal-attachment-type {
  color: #666666;
}

.so-modal-tab-content--display .so-modal-attachment-size {
  color: #666666;
}

.so-modal-tab-content--display .so-modal-attachment-date {
  color: #666666;
}

.so-modal-tab-content--display .so-modal-attachment-uploadedby {
  color: #333333;
}

.so-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.so-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.so-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.so-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.so-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.so-modal-tab-content--display .so-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.so-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.so-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.so-modal-tab-content--display .so-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.so-modal-basic-section--external .so-modal-form-input:focus {
  border-color: #F5B041;
}

.so-modal-basic-section--external .so-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.so-modal-tab-content--external .so-modal-form-input:focus,
.so-modal-tab-content--external .so-modal-form-textarea:focus,
.so-modal-tab-content--external .so-modal-custom-dropdown-input:focus,
.so-modal-tab-content--external .so-modal-date-input:focus,
.so-modal-tab-content--external .so-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.so-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.so-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.so-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.so-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.so-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.so-modal-tab-content--display .so-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.so-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.so-modal-tab-content--display .so-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.so-modal-partner-header-section--external .so-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.so-modal-notes-header-section {
  background-color: #FFFFFF;
  margin: 0 -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.so-modal-notes-header-section > * {
  width: 100%;
  max-width: 62.5rem;
}

.so-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.so-modal-tab-content--display .so-modal-notes-header-section {
  background-color: #FFFFFF;
}

/* Notes Checkbox Styles */
.so-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.so-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.so-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.so-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.so-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.so-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.so-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.so-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.so-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.so-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.so-modal-chat-section {
  padding: 1.5rem 0;
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
}

.so-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.so-modal-chat-header h3 {
  margin: 0;
}

.so-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.so-modal-chat-new-thread .so-modal-form-textarea {
  min-height: 5rem;
}

.so-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.so-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.so-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.so-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.so-modal-chat-message--main {
  background-color: #FAFAFA;
}

.so-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.so-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.so-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.so-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.so-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.so-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.so-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.so-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.so-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.so-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-tab-content--display .so-modal-chat-user-name {
  color: #333333 !important;
}

.so-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.so-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.so-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.so-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.so-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.so-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.so-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.so-modal-chat-reply-btn:hover .so-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.so-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.so-modal-chat-replies .so-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.so-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #FAFAFA;
  border-top: 1px solid #E5E5E5;
}

.so-modal-chat-reply-input .so-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.so-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.so-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.so-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.so-modal-tab-content--display .so-modal-chat-thread {
  border-color: #E5E5E5;
}

.so-modal-tab-content--display .so-modal-chat-message--main {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display .so-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.so-modal-tab-content--display .so-modal-chat-user-position {
  background-color: #E8F5E9;
}

.so-modal-tab-content--display .so-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling — plain layout like Additional/Custom sections (no full-bleed, no extra top padding) */
.so-modal-notes-header-section--external {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0 0 1.5rem 0;
  border-bottom: none;
}

.so-modal-tab-content--display .so-modal-notes-header-section--external {
  background-color: #FFFFFF;
}

.so-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.so-modal-notes-header-section--external .so-modal-form-textarea:focus {
  border-color: #F5B041;
}

.so-modal-chat-section--external .so-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.so-modal-chat-avatar--external {
  background-color: #F5B041;
}

.so-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.so-modal-tab-content--display .so-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-thread {
  border-color: #E5E5E5;
}

.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-message--main {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-user-name {
  color: #333333 !important;
}

.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-user-position {
  background-color: #FDE8D0;
}

.so-modal-tab-content--display.so-modal-tab-content--external .so-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.so-modal-chat-reply-btn--external {
  color: #E67E22;
}

.so-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.so-modal-chat-reply-btn--external .so-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.so-modal-chat-reply-btn--external:hover .so-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.so-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.so-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.so-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.so-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.so-modal-chat-textarea-wrapper {
  position: relative;
}

.so-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.so-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.so-modal-chat-mention-item:hover {
  background-color: #FAFAFA;
}

.so-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.so-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.so-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.so-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.so-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.so-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.so-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.so-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.so-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.so-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.so-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.so-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.so-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.so-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.so-modal-tab-content--display .so-modal-table-empty-state-title {
  color: #666666;
}

.so-modal-tab-content--display .so-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.so-modal-partner-header-section + .so-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Partner content section - keep overflow hidden, dropdowns use position:fixed */
.so-modal-partner-header-section + .so-modal-item-content-section--dropdown-open {
  overflow: hidden;
  z-index: 10;
}

.so-modal-partner-header-section + .so-modal-item-content-section .so-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Partner Table wrapper - keep overflow hidden, dropdowns use position:fixed */
.so-modal-partner-header-section + .so-modal-item-content-section .so-modal-item-table-wrapper--dropdown-open {
  overflow: hidden;
}

/* Partner Table - override min-height to allow shrinking */
.so-modal-partner-header-section + .so-modal-item-content-section .so-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Partner Table container - keep overflow-y auto, dropdowns use position:fixed */
.so-modal-partner-header-section + .so-modal-item-content-section .so-modal-detail-table-container--dropdown-open {
  overflow-y: auto;
}

/* Partner button section - stays at bottom with 16px padding */
.so-modal-partner-header-section + .so-modal-item-content-section .so-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.so-modal-partner-table-container .so-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.so-modal-partner-table-container .so-modal-partner-table th:last-child,
.so-modal-partner-table-container .so-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.so-modal-detail-table-container--external.so-modal-partner-table-container .so-modal-partner-table th:last-child,
.so-modal-detail-table-container--external.so-modal-partner-table-container .so-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.so-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.so-modal-item-header-section .so-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-tab-content--display .so-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.so-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.so-modal-tab-content--display .so-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.so-modal-item-header-section--external .so-modal-form-input:focus {
  border-color: #F5B041;
}

.so-modal-item-header-section--external .so-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.so-modal-detail-subtabs--external .so-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.so-modal-detail-subtabs--external .so-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.so-modal-detail-subtabs--external .so-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.so-modal-tab-content--display .so-modal-detail-subtabs--external .so-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.so-modal-tab-content--display .so-modal-detail-subtabs--external .so-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.so-modal-tab-content.so-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.so-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.so-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.so-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.so-modal-item-table-wrapper .so-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.so-modal-item-table-wrapper .so-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.so-modal-item-table-wrapper--terms .so-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.so-modal-tab-content--external.so-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.so-modal-tab-content--external .so-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.so-modal-tab-content--external .so-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.so-modal-tab-content--external .so-modal-item-table-wrapper--terms .so-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables — same flex approach as Internal.
   Content-section: flex column + overflow hidden.
   Table-wrapper: flex 1 (fills remaining after summary).
   Summary: intrinsic height at bottom.
   Only scrollbar is inside the table-container (overflow-y: auto). */

.so-modal-item-table-wrapper--terms .so-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.so-modal-item-table-wrapper--terms .so-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.so-modal-item-table-wrapper--terms .so-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #FAFAFA;
}

.so-modal-item-table-wrapper--terms .so-modal-detail-table tr {
  height: auto;
}

.so-modal-item-table-wrapper--terms .so-modal-detail-table-container .so-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.so-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.so-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.so-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.so-modal-volume-input-group .so-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.so-modal-volume-input-group .so-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.so-modal-volume-input-group .so-modal-sla-input-wrapper .so-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.so-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.so-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.so-modal-volume-uom-list--display .so-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-volume-uom-list--display .so-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.so-modal-volume-uom-list--display .so-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-volume-uom-list--display .so-modal-volume-uom-check {
  color: #999999 !important;
}

.so-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-volume-uom-item:hover {
  background-color: #FAFAFA;
}

.so-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.so-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.so-modal-volume-uom-dropdown--display .so-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.so-modal-volume-uom-dropdown--display .so-modal-volume-uom-item:hover {
  background-color: transparent;
}

.so-modal-volume-uom-dropdown--display .so-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.so-modal-volume-uom-dropdown--display .so-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.so-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.so-modal-weight-input-group .so-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.so-modal-weight-input-group .so-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.so-modal-weight-input-group .so-modal-sla-input-wrapper .so-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.so-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.so-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-weight-uom-input::placeholder {
  color: #999999;
}

.so-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-weight-uom-item:hover {
  background-color: #FAFAFA;
}

.so-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.so-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.so-modal-weight-uom-dropdown--display .so-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.so-modal-weight-uom-dropdown--display .so-modal-weight-uom-item:hover {
  background-color: transparent;
}

.so-modal-weight-uom-dropdown--display .so-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.so-modal-weight-uom-dropdown--display .so-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.so-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.so-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.so-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.so-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.so-modal-form-input--display ~ .so-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.so-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.so-modal-form-input--display {
  cursor: default;
}

.so-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.so-modal-form-label--display {
  color: #333333 !important;
}

.so-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.so-modal-form-label--display .so-modal-required {
  color: #FF4D4F;
}

.so-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.so-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.so-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.so-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.so-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.so-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.so-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.so-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.so-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.so-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.so-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.so-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.so-modal-sla-spinner-btn:disabled .so-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.so-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sla-spinner-btn:hover .so-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.so-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.so-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.so-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.so-modal-divider {
  /* Bleed past the parent's 40px horizontal padding so the line spans
     the full modal width (matching .so-modal-partner-header-section's
     full-width border-bottom). Uses position/left/width instead of
     negative margin so inline `style={{ margin: ... }}` overrides
     don't break the bleed. */
  width: calc(100% + 5rem);
  position: relative;
  left: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.so-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #FAFAFA;
  color: #666666;
  white-space: nowrap;
}

.so-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.so-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.so-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.so-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.so-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.so-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.so-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.so-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.so-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.so-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.so-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.so-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.so-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.so-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.so-modal-stage-dropdown-input--display .so-modal-stage {
  background-color: #FAFAFA !important;
  color: #666666 !important;
}

.so-modal-stage-dropdown-input--display .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.so-modal-stage-section {
  width: 25.6%;
  min-width: 19rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.so-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.so-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.so-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.so-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.so-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.so-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.so-modal-accordion-header:hover {
  background-color: #FAFAFA;
}

.so-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.so-modal-accordion-header--display {
  color: #333333;
}

.so-modal-accordion-header--display.so-modal-accordion-header--active {
  color: #333333;
}

.so-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.so-modal-accordion-header--display .so-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.so-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.so-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.so-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.so-modal-stage-main-title--display {
  color: #138B4C;
}

.so-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-stage-title--display {
  color: #333333;
}

.so-modal-stage-current {
  margin-bottom: 1.875rem;
}

.so-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.so-modal-stage-label--display {
  color: #666666;
}

.so-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-stage-subtitle--display {
  color: #333333;
}

.so-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.so-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.so-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.so-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.so-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.so-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.so-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.so-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.so-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.so-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.so-modal-download-button:active {
  background-color: #E0E0E0;
}

.so-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-download-button--display .so-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.so-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.so-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.so-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.so-modal-timeline-badge--inactive {
  background-color: #FAFAFA !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.so-modal-timeline-item--display .so-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.so-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.so-modal-timeline-badge--inactive .so-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.so-modal-timeline-item--display .so-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.so-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.so-modal-timeline-item--display .so-modal-timeline-line {
  background-color: #138B4C;
}

.so-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.so-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.so-modal-timeline-status--display {
  color: #333333;
}

.so-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.so-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.so-modal-timeline-date--display {
  color: #666666;
}

.so-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.so-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.so-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.so-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.so-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.so-modal-timeline-document--display {
  color: #138B4C;
}

.so-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.so-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.so-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.so-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.so-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.so-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.so-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.so-modal-activity-item--display .so-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.so-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.so-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.so-modal-activity-item--display .so-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.so-modal-activity-item--display .so-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.so-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.so-modal-activity-item--display .so-modal-activity-line {
  background-color: #138B4C;
}

.so-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.so-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.so-modal-activity-type--display {
  color: #333333;
}

.so-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.so-modal-activity-header--display {
  color: #666666;
}

.so-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.so-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.so-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.so-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.so-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.so-modal-activity-change--display .so-modal-activity-field {
  color: #333333;
}

.so-modal-activity-change--display .so-modal-activity-new {
  color: #138B4C;
}

.so-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.so-modal-activity-date--display {
  color: #666666;
}

.so-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.so-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.so-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.so-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.so-modal-activity-more--display {
  color: #138B4C;
}

.so-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-activity-more--display .so-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.so-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.so-modal-reference-table thead {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display .so-modal-reference-table thead {
  background-color: #FAFAFA;
}

.so-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.so-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.so-modal-tab-content--display .so-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.so-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.so-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.so-modal-tab-content--display .so-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.so-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.so-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.so-modal-detail-subtab:hover {
  color: #138B4C;
}

.so-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.so-modal-tab-content--display .so-modal-detail-subtab {
  color: #666666;
}

.so-modal-tab-content--display .so-modal-detail-subtab:hover {
  color: #138B4C;
}

.so-modal-tab-content--display .so-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.so-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.so-modal-tab-content.so-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.so-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.so-modal-detail-delivery-wrapper .so-modal-form-label {
  flex-shrink: 0;
}

.so-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.so-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.so-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.so-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.so-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.so-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.so-modal-detail-table-container .so-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.so-modal-detail-table-container .so-modal-detail-table thead {
  background-color: #F0F0F0;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.so-modal-detail-table-container .so-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F0F0F0;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-detail-table-container .so-modal-detail-table th:not(.detail-table-frozen-item):not(.detail-table-frozen-product):not(.detail-table-frozen-description) {
  position: relative;
}

/* Column resize handle for detail tables */
.so-modal-detail-table .so-modal-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3125rem;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 20;
}

.so-modal-detail-table .so-modal-column-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.so-modal-detail-table .so-modal-column-resize-handle:hover::after {
  background-color: #408952;
}

.so-modal-detail-table .so-modal-column-resize-handle--active::after {
  background-color: #408952;
}

/* Sortable table header hover effect */
.so-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.so-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.so-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.so-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.so-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.so-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.so-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-detail-table th,
.so-modal-tab-content--display .so-modal-packaging-table th,
.so-modal-tab-content--display .so-modal-partner-table th,
.so-modal-tab-content--display .so-modal-attachment-table th {
  color: #333333;
}

.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-detail-table td,
.so-modal-tab-content--display .so-modal-packaging-table td,
.so-modal-tab-content--display .so-modal-partner-table td,
.so-modal-tab-content--display .so-modal-attachment-table td {
  color: #333333;
}

/* Display Mode - ALL cells uniform background */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-detail-table tbody td {
  background-color: #FAFAFA !important;
  transition: none !important;
}

/* Display Mode - ALL child elements inside cells must be transparent */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-detail-table tbody td * {
  background-color: transparent !important;
  background: transparent !important;
}


/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-description,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-text,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-available-qty,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-batch,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-serial,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-sales-order,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-so-item,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-pr-item,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-package-no,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-product-type,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-product-group,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-product-category,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-product-variant,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .detail-table-cell--readonly,
.so-modal-tab-content--display .so-modal-detail-table tbody tr:hover .so-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-description,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-text,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-available-qty,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-batch,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-serial,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-sales-order,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-so-item,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-pr-item,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-package-no,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-type,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-group,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-category,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-variant,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .so-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.so-modal-detail-table-container .so-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.so-modal-detail-table-container .so-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.so-modal-detail-table-container .so-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC;
}

/* External PoV Table Row Hover - Orange Style */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover {
  background-color: #FFF8F0;
}

.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0;
}

/* External PoV Detail Table - match font color with Partner List table */
.so-modal-detail-table-container--external .so-modal-detail-table td {
  color: #555555 !important;
}

.so-modal-detail-table-container .so-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  box-sizing: border-box;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Error state for detail-table cells — recolor the input's existing 1px
   transparent border-bottom to red. Matches the subtle single-line style used
   by the Multiple Sales Order table in the Delivery Order modal. */
.so-modal-detail-table td .so-modal-handling-product-input.so-modal-table-cell--error,
.so-modal-detail-table td .so-modal-handling-product-input.so-modal-table-cell--error:focus,
.so-modal-detail-table td .so-modal-handling-product-input.so-modal-table-cell--error:hover {
  border-bottom-color: #DC3545 !important;
}

/* Read-only tables (Item Analysis, Surcharge Analysis) — always grey, even in Edit mode */
.so-modal-detail-table.so-modal-detail-table--readonly tbody td {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table.so-modal-detail-table--readonly tbody td * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Frozen columns for detail table */
.so-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FAFAFA !important;
  min-width: 5rem;
  max-width: 5rem;
  width: 5rem;
}

.so-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F0F0F0 !important;
}

.so-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #FAFAFA !important;
  color: #555555;
}

.so-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #FAFAFA !important;
  min-width: 10rem;
}

.so-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F0F0F0 !important;
}

.so-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #FAFAFA !important;
  color: #555555;
}

.so-modal-detail-table .detail-table-frozen-description {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
  background-color: #FAFAFA !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
  min-width: 12.5rem;
}

.so-modal-detail-table thead .detail-table-frozen-description {
  z-index: 11;
  background-color: #F0F0F0 !important;
}

.so-modal-detail-table tbody td.detail-table-frozen-description {
  background-color: #FAFAFA !important;
  color: #555555;
}

/* Non-editable table cell */
.so-modal-detail-table tbody td.detail-table-cell--readonly {
  background-color: #FAFAFA;
  color: #555555;
}

/* Description column - non-editable style */
.so-modal-detail-table tbody td.detail-table-description {
  background-color: #FAFAFA;
  color: #555555;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text column - non-editable style */
.so-modal-detail-table tbody td.detail-table-text {
  background-color: #FAFAFA;
}

/* Remaining Qty column - non-editable style */
.so-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #FAFAFA;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.so-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #FAFAFA;
  color: #555555;
}

/* Secured Qty column - display mode style */
.so-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #FAFAFA;
  color: #555555;
}

/* Taxable column - grey background */
.so-modal-detail-table tbody td.detail-table-taxable {
  background-color: #FAFAFA;
}

/* Batch column - display mode style */
.so-modal-detail-table tbody td.detail-table-batch {
  background-color: #FAFAFA;
  color: #555555;
}

/* Serial Number column - display mode style */
.so-modal-detail-table tbody td.detail-table-serial {
  background-color: #FAFAFA;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.so-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #FAFAFA;
}

/* SO Item column - non-editable style */
.so-modal-detail-table tbody td.detail-table-so-item {
  background-color: #FAFAFA;
}

/* Purchase Requisition column - non-editable style */
.so-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #FAFAFA;
}

/* PR Item column - non-editable style */
.so-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #FAFAFA;
}

/* Package No. column - non-editable style */
.so-modal-detail-table tbody td.detail-table-package-no {
  background-color: #FAFAFA;
}

/* Shipment No. column - non-editable style */
.so-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #FAFAFA;
}

/* Product Type column - non-editable style */
.so-modal-detail-table tbody td.detail-table-product-type {
  background-color: #FAFAFA;
}

/* Product Group column - non-editable style */
.so-modal-detail-table tbody td.detail-table-product-group {
  background-color: #FAFAFA;
}

/* Product Category column - non-editable style */
.so-modal-detail-table tbody td.detail-table-product-category {
  background-color: #FAFAFA;
}

/* Product Variant column - non-editable style */
.so-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #FAFAFA;
}

.so-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.so-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.so-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.so-modal-detail-table tbody tr:hover .detail-table-description,
.so-modal-detail-table tbody tr:hover .detail-table-text,
.so-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.so-modal-detail-table tbody tr:hover .detail-table-available-qty,
.so-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.so-modal-detail-table tbody tr:hover .detail-table-batch,
.so-modal-detail-table tbody tr:hover .detail-table-serial,
.so-modal-detail-table tbody tr:hover .detail-table-sales-order,
.so-modal-detail-table tbody tr:hover .detail-table-so-item,
.so-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.so-modal-detail-table tbody tr:hover .detail-table-pr-item,
.so-modal-detail-table tbody tr:hover .detail-table-package-no,
.so-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.so-modal-detail-table tbody tr:hover .detail-table-product-type,
.so-modal-detail-table tbody tr:hover .detail-table-product-group,
.so-modal-detail-table tbody tr:hover .detail-table-product-category,
.so-modal-detail-table tbody tr:hover .detail-table-product-variant,
.so-modal-detail-table tbody tr:hover .detail-table-taxable,
.so-modal-detail-table tbody tr:hover .detail-table-cell--readonly,
.so-modal-detail-table tbody tr:hover .so-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-frozen-description,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-description,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-text,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-available-qty,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-batch,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-serial,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-sales-order,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-so-item,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-pr-item,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-package-no,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-type,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-group,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-category,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-product-variant,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .detail-table-cell--readonly,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .so-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.so-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.so-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.so-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.so-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.so-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.so-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.so-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.so-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.so-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.so-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.so-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.so-modal-packaging-expand-cell--display {
  background-color: #FAFAFA !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.so-modal-packaging-cell--display {
  background-color: #FAFAFA !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.so-modal-packaging-delete-cell--display {
  background-color: #FAFAFA !important;
}

/* Unassigned Package - Grey background for expand cell */
.so-modal-packaging-expand-cell--unassigned {
  background-color: #FAFAFA !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.so-modal-packaging-cell--unassigned {
  background-color: #FAFAFA !important;
}

/* Unassigned Package - Grey background for delete cell */
.so-modal-packaging-delete-cell--unassigned {
  background-color: #FAFAFA !important;
}

/* Edit Icon Button */
.so-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.so-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.so-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.so-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.so-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.so-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.so-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.so-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.so-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.so-modal-add-item-btn:hover:not(:disabled) {
  background-color: #FAFAFA;
  border-color: #CCCCCC;
}

.so-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.so-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.so-modal-add-item-btn--disabled .so-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.so-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.so-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.so-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.so-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.so-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.so-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table thead {
  background-color: #FAFAFA;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.so-modal-sales-order-table-container .so-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.so-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #FAFAFA !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.so-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #FAFAFA !important;
}

.so-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #FAFAFA !important;
}

.so-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.so-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.so-modal-table-input:focus {
  outline: none;
}

.so-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.so-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.so-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.so-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.so-modal-tags-container {
  position: relative;
  width: 100%;
}

.so-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.so-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.so-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.so-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.so-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.so-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.so-modal-tags-input--display .so-modal-tag {
  background-color: #FAFAFA !important;
  color: #555555 !important;
}

.so-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.so-modal-tag-remove:hover {
  color: #333333;
}

.so-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.so-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.so-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.so-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-tags-item:hover {
  background-color: #FAFAFA;
}

.so-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.so-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.so-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #FAFAFA;
}

.so-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.so-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.so-modal-status-container {
  position: relative;
  width: 100%;
}

.so-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.so-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.so-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.so-modal-status-placeholder {
  color: #999999;
}

.so-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.so-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.so-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.so-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-status-item:hover {
  background-color: #FAFAFA;
}

.so-modal-status-item--selected {
  background-color: #E8F5E9;
}

.so-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.so-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.so-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.so-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.so-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.so-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.so-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.so-modal-status-input--display .so-modal-status-badge {
  background-color: #FAFAFA !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.so-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.so-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.so-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.so-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.so-modal-stage-dropdown-placeholder {
  color: #999999;
}

.so-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.so-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.so-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.so-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-stage-dropdown-item:hover {
  background-color: #FAFAFA;
}

.so-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.so-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.so-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.so-modal-stage--created .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.so-modal-stage--approved .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.so-modal-stage--processed .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.so-modal-stage--picked .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.so-modal-stage--packed .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.so-modal-stage--planned .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.so-modal-stage--loaded .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.so-modal-stage--issued .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.so-modal-stage--departed .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.so-modal-stage--arrived .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.so-modal-stage--unloaded .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.so-modal-stage--delivered .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.so-modal-stage--confirmed .so-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.so-modal-stage--billed .so-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.so-modal-stage-dropdown-input .so-modal-stage,
.so-modal-stage-dropdown-item .so-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.so-modal-baseline-date-dropdown {
  position: relative;
}

.so-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.so-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-baseline-date-item:hover {
  background-color: #FAFAFA;
}

.so-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.so-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.so-modal-reference-type-dropdown {
  position: relative;
}

.so-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.so-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-reference-type-item:hover {
  background-color: #FAFAFA;
}

.so-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.so-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.so-modal-delivery-priority-dropdown {
  position: relative;
}

.so-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.so-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-delivery-priority-item:hover {
  background-color: #FAFAFA;
}

.so-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.so-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.so-modal-delivery-priority-item--placeholder:hover {
  background-color: #FAFAFA;
  cursor: pointer;
}

.so-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.so-modal-delivery-priority-separator {
  color: #666666;
}

.so-modal-delivery-priority-name {
  color: #333333;
}

.so-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.so-modal-organization-dropdown {
  position: relative;
}

.so-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.so-modal-organization-dropdown-content--display .so-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-organization-dropdown-content--display .so-modal-organization-item:hover {
  background-color: transparent !important;
}

.so-modal-organization-dropdown-content--display .so-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-organization-dropdown-content--display .so-modal-organization-code,
.so-modal-organization-dropdown-content--display .so-modal-organization-name,
.so-modal-organization-dropdown-content--display .so-modal-organization-separator {
  color: #999999 !important;
}

.so-modal-organization-dropdown-content--display .so-modal-organization-check {
  color: #999999 !important;
}

.so-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-organization-item:hover {
  background-color: #FAFAFA;
}

.so-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.so-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-organization-separator {
  color: #999999;
}

.so-modal-organization-name {
  color: #333333;
}

.so-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.so-modal-sales-structure-dropdown {
  position: relative;
}

.so-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.so-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.so-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-sales-structure-item:hover {
  background-color: #FAFAFA;
}

.so-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.so-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-sales-structure-separator {
  color: #999999;
}

.so-modal-sales-structure-name {
  color: #333333;
}

.so-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.so-modal-delivery-type-dropdown {
  position: relative;
}

.so-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.so-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.so-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.so-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.so-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.so-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-delivery-type-item:hover {
  background-color: #FAFAFA;
}

.so-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.so-modal-delivery-type-item--placeholder:hover {
  background-color: #FAFAFA;
}

.so-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.so-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-delivery-type-separator {
  color: #999999;
}

.so-modal-delivery-type-description {
  color: #333333;
}

.so-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.so-modal-content::-webkit-scrollbar,
.so-modal-stage-content::-webkit-scrollbar,


.so-modal-content::-webkit-scrollbar-track,
.so-modal-stage-content::-webkit-scrollbar-track,


.so-modal-content::-webkit-scrollbar-thumb,
.so-modal-stage-content::-webkit-scrollbar-thumb,


.so-modal-content::-webkit-scrollbar-thumb:hover,
.so-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.so-modal-sales-channel-dropdown {
  position: relative;
}

.so-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.so-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-sales-channel-item:hover {
  background-color: #FAFAFA;
}

.so-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.so-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-sales-channel-separator {
  color: #999999;
}

.so-modal-sales-channel-name {
  color: #333333;
}

.so-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.so-modal-sales-unit-dropdown {
  position: relative;
}

.so-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.so-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-sales-unit-item:hover {
  background-color: #FAFAFA;
}

.so-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.so-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-sales-unit-separator {
  color: #999999;
}

.so-modal-sales-unit-name {
  color: #333333;
}

.so-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.so-modal-organization-item--placeholder,
.so-modal-sales-structure-item--placeholder,
.so-modal-sales-channel-item--placeholder,
.so-modal-sales-unit-item--placeholder,
.so-modal-territory-item--placeholder,
.so-modal-sales-office-item--placeholder,
.so-modal-sold-to-party-item--placeholder,
.so-modal-deliver-to-party-item--placeholder,
.so-modal-attention-to-deliver-item--placeholder,
.so-modal-incoterm-item--placeholder,
.so-modal-delivery-point-item--placeholder,
.so-modal-shipping-point-item--placeholder,
.so-modal-sales-order-item--placeholder,
.so-modal-sales-team-item--placeholder,
.so-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.so-modal-organization-item--placeholder:hover,
.so-modal-sales-structure-item--placeholder:hover,
.so-modal-sales-channel-item--placeholder:hover,
.so-modal-sales-unit-item--placeholder:hover,
.so-modal-territory-item--placeholder:hover,
.so-modal-sales-office-item--placeholder:hover,
.so-modal-sold-to-party-item--placeholder:hover,
.so-modal-deliver-to-party-item--placeholder:hover,
.so-modal-attention-to-deliver-item--placeholder:hover,
.so-modal-incoterm-item--placeholder:hover,
.so-modal-delivery-point-item--placeholder:hover,
.so-modal-shipping-point-item--placeholder:hover,
.so-modal-sales-order-item--placeholder:hover,
.so-modal-sales-team-item--placeholder:hover,
.so-modal-sales-person-item--placeholder:hover {
  background-color: #FAFAFA;
}

/* Buyer Dropdown Styles */
.so-modal-sold-to-party-dropdown {
  position: relative;
}

.so-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-sold-to-party-input:focus,
.so-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.so-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-sold-to-party-item:hover {
  background-color: #FAFAFA;
}

.so-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.so-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.so-modal-sold-to-party-separator {
  color: #999999;
}

.so-modal-sold-to-party-name {
  color: #333333;
}

.so-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.so-modal-deliver-to-party-dropdown {
  position: relative;
}

.so-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.so-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-deliver-to-party-item:hover {
  background-color: #FAFAFA;
}

.so-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.so-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.so-modal-deliver-to-party-separator {
  color: #999999;
}

.so-modal-deliver-to-party-name {
  color: #333333;
}

.so-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.so-modal-attention-to-deliver-dropdown {
  position: relative;
}
.so-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-attention-to-deliver-item:hover {
  background-color: #FAFAFA;
}
.so-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.so-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.so-modal-attention-to-deliver-separator {
  color: #999999;
}
.so-modal-attention-to-deliver-name {
  color: #333333;
}
.so-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.so-modal-incoterm-dropdown {
  position: relative;
}
.so-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-incoterm-item:hover {
  background-color: #FAFAFA;
}
.so-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.so-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.so-modal-incoterm-separator {
  color: #999999;
}
.so-modal-incoterm-name {
  color: #333333;
}
.so-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.so-modal-delivery-point-dropdown {
  position: relative;
}
.so-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-delivery-point-item:hover {
  background-color: #FAFAFA;
}
.so-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.so-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.so-modal-delivery-point-separator {
  color: #999999;
}
.so-modal-delivery-point-name {
  color: #333333;
}
.so-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.so-modal-shipping-point-dropdown {
  position: relative;
}
.so-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-shipping-point-item:hover {
  background-color: #FAFAFA;
}
.so-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.so-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.so-modal-shipping-point-separator {
  color: #999999;
}
.so-modal-shipping-point-name {
  color: #333333;
}
.so-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.so-modal-sales-order-dropdown {
  position: relative;
}
.so-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-sales-order-item:hover {
  background-color: #FAFAFA;
}
.so-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.so-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.so-modal-sales-order-separator {
  color: #999999;
}
.so-modal-sales-order-name {
  color: #333333;
}
.so-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.so-modal-date-picker {
  position: relative;
}
.so-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.so-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.so-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.so-modal-date-input::-webkit-datetime-edit-text,
.so-modal-date-input::-webkit-datetime-edit-month-field,
.so-modal-date-input::-webkit-datetime-edit-day-field,
.so-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.so-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.so-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.so-modal-sales-person-dropdown {
  position: relative;
}
.so-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.so-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-sales-person-item:hover {
  background-color: #FAFAFA;
}
.so-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.so-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.so-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.so-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.so-modal-sales-person-separator {
  color: #999999;
}
.so-modal-sales-person-name {
  color: #333333;
}
.so-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.so-modal-sales-team-dropdown {
  position: relative;
}
.so-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.so-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.so-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.so-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.so-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.so-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.so-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.so-modal-sales-team-item:hover {
  background-color: #FAFAFA;
}
.so-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.so-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.so-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.so-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.so-modal-sales-team-separator {
  color: #999999;
}
.so-modal-sales-team-name {
  color: #333333;
}
.so-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.so-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.so-modal-territory-dropdown {
  position: relative;
}

.so-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.so-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-territory-item:hover {
  background-color: #FAFAFA;
}

.so-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.so-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-territory-separator {
  color: #999999;
}

.so-modal-territory-name {
  color: #333333;
}

.so-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.so-modal-sales-office-dropdown {
  position: relative;
}

.so-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.so-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-sales-office-item:hover {
  background-color: #FAFAFA;
}

.so-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.so-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.so-modal-sales-office-separator {
  color: #999999;
}

.so-modal-sales-office-name {
  color: #333333;
}

.so-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.so-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.so-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.so-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.so-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.so-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.so-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.so-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-table-dropdown-input:focus {
  outline: none;
}

.so-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.so-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.so-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.so-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.so-modal-delivery-type-list::-webkit-scrollbar,
.so-modal-stage-dropdown-list::-webkit-scrollbar,
.so-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.so-modal-delivery-type-list::-webkit-scrollbar-track,
.so-modal-stage-dropdown-list::-webkit-scrollbar-track,
.so-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-delivery-type-list::-webkit-scrollbar-thumb,
.so-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.so-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.so-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.so-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.so-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.so-modal-wrapper,
.so-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.so-modal-wrapper,
.so-modal-wrapper *,
.so-modal-content,
.so-modal-data-flow-2-container,
.so-modal-data-flow-container,
.so-modal-calendar-container,
.so-modal-calendar-milestones-list,
.so-modal-calendar-view,
.so-modal-calendar-yearly,
.so-modal-calendar-monthly,
.so-modal-calendar-weekly,
.so-modal-calendar-weekly-body,
.so-modal-calendar-daily,
.so-modal-calendar-daily-timeline,
.so-modal-calendar-grid,
.so-modal-calendar-grid-body,
.so-modal-detail-table-container,
.so-modal-item-table-wrapper,
.so-modal-attachment-table-container,
.so-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.so-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.so-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.so-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.so-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.so-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.so-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.so-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #FAFAFA;
}

.so-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #FAFAFA;
}

.so-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-tab-content--display .so-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.so-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-tab-content--display .so-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.so-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.so-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.so-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) {
  font-weight: 600;
}

.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) .so-modal-packaging-input,
.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) .so-modal-packaging-input--display,
.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) .so-modal-handling-product-input,
.so-modal-packaging-row--unassigned:not(.so-modal-packaging-row--expanded) .so-modal-handling-product-input--display {
  font-weight: 600;
}

.so-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.so-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row td.so-modal-packaging-expand-cell--unassigned {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row td.so-modal-packaging-cell--unassigned {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row td.so-modal-packaging-delete-cell--unassigned {
  background-color: #FAFAFA !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-expand-cell--unassigned {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-cell--unassigned {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-delete-cell--unassigned {
  background-color: #FAFAFA !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td.so-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-expand-cell--display {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-cell--display {
  background-color: #FAFAFA !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded td.so-modal-packaging-delete-cell--display {
  background-color: #FAFAFA !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row--expanded:hover td.so-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display,
.so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display,
.so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.so-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.so-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-tab-content--display .so-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.so-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-tab-content--display .so-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.so-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.so-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.so-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.so-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.so-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.so-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.so-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.so-modal-packaging-detail-table th:first-child,
.so-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.so-modal-packaging-detail-table th:nth-child(2),
.so-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.so-modal-packaging-detail-table th:nth-child(3),
.so-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.so-modal-packaging-detail-table td:nth-child(4),
.so-modal-packaging-detail-table td:nth-child(6),
.so-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.so-modal-packaging-detail-table td:nth-child(5),
.so-modal-packaging-detail-table td:nth-child(7),
.so-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.so-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.so-modal-tab-content--display .so-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display .so-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.so-modal-tab-content--display .so-modal-packaging-detail-container {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display .so-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.so-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.so-modal-packaging-table td:last-child,
.so-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.so-modal-packaging-table td:last-child .so-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.so-modal-detail-table-container--external .so-modal-packaging-table th:last-child,
.so-modal-detail-table-container--external .so-modal-packaging-table td.so-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.so-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.so-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.so-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.so-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.so-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.so-modal-packaging-child-table thead {
  background-color: #FAFAFA !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.so-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.so-modal-packaging-child-table tbody tr {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table tbody tr:hover {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table th {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table td {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table th:hover {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table td:hover {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table tbody tr:hover td {
  background-color: #FAFAFA !important;
}

.so-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.so-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.so-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.so-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.so-modal-packaging-child-table tr {
  border: none !important;
}

.so-modal-packaging-child-table thead,
.so-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.so-modal-packaging-child-table th:first-child,
.so-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.so-modal-packaging-child-table th:nth-child(2),
.so-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.so-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.so-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.so-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.so-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.so-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.so-modal-packaging-child-table th:nth-child(3),
.so-modal-packaging-child-table td:nth-child(3),
.so-modal-packaging-child-table th:nth-child(4),
.so-modal-packaging-child-table td:nth-child(4),
.so-modal-packaging-child-table th:nth-child(5),
.so-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.so-modal-packaging-child-table th:nth-child(6),
.so-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.so-modal-packaging-child-table th:nth-child(7),
.so-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.so-modal-detail-table-container--external .so-modal-packaging-child-table th:last-child,
.so-modal-detail-table-container--external .so-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.so-modal-packaging-child-table td:last-child .so-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.so-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.so-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.so-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.so-modal-packaging-input--display {
  cursor: default;
  background-color: #FAFAFA !important;
  color: #555555;
  transition: none !important;
}

.so-modal-packaging-input--display:focus {
  background-color: #FAFAFA !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row {
  transition: none !important;
}

.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row td {
  background-color: #FAFAFA !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display,
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display:focus,
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display,
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display:focus,
.so-modal-tab-content--display .so-modal-detail-table-container .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display:focus,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display:focus,
.so-modal-tab-content--display .so-modal-detail-table-container--external .so-modal-packaging-table tbody tr.so-modal-packaging-row:hover td .so-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.so-modal-detail-table-container--external .so-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.so-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.so-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.so-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: none;
  cursor: pointer;
  margin: 0;
}

.so-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.so-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Right-aligned handling product input (for numeric fields like Unit Price, Amount) */
.so-modal-handling-product-input--right {
  width: 100%;
  height: 100%;
  padding: 0 0.625rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: none;
  cursor: text;
  margin: 0;
  text-align: right;
}

.so-modal-handling-product-input--right:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.so-modal-handling-product-input--right::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.so-modal-handling-product-input--right-display {
  cursor: default;
  background-color: #FAFAFA !important;
  width: 100%;
  height: 100%;
  padding: 0 0.625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  text-align: right;
}

/* Display mode handling product input — non-editable #FCFCFC */
.so-modal-handling-product-input--display {
  cursor: default;
  background-color: #FAFAFA !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.so-modal-handling-product-input--display:focus {
  background-color: #FAFAFA !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.so-modal-handling-product-input--display:hover {
  background-color: #FAFAFA !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.so-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: #FAFAFA !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.so-modal-handling-product-input--view-only:focus {
  background-color: #FAFAFA !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.so-modal-handling-product-input--view-only:hover {
  background-color: #FAFAFA !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.so-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* External PoV Handling Product Input - match font color */
.so-modal-detail-table-container--external .so-modal-handling-product-input--display {
  background-color: #FAFAFA !important;
  color: #555555;
}

.so-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
  cursor: pointer;
}

/* Display mode dropdown content styling */
.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-item--display {
  color: #999999 !important;
}

.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-code,
.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-name,
.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-separator {
  color: #999999 !important;
}

.so-modal-handling-product-dropdown-content--display .so-modal-handling-product-check {
  color: #999999 !important;
}

.so-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.so-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.so-modal-handling-product-dropdown-content--narrow .so-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.so-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.so-modal-packaging-detail-table .so-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.so-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.so-modal-detail-table-container--dropdown-open .so-modal-detail-table {
  overflow: visible;
}

.so-modal-detail-table-container--dropdown-open .so-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.so-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.so-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.so-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.so-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.so-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.so-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.so-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.so-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.so-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.so-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.so-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.so-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.so-modal-child-uom-item:hover {
  background-color: #FAFAFA;
}

.so-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.so-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.so-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.so-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.so-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.so-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.so-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.so-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.so-modal-handling-product-item:hover {
  background-color: #FAFAFA;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.so-modal-handling-product-dropdown-content--view-only {
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-item:hover {
  background-color: transparent;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-item--placeholder {
  display: none;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-code,
.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-name,
.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-separator {
  color: #555555;
}

.so-modal-handling-product-dropdown-content--view-only .so-modal-handling-product-check {
  color: #888888;
}

.so-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.so-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.so-modal-handling-product-separator {
  color: #999999;
}

.so-modal-handling-product-name {
  color: #333333;
}

.so-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.so-modal-handling-product-item--placeholder {
  cursor: default;
}

.so-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.so-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.so-modal-detail-table td:has(.so-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

/* Frozen cells must keep sticky even with dropdown inside */
.so-modal-detail-table td.detail-table-frozen-item:has(.so-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.so-modal-detail-table td.detail-table-frozen-product:has(.so-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
}

.so-modal-detail-table td.detail-table-frozen-description:has(.so-modal-handling-product-dropdown) {
  position: -webkit-sticky;
  position: sticky;
  left: 15rem;
  z-index: 5;
}

.so-modal-detail-table td .so-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.so-modal-detail-table td .so-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.so-modal-detail-table td .so-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: #FFFFFF;
  box-sizing: border-box;
}

.so-modal-detail-table td .so-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.so-modal-detail-table td .so-modal-handling-product-input--display,
.so-modal-detail-table td .so-modal-handling-product-input--display:focus,
.so-modal-detail-table td .so-modal-handling-product-input--display:hover {
  background-color: #FAFAFA !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display:focus,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display:focus,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Display mode - right-aligned input (Unit Price, Item Discount, Amount) green on row hover */
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right-display {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - right-aligned input orange on row hover */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right-display {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Edit mode - editable input green on row hover (Internal PoV) */
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input:focus,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input:hover {
  background-color: #EDF5EC !important;
}

/* Edit mode - editable right-aligned input green on row hover (Internal PoV) */
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right:focus,
.so-modal-detail-table-container .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right:hover {
  background-color: #EDF5EC !important;
}

/* Edit mode - editable input orange on row hover (External PoV) */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input:focus,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input:hover {
  background-color: #FFF8F0 !important;
}

/* Edit mode - editable right-aligned input orange on row hover (External PoV) */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right:focus,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover td .so-modal-handling-product-input--right:hover {
  background-color: #FFF8F0 !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.so-modal-detail-table td .so-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.so-modal-detail-table td .so-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.so-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.so-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.so-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.so-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-table-text-icon-btn--filled:not(.so-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.so-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.so-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.so-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.so-modal-table-text-icon-btn--display.so-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.so-modal-table-text-icon-btn--display.so-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-table-text-icon-btn--display.so-modal-table-text-icon-btn--external.so-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.so-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.so-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.so-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.so-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.so-modal-serial-assignment-btn {
  width: 10.625rem;
}

.so-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.so-modal-batch-assignment-btn--filled .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.so-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
}

.so-modal-batch-assignment-btn--display:hover {
  background-color: #FAFAFA;
  border-color: #D0D0D0;
}

.so-modal-batch-assignment-btn--display .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-batch-assignment-btn--display.so-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.so-modal-batch-assignment-btn--display.so-modal-batch-assignment-btn--filled .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.so-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.so-modal-secured-qty-btn.so-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.so-modal-secured-qty-btn--grey {
  background-color: #FAFAFA;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.so-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.so-modal-secured-qty-btn--grey .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.so-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.so-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.so-modal-batch-assignment-btn--partial .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.so-modal-batch-assignment-btn--display.so-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.so-modal-batch-assignment-btn--display.so-modal-batch-assignment-btn--partial .so-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.so-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.so-modal-secured-qty-modal .so-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.so-modal-secured-qty-modal .so-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.so-modal-secured-qty-modal.so-modal-batch-assignment-modal--display .so-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.so-modal-secured-qty-modal .so-modal-item-text-content {
  overflow-x: hidden;
}

.so-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.so-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.so-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.so-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.so-modal-batch-assignment-modal--display .so-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.so-modal-batch-assignment-modal--display .so-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.so-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.so-modal-secured-qty-lock-btn:hover {
  background-color: #FAFAFA;
}

.so-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.so-modal-secured-qty-lock-btn--open .so-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.so-modal-secured-qty-lock-btn--locked .so-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.so-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.so-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.so-modal-batch-assignment-modal .so-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.so-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.so-modal-batch-assignment-modal .so-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.so-modal-batch-assignment-modal .so-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.so-modal-batch-assignment-modal.so-modal-batch-assignment-modal--display .so-modal-item-text-info {
  background-color: #F2F8EA;
}

.so-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.so-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.so-modal-batch-assignment-info-group {
  flex: 1 1;
}

.so-modal-batch-assignment-info-group .so-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.so-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.so-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.so-modal-batch-assignment-table-section .so-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.so-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.so-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.so-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.so-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.so-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.so-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.so-modal-batch-assignment-table th,
.so-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.so-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.so-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.so-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #FAFAFA;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.so-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.so-modal-batch-assignment-table tbody td:has(.so-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.so-modal-batch-assignment-table tbody td:has(.so-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.so-modal-batch-assignment-table tbody td:nth-child(2),
.so-modal-batch-assignment-table tbody td:nth-child(3),
.so-modal-batch-assignment-table tbody td:nth-child(4),
.so-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.so-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.so-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.so-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.so-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.so-modal-batch-assignment-modal--display .so-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.so-modal-batch-assignment-modal--display .so-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.so-modal-batch-assignment-modal--display .so-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-batch-assignment-modal--display .so-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.so-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.so-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.so-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.so-modal-batch-assignment-table .so-modal-placeholder-text {
  color: #CCCCCC;
}

.so-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.so-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.so-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.so-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.so-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.so-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.so-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.so-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.so-modal-batch-assignment-table th.batch-table-frozen-batch,
table.so-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #FAFAFA !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.so-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.so-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.so-modal-batch-assignment-table td.batch-table-frozen-batch,
table.so-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.so-modal-batch-assignment-table th.batch-table-frozen-batch,
table.so-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.so-modal-batch-assignment-table th.batch-table-frozen-assign,
table.so-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.so-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.so-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.so-modal-item-text-info {
  margin-bottom: 1rem;
}

.so-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.so-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.so-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.so-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.so-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.so-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.so-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.so-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-item-text-modal .modal-header .modal-title,
.so-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.so-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.so-modal-item-text-label--display {
  color: #333333;
}

.so-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.so-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.so-modal-item-text-modal .so-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.so-modal-item-text-modal .so-modal-item-text-textarea-wrapper .so-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.so-modal-item-text-textarea {
  overflow-y: auto !important;
}

.so-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.so-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.so-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.so-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.so-modal-add-do-item-modal .so-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.so-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.so-modal-add-do-item-dropdown-section .so-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.so-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.so-modal-add-do-item-table-section .so-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.so-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.so-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.so-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.so-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.so-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.so-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #FAFAFA;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.so-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.so-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.so-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.so-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.so-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.so-modal-detail-table td:first-child .so-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.so-modal-detail-table td:first-child .so-modal-partner-type-input {
  padding-left: 0.625rem;
}

.so-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.so-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.so-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.so-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.so-modal-partner-type-dropdown--display .so-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FAFAFA;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.so-modal-partner-type-dropdown-content--display .so-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-partner-type-dropdown-content--display .so-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.so-modal-partner-type-dropdown-content--display .so-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-partner-type-dropdown-content--display .so-modal-partner-type-check {
  color: #999999 !important;
}

.so-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.so-modal-partner-type-dropdown--display .so-modal-partner-type-value {
  color: #555555;
}

.so-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.so-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.so-modal-partner-type-item:hover {
  background-color: #FAFAFA;
}

.so-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.so-modal-partner-type-item--placeholder {
  cursor: default;
}

.so-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.so-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.so-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.so-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.so-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.so-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.so-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.so-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.so-modal-partner-id-dropdown--display .so-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FAFAFA;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-code,
.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-name,
.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-separator {
  color: #999999 !important;
}

.so-modal-partner-id-dropdown-content--display .so-modal-partner-id-check {
  color: #999999 !important;
}

.so-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.so-modal-partner-id-dropdown--display .so-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.so-modal-detail-table tbody tr:hover .so-modal-partner-type-dropdown--display .so-modal-partner-type-input-wrapper,
.so-modal-detail-table tbody tr:hover .so-modal-partner-id-dropdown--display .so-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .so-modal-partner-type-dropdown--display .so-modal-partner-type-input-wrapper,
.so-modal-detail-table-container--external .so-modal-detail-table tbody tr:hover .so-modal-partner-id-dropdown--display .so-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.so-modal-partner-type-arrow--external {
  visibility: hidden;
}

.so-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.so-modal-partner-type-dropdown--external .so-modal-partner-type-value {
  color: #555555;
}

.so-modal-partner-id-dropdown--external .so-modal-partner-id-value {
  color: #555555;
}

.so-modal-detail-table-container--external .so-modal-detail-table td.so-modal-partner-name-cell {
  background-color: #FAFAFA;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.so-modal-partner-header-section--external .so-modal-form-input--display {
  color: #555555;
}

.so-modal-detail-table td.so-modal-partner-name-cell {
  background-color: #FAFAFA;
  color: #555555;
}

.so-modal-tab-content--display .so-modal-detail-table td.so-modal-partner-name-cell {
  background-color: #FAFAFA;
  color: #555555;
}

.so-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.so-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.so-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.so-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.so-modal-partner-id-item:hover {
  background-color: #FAFAFA;
}

.so-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.so-modal-partner-id-item--placeholder {
  cursor: default;
}

.so-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.so-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.so-modal-partner-id-separator {
  color: #999999;
}

.so-modal-partner-id-name {
  color: #666666;
}

.so-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.so-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.so-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.so-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.so-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.so-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.so-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.so-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.so-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.so-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.so-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.so-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.so-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.so-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #FAFAFA;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.so-modal-data-flow-stage--completed .so-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.so-modal-data-flow-stage--active .so-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.so-modal-data-flow-stage--completed .so-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-data-flow-stage--active .so-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.so-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.so-modal-data-flow-stage--completed .so-modal-data-flow-stage-label {
  color: #138B4C;
}

.so-modal-data-flow-stage--active .so-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.so-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.so-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.so-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.so-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.so-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.so-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.so-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.so-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.so-modal-data-flow-document--active .so-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.so-modal-data-flow-document-fold {
  display: none;
}

.so-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.so-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.so-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.so-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.so-modal-data-flow-document-icon-wrapper--active .so-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.so-modal-data-flow-document--active .so-modal-data-flow-document-title {
  color: #138B4C;
}

.so-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.so-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.so-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.so-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.so-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.so-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.so-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.so-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.so-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.so-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.so-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.so-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.so-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.so-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.so-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.so-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.so-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.so-modal-terms-area-button:hover {
  background-color: #FAFAFA;
  color: #333333;
}

.so-modal-terms-area-button--active {
  background-color: #FAFAFA;
  border-color: #CCCCCC;
}

.so-modal-terms-area-button .so-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.so-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.so-modal-tab-content--display .so-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.so-modal-tab-content--display .so-modal-terms-area-button .so-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.so-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.so-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.so-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.so-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.so-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.so-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.so-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.so-modal-data-flow-2-row {
  display: flex;
}

.so-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #FAFAFA;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.so-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.so-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.so-modal-data-flow-2-row--content .so-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.so-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.so-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.so-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #FAFAFA;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.so-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-label {
  color: #333333;
}

.so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.so-modal-tab-content--display .so-modal-data-flow-2-stage-circle {
  background-color: #FAFAFA;
  border-color: #D0D0D0;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage-label {
  color: #999999;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--completed .so-modal-data-flow-2-stage-label {
  color: #333333;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--active .so-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.so-modal-tab-content--display .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.so-modal-tab-content--display .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.so-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.so-modal-data-flow-2-row--content .so-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.so-modal-data-flow-2-row--content .so-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.so-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.so-modal-data-flow-2-document:hover {
  background-color: #FAFAFA;
}

.so-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.so-modal-data-flow-2-document--completed:hover {
  background-color: #FAFAFA;
}

.so-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.so-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.so-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.so-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.so-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-title,
.so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-title {
  color: #333333;
}

.so-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.so-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FAFAFA;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.so-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.so-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.so-modal-tab-content--display .so-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-title {
  color: #888888;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-title,
.so-modal-tab-content--display .so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-title {
  color: #333333;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-footer {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--completed .so-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--active .so-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-date {
  color: #333333;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.so-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.so-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #FAFAFA;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.so-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.so-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.so-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.so-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.so-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.so-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.so-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.so-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.so-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.so-modal-data-flow-2-grid--external .so-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #FAFAFA;
  border-bottom: 1px solid #D0D0D0;
}

.so-modal-data-flow-2-grid--external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell {
  border-bottom: none;
}

.so-modal-data-flow-2-grid--external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell--label {
  background-color: #FAFAFA;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.so-modal-data-flow-2-grid--external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell--label::after {
  display: none;
}

.so-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.so-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.so-modal-data-flow-2-row--content-top .so-modal-data-flow-2-document--buyer.so-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.so-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.so-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.so-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.so-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.so-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.so-modal-data-flow-2-stage--external-completed .so-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.so-modal-data-flow-2-stage--external-active .so-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.so-modal-data-flow-2-stage--external-completed .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.so-modal-data-flow-2-stage--external-active .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.so-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.so-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.so-modal-data-flow-2-document--external .so-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.so-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.so-modal-data-flow-2-document--external-completed:hover {
  background-color: #FAFAFA;
}

/* Document - External PoV active */
.so-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.so-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.so-modal-data-flow-2-document--external .so-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.so-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.so-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.so-modal-data-flow-2-document--supplier .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.so-modal-data-flow-2-document--supplier .so-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.so-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.so-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #FAFAFA;
}

/* Document icon wrapper - Supplier completed */
.so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.so-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.so-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier .so-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier .so-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-completed .so-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--supplier-active .so-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.so-modal-tab-content--data-flow-2-external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.so-modal-tab-content--data-flow-2-external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external .so-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external .so-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external .so-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.so-modal-tab-content--display.so-modal-tab-content--data-flow-2-external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.so-modal-tab-content--display.so-modal-tab-content--data-flow-2-external .so-modal-data-flow-2-row--header .so-modal-data-flow-2-cell:has(.so-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-circle,
.so-modal-tab-content--display .so-modal-data-flow-2-stage--external-completed .so-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--external-active .so-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-icon,
.so-modal-tab-content--display .so-modal-data-flow-2-stage--external-completed .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-stage--external-active .so-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-stage--external .so-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.so-modal-tab-content--display .so-modal-data-flow-2-document--external-completed .so-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.so-modal-tab-content--display .so-modal-data-flow-2-document--external-active .so-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.so-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.so-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.so-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.so-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.so-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.so-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.so-modal-calendar-milestone-item:hover {
  background-color: #FAFAFA;
}

.so-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.so-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.so-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.so-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.so-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.so-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.so-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.so-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.so-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.so-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.so-modal-milestone-date-value {
  color: #666666;
}

.so-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.so-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.so-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.so-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.so-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.so-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.so-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.so-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.so-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.so-modal-activity-item--display .so-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.so-modal-calendar-milestones .so-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.so-modal-calendar-milestones .so-modal-activity-user:hover {
  text-decoration: none;
}

.so-modal-calendar-milestones .so-modal-activity-item--display .so-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.so-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.so-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.so-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.so-modal-calendar-nav-btn:hover {
  background-color: #FAFAFA;
  border-color: #D0D0D0;
}

.so-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-calendar-nav-btn:hover .so-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.so-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.so-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.so-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.so-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.so-modal-calendar-view-mode-btn:hover {
  background-color: #FAFAFA;
}

.so-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.so-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.so-modal-calendar-view-mode-btn--active + .so-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.so-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.so-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #FAFAFA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.so-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.so-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.so-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.so-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.so-modal-calendar-grid-cell:nth-child(7n-1),
.so-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.so-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.so-modal-calendar-grid-day-name:nth-child(6),
.so-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #FAFAFA;
}

.so-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.so-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.so-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.so-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.so-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.so-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.so-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.so-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.so-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.so-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.so-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.so-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.so-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.so-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.so-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.so-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #FAFAFA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.so-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.so-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.so-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.so-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.so-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.so-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.so-modal-calendar-weekly-day-column:nth-child(6),
.so-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.so-modal-calendar-weekly-day-header:nth-child(6),
.so-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #FAFAFA;
}

.so-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.so-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.so-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.so-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.so-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.so-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.so-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.so-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.so-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.so-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.so-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.so-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.so-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.so-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.so-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.so-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.so-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.so-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.so-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.so-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.so-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.so-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.so-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-view {
  border-color: #D0D0D0;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-view-mode-btn--active + .so-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-milestones-header {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-view-title {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-grid-day-name {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-grid-cell-day {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-weekly-day-name {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-weekly-day-date {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-weekly-event-title {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-daily-header {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-daily-hour-label {
  color: #666666;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-daily-event-title {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar .so-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.so-modal-calendar-milestones-header--external {
  color: #333333;
}

.so-modal-calendar-nav-btn--external .so-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.so-modal-calendar-nav-btn--external:hover .so-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.so-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.so-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.so-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.so-modal-calendar-view-mode-btn--active-external + .so-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.so-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.so-modal-tab-content--calendar-external .so-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.so-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.so-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

/* External PoV Display Mode - keep grey background */
.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.so-modal-activity-type--external {
  color: #333333;
}

.so-modal-activity-user--external {
  color: #E67E22;
}

.so-modal-activity-user--external:hover {
  color: #D35400;
}

.so-modal-calendar-milestones .so-modal-activity-user--external {
  color: #E67E22;
}

.so-modal-calendar-milestones .so-modal-activity-user--external:hover {
  color: #D35400;
}

.so-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.so-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.so-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.so-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.so-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.so-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.so-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.so-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.so-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.so-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.so-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.so-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.so-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-milestones-header--external {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-view-mode-btn--active-external + .so-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-calendar-nav-btn--external .so-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-activity-type--external {
  color: #333333;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-activity-user--external {
  color: #E67E22;
}

.so-modal-tab-content--display.so-modal-tab-content--calendar-external .so-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.so-modal-input--error,
.so-modal-form-input.so-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.so-modal-dropdown--error .so-modal-delivery-type-input,
.so-modal-dropdown--error .so-modal-organization-input,
.so-modal-dropdown--error .so-modal-sales-structure-input,
.so-modal-dropdown--error .so-modal-sales-channel-input,
.so-modal-dropdown--error .so-modal-sales-unit-input,
.so-modal-dropdown--error .so-modal-territory-input,
.so-modal-dropdown--error .so-modal-sales-office-input,
.so-modal-dropdown--error .so-modal-sold-to-party-input,
.so-modal-dropdown--error .so-modal-deliver-to-party-input,
.so-modal-dropdown--error .so-modal-attention-to-deliver-input,
.so-modal-dropdown--error .so-modal-incoterm-input,
.so-modal-dropdown--error .so-modal-delivery-point-input,
.so-modal-dropdown--error .so-modal-shipping-point-input,
.so-modal-dropdown--error .so-modal-sales-order-input,
.so-modal-dropdown--error .so-modal-sales-team-input,
.so-modal-dropdown--error .so-modal-sales-person-input,
.so-modal-dropdown--error .so-modal-delivery-priority-input,
.so-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.so-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.so-modal-date-picker-wrapper.so-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.so-modal-custom-dropdown {
  position: relative;
}

.so-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.so-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.so-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.so-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.so-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-check {
  color: #999999 !important;
}

.so-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.so-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.so-modal-custom-dropdown-item:hover {
  background-color: #FAFAFA;
}

.so-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.so-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.so-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.so-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.so-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.so-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.so-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.so-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.so-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.so-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.so-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.so-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.so-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.so-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.so-modal-setting-form-label--display {
  color: #333333;
}

.so-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.so-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-setting-dropdown--active .so-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FAFAFA;
}

.so-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.so-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.so-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.so-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.so-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.so-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.so-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-setting-dropdown-icon.so-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.so-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.so-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.so-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.so-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.so-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.so-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.so-modal-setting-dropdown-item:hover {
  background-color: #FAFAFA;
}

.so-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.so-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.so-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.so-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.so-modal-setting-dropdown-item-separator {
  color: #999999;
}

.so-modal-setting-dropdown-item-name {
  color: #333333;
}

.so-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.so-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.so-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.so-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.so-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.so-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.so-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.so-modal-setting-tab-content--print .so-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.so-modal-setting-tab-content--print .so-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.so-modal-setting-tab-content--print .so-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FAFAFA;
  z-index: 10;
}

.so-modal-setting-tab-content--print .so-setting-add-item-section {
  flex-shrink: 0;
  padding-top: 0.75rem;
  background-color: #FFFFFF;
}

/* DO Setting Modal Table */
.so-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.so-modal-setting-table thead tr {
  height: 2.25rem;
}

.so-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #FAFAFA;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.so-modal-setting-table tbody tr {
  height: 2.25rem;
}

.so-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.so-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */
.so-setting-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
}

.so-setting-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.so-setting-checkbox-mark {
  width: 1rem;
  height: 1rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.so-setting-checkbox input:checked + .so-setting-checkbox-mark {
  background-color: #138B4C;
  border-color: #138B4C;
}

.so-setting-checkbox input:checked + .so-setting-checkbox-mark::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
}

.so-setting-checkbox-mark--disabled {
  background-color: #FFFFFF;
  border-color: #D0D0D0;
  cursor: default;
}

/* Keep green color for checked checkbox in display mode (same as edit mode) */
.so-setting-checkbox input:checked + .so-setting-checkbox-mark--disabled {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* DO Setting Output Dropdown */
.so-setting-output-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}

.so-setting-output-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}

.so-setting-output-dropdown--disabled .so-setting-output-trigger {
  cursor: default;
}

.so-setting-output-text {
  font-size: 0.8125rem;
  color: #333333;
}

.so-setting-output-text--placeholder {
  color: #999999;
  font-style: italic;
}

/* Keep dark text in display mode (same as edit mode) */
.so-setting-output-dropdown--disabled .so-setting-output-text {
  color: #333333;
}

.so-setting-output-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}

.so-setting-output-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}

/* Keep green icon in display mode (same as edit mode) */
.so-setting-output-dropdown--disabled .so-setting-output-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-setting-output-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

.so-setting-output-menu::-webkit-scrollbar {
  width: 1px;
}

.so-setting-output-menu::-webkit-scrollbar-track {
  background: transparent;
}

.so-setting-output-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-setting-output-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Flipped dropdown menu - appears above the trigger */
.so-setting-output-menu--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.so-setting-output-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}

.so-setting-output-option:hover {
  background-color: #FAFAFA;
}

.so-setting-output-option--selected {
  background-color: #E8F5E9;
}

.so-setting-output-option--selected:hover {
  background-color: #D5EDD8;
}

.so-setting-output-option--placeholder {
  color: #999999;
  font-style: italic;
}

.so-setting-output-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FAFAFA;
}

.so-setting-output-option--disabled:hover {
  background-color: #FAFAFA;
}

.so-setting-output-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* DO Setting Description Column (read-only) */
.so-modal-setting-table tbody td:nth-child(3) {
  background-color: #FAFAFA;
}

/* DO Setting Table Display Mode - keep colorful */
.so-modal-setting-table--display thead th:nth-child(2),
.so-modal-setting-table--display thead th:nth-child(3),
.so-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.so-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */
.so-setting-add-item-section {
  margin-top: 0.75rem;
}

/* DO Setting Modal Display Mode Styles */
.so-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */
.so-setting-transfer-dropdown {
  position: relative;
  height: 2.25rem;
  margin: -0.5rem -0.75rem;
  width: calc(100% + 1.5rem);
}

.so-setting-transfer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding: 0 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
}

.so-setting-transfer-dropdown--disabled .so-setting-transfer-trigger {
  cursor: default;
}

.so-setting-transfer-text {
  font-size: 0.8125rem;
  color: #333333;
}

.so-setting-transfer-text--placeholder {
  color: #999999;
  font-style: italic;
}

/* Keep dark text in display mode (same as edit mode) */
.so-setting-transfer-dropdown--disabled .so-setting-transfer-text {
  color: #333333;
}

.so-setting-transfer-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 150ms ease;
}

.so-setting-transfer-icon--active {
  filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(500%) hue-rotate(70deg) brightness(100%) contrast(90%);
}

/* Keep green icon in display mode (same as edit mode) */
.so-setting-transfer-dropdown--disabled .so-setting-transfer-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-setting-transfer-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

.so-setting-transfer-menu::-webkit-scrollbar {
  width: 1px;
}

.so-setting-transfer-menu::-webkit-scrollbar-track {
  background: transparent;
}

.so-setting-transfer-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.so-setting-transfer-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.so-setting-transfer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
  transition: background-color 150ms ease;
}

.so-setting-transfer-option:hover {
  background-color: #FAFAFA;
}

.so-setting-transfer-option--selected {
  background-color: #E8F5E9;
}

.so-setting-transfer-option--selected:hover {
  background-color: #D5EDD8;
}

.so-setting-transfer-option--placeholder {
  color: #999999;
  font-style: italic;
}

.so-setting-transfer-option--disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  background-color: #FAFAFA;
}

.so-setting-transfer-option--disabled:hover {
  background-color: #FAFAFA;
}

.so-setting-transfer-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Transfer Data Code Column (read-only) */
.so-setting-transfer-code-cell {
  background-color: #FAFAFA;
  color: #666666;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
}

/* Transfer Data Read-only Cell */
.so-setting-transfer-readonly-cell {
  background-color: #FFFFFF !important;
  color: #666666;
  font-size: 0.8125rem;
}

/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.so-modal-setting-table--display .so-setting-transfer-code-cell,
.so-modal-setting-table--display .so-setting-transfer-readonly-cell {
  color: #666666;
}

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.so-modal-setting-table--transfer.so-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.so-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.so-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.so-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #FAFAFA;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.so-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.so-modal-setting-table--transfer:not(.so-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.so-modal-setting-table--transfer:not(.so-modal-setting-table--dragging) tbody tr:hover td.so-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Being Dragged - Green Style */
.so-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.so-modal-setting-table--transfer tbody tr.update-layout-row-dragging td.so-setting-transfer-readonly-cell {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Locked - Grey background, non-draggable */
.so-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #FAFAFA !important;
  color: #999999;
}

.so-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #FAFAFA !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.so-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.so-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.so-modal-tab-content--display .so-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.so-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.so-modal-tab-content--display .so-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.so-modal-attribute-header-section--external .so-modal-form-input:focus {
  border-color: #F5B041;
}

.so-modal-attribute-header-section--external .so-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.so-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.so-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.so-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Icon (regular/solid hover toggle) */
.so-modal-available-qty-info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  color: #000000;
}

.so-modal-available-qty-info-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%) !important;
}

.so-modal-available-qty-info-icon--solid {
  display: none;
}

.so-modal-available-qty-info-icon-wrapper:hover .so-modal-available-qty-info-icon--regular,
.so-modal-available-qty-info-icon-wrapper--active .so-modal-available-qty-info-icon--regular {
  display: none;
}

.so-modal-available-qty-info-icon-wrapper:hover .so-modal-available-qty-info-icon--solid,
.so-modal-available-qty-info-icon-wrapper--active .so-modal-available-qty-info-icon--solid {
  display: block;
}

/* Available Qty Info Container */
.so-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.so-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.so-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.so-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.so-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.so-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.so-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.so-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.so-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.so-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.so-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.so-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.so-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.so-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.so-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.so-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.so-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.so-modal-available-qty-tree-level {
  position: relative;
}

.so-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.so-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.so-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.so-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.so-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.so-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.so-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.so-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.so-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #FAFAFA;
  border-color: #138B4C;
}

.so-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.so-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.so-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.so-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.so-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.so-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.so-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #FAFAFA;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.so-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.so-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.so-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.so-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.so-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.so-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.so-modal-available-qty-tree-batch-header .so-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.so-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.so-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.so-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.so-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #FAFAFA;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.so-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.so-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.so-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.so-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.so-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.so-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.so-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.so-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.so-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.so-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.so-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.so-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.so-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.so-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.so-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.so-modal-activity-type--clickable.so-modal-activity-type--display:hover {
  color: #138B4C;
}

.so-modal-activity-type--clickable.so-modal-activity-type--external:hover {
  color: #E67E00;
}

.so-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.so-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.so-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.so-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.so-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.so-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.so-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.so-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.so-modal-activity-detail-content .so-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.so-modal-activity-detail-modal .so-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.so-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.so-modal-activity-detail-modal .so-modal-tabs--display .so-modal-tab {
  color: #333333;
}

.so-modal-activity-detail-modal .so-modal-tabs--display .so-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.so-modal-activity-detail-modal .so-modal-tabs--external.so-modal-tabs--display .so-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.so-modal-activity-detail-tab-content--general .so-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.so-modal-activity-detail-content .so-modal-milestone-status {
  margin: 0;
}

.so-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.so-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.so-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.so-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

/* Field-level chat icon (Sales Rep, Attention To, etc.) — regular/solid swap on hover */
.so-modal-field-chat-wrapper .so-modal-field-chat-icon--regular { opacity: 1; transition: opacity 150ms ease; }
.so-modal-field-chat-wrapper .so-modal-field-chat-icon--solid { opacity: 0 !important; transition: opacity 150ms ease; }
.so-modal-field-chat-wrapper:hover .so-modal-field-chat-icon--regular { opacity: 0; }
.so-modal-field-chat-wrapper:hover .so-modal-field-chat-icon--solid { opacity: 1 !important; filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(1000%) hue-rotate(100deg) brightness(90%) contrast(95%) !important; }

.so-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.so-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.so-modal-activity-detail-pic-chat-wrapper:hover .so-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.so-modal-activity-detail-pic-chat-wrapper:hover .so-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.so-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.so-modal-activity-detail-pic--clickable:hover .so-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.so-modal-activity-detail-content--external .so-modal-activity-detail-pic {
  color: #E67E22;
}

.so-modal-activity-detail-content--external .so-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.so-modal-activity-detail-content--external .so-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.so-modal-activity-detail-content--external .so-modal-activity-detail-pic--clickable:hover .so-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.so-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.so-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.so-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.so-modal-activity-detail-status--pending {
  background-color: #FAFAFA;
  color: #666666;
}

.so-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.so-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.so-modal-activity-detail-description {
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.so-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.so-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.so-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.so-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.so-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.so-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.so-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.so-modal-activity-detail-content--external .so-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.so-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.so-modal-activity-detail-content--external .so-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.so-modal-activity-detail-content--external .so-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.so-modal-activity-detail-content--external .so-modal-activity-detail-document-name {
  color: #E67E22;
}

.so-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.so-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.so-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.so-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.so-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.so-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.so-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.so-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.so-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.so-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.so-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.so-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.so-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.so-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.so-modal-activity-detail-tab-content--general {
  padding: 0;
}

.so-modal-activity-detail-tab-content--general .so-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.so-modal-activity-detail-tab-content--general > div:not(.so-modal-item-text-info) {
  padding: 0 1.5rem;
}

.so-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.so-modal-activity-detail-tab-content--attachment,
.so-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.so-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.so-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.so-modal-activity-detail-tab-content--attachment .so-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.so-modal-activity-detail-tab-content--attachment .so-modal-batch-assignment-table-section > .so-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.so-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.so-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.so-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.so-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.so-modal-activity-detail-content--external .so-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.so-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.so-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.so-modal-activity-detail-content--external .so-modal-item-text-info {
  background-color: #FEF5E7;
}

.so-modal-activity-detail-content--external .so-modal-task-notes-section {
  background-color: #FEF5E7;
}

.so-modal-task-notes-section .so-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.so-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.so-modal-task-notes-textarea.so-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.so-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.so-modal-task-chat-section > .so-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.so-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.so-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.so-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.so-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.so-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.so-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.so-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.so-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.so-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.so-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.so-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.so-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.so-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.so-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.so-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.so-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.so-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.so-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.so-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.so-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.so-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.so-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.so-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.so-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.so-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.so-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.so-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.so-modal-activity-detail-content--external .so-modal-task-chat-avatar {
  background-color: #F5B041;
}

.so-modal-activity-detail-content--external .so-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.so-modal-activity-detail-content--external .so-modal-task-chat-reply-btn {
  color: #E67E22;
}

.so-modal-activity-detail-content--external .so-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.so-modal-dropdown--display .so-modal-dropdown-item,
.so-modal-dropdown--display [class*="-item"],
.so-modal-tags-dropdown--display .so-modal-tags-dropdown-item,
.so-modal-baseline-date-dropdown--display .so-modal-baseline-date-item,
.so-modal-reference-type-dropdown--display .so-modal-reference-type-item,
.so-modal-delivery-priority-dropdown--display .so-modal-delivery-priority-item,
.so-modal-organization-dropdown--display .so-modal-organization-item,
.so-modal-sales-structure-dropdown--display .so-modal-sales-structure-item,
.so-modal-delivery-type-dropdown--display .so-modal-delivery-type-item,
.so-modal-sales-channel-dropdown--display .so-modal-sales-channel-item,
.so-modal-sales-unit-dropdown--display .so-modal-sales-unit-item,
.so-modal-sold-to-party-dropdown--display .so-modal-sold-to-party-item,
.so-modal-deliver-to-party-dropdown--display .so-modal-deliver-to-party-item,
.so-modal-attention-to-deliver-dropdown--display .so-modal-attention-to-deliver-item,
.so-modal-incoterm-dropdown--display .so-modal-incoterm-item,
.so-modal-delivery-point-dropdown--display .so-modal-delivery-point-item,
.so-modal-shipping-point-dropdown--display .so-modal-shipping-point-item,
.so-modal-sales-order-dropdown--display .so-modal-sales-order-item,
.so-modal-sales-person-dropdown--display .so-modal-sales-person-item,
.so-modal-sales-team-dropdown--display .so-modal-sales-team-item,
.so-modal-territory-dropdown--display .so-modal-territory-item,
.so-modal-sales-office-dropdown--display .so-modal-sales-office-item,
.so-modal-status-dropdown--display .so-modal-status-item,
.so-modal-handling-product-dropdown--display .so-modal-handling-product-item,
.so-modal-child-uom-dropdown--display .so-modal-child-uom-item,
.so-modal-partner-type-dropdown--display .so-modal-partner-type-item,
.so-modal-partner-id-dropdown--display .so-modal-partner-id-item,
.so-modal-custom-dropdown--display .so-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.so-modal-dropdown--display .so-modal-dropdown-item:hover,
.so-modal-dropdown--display [class*="-item"]:hover,
.so-modal-tags-dropdown--display .so-modal-tags-dropdown-item:hover,
.so-modal-baseline-date-dropdown--display .so-modal-baseline-date-item:hover,
.so-modal-reference-type-dropdown--display .so-modal-reference-type-item:hover,
.so-modal-delivery-priority-dropdown--display .so-modal-delivery-priority-item:hover,
.so-modal-organization-dropdown--display .so-modal-organization-item:hover,
.so-modal-sales-structure-dropdown--display .so-modal-sales-structure-item:hover,
.so-modal-delivery-type-dropdown--display .so-modal-delivery-type-item:hover,
.so-modal-sales-channel-dropdown--display .so-modal-sales-channel-item:hover,
.so-modal-sales-unit-dropdown--display .so-modal-sales-unit-item:hover,
.so-modal-sold-to-party-dropdown--display .so-modal-sold-to-party-item:hover,
.so-modal-deliver-to-party-dropdown--display .so-modal-deliver-to-party-item:hover,
.so-modal-attention-to-deliver-dropdown--display .so-modal-attention-to-deliver-item:hover,
.so-modal-incoterm-dropdown--display .so-modal-incoterm-item:hover,
.so-modal-delivery-point-dropdown--display .so-modal-delivery-point-item:hover,
.so-modal-shipping-point-dropdown--display .so-modal-shipping-point-item:hover,
.so-modal-sales-order-dropdown--display .so-modal-sales-order-item:hover,
.so-modal-sales-person-dropdown--display .so-modal-sales-person-item:hover,
.so-modal-sales-team-dropdown--display .so-modal-sales-team-item:hover,
.so-modal-territory-dropdown--display .so-modal-territory-item:hover,
.so-modal-sales-office-dropdown--display .so-modal-sales-office-item:hover,
.so-modal-status-dropdown--display .so-modal-status-item:hover,
.so-modal-handling-product-dropdown--display .so-modal-handling-product-item:hover,
.so-modal-child-uom-dropdown--display .so-modal-child-uom-item:hover,
.so-modal-partner-type-dropdown--display .so-modal-partner-type-item:hover,
.so-modal-partner-id-dropdown--display .so-modal-partner-id-item:hover,
.so-modal-custom-dropdown--display .so-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.so-modal-dropdown--display [class*="-item--selected"],
.so-modal-tags-dropdown--display .so-modal-tags-dropdown-item--selected,
.so-modal-baseline-date-dropdown--display .so-modal-baseline-date-item--selected,
.so-modal-reference-type-dropdown--display .so-modal-reference-type-item--selected,
.so-modal-delivery-priority-dropdown--display .so-modal-delivery-priority-item--selected,
.so-modal-organization-dropdown--display .so-modal-organization-item--selected,
.so-modal-sales-structure-dropdown--display .so-modal-sales-structure-item--selected,
.so-modal-delivery-type-dropdown--display .so-modal-delivery-type-item--selected,
.so-modal-sales-channel-dropdown--display .so-modal-sales-channel-item--selected,
.so-modal-sales-unit-dropdown--display .so-modal-sales-unit-item--selected,
.so-modal-sold-to-party-dropdown--display .so-modal-sold-to-party-item--selected,
.so-modal-deliver-to-party-dropdown--display .so-modal-deliver-to-party-item--selected,
.so-modal-attention-to-deliver-dropdown--display .so-modal-attention-to-deliver-item--selected,
.so-modal-incoterm-dropdown--display .so-modal-incoterm-item--selected,
.so-modal-delivery-point-dropdown--display .so-modal-delivery-point-item--selected,
.so-modal-shipping-point-dropdown--display .so-modal-shipping-point-item--selected,
.so-modal-sales-order-dropdown--display .so-modal-sales-order-item--selected,
.so-modal-sales-person-dropdown--display .so-modal-sales-person-item--selected,
.so-modal-sales-team-dropdown--display .so-modal-sales-team-item--selected,
.so-modal-territory-dropdown--display .so-modal-territory-item--selected,
.so-modal-sales-office-dropdown--display .so-modal-sales-office-item--selected,
.so-modal-status-dropdown--display .so-modal-status-item--selected,
.so-modal-handling-product-dropdown--display .so-modal-handling-product-item--selected,
.so-modal-child-uom-dropdown--display .so-modal-child-uom-item--selected,
.so-modal-partner-type-dropdown--display .so-modal-partner-type-item--selected,
.so-modal-partner-id-dropdown--display .so-modal-partner-id-item--selected,
.so-modal-custom-dropdown--display .so-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.so-modal-dropdown--display [class*="-check"],
.so-modal-dropdown--display .so-modal-dropdown-check,
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.so-modal-dropdown--display [class*="-item-code"],
.so-modal-dropdown--display [class*="-item-name"],
.so-modal-dropdown--display [class*="-item-content"],
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-code,
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-name,
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-item,
.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.so-modal-sold-to-party-dropdown-content--display .so-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.so-modal-tags-dropdown--display .so-modal-tags-item,
.so-modal-tags-dropdown--display .so-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-tags-dropdown--display .so-modal-tags-item:hover {
  background-color: transparent !important;
}

.so-modal-tags-dropdown--display .so-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.so-modal-tags-dropdown--display .so-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item,
.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.so-modal-custom-dropdown-list--display .so-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */
.so-setting-output-menu--display .so-setting-output-option,
.so-setting-output-menu--display .so-setting-output-option--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.so-setting-output-menu--display .so-setting-output-option:hover {
  background-color: transparent !important;
}

.so-setting-output-menu--display .so-setting-output-option--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.so-setting-output-menu--display .so-setting-output-check {
  color: #999999 !important;
}

/* Large Add Item Modal — shared between SO and DO */
.do-modal-add-item-modal--large.do-modal-add-do-item-modal {
  min-width: min(69.375rem, calc(100vw - 2.5rem)) !important;
  max-width: min(69.375rem, calc(100vw - 2.5rem)) !important;
  max-height: calc(100vh - 2.5rem) !important;
}

.do-modal-add-item-modal--large .do-modal-item-text-content {
  min-height: min(37.5rem, calc(100vh - 12.5rem));
  max-height: min(37.5rem, calc(100vh - 12.5rem)) !important;
}

/* Remove the gap between the checkbox column and the next column for every table
   inside the SO/DO reference list modals. */
.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th:first-child,
.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td:first-child {
  padding-right: 0 !important;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th:nth-child(2),
.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td:nth-child(2) {
  padding-left: 0 !important;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-dropdown-section {
  max-width: 33%;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table thead th {
  font-size: 0.75rem;
  padding: 0.625rem 0.75rem;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table tbody td {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-input {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.do-modal-add-item-modal--large .modal-header .modal-title,
.do-modal-add-item-modal--large .modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table-container {
  overflow-x: auto;
  scrollbar-width: none;
}

.do-modal-add-item-modal--large .do-modal-add-do-item-table-container::-webkit-scrollbar:horizontal {
  display: none;
}

/* ===== from pages/Sales/SalesVisit/SalesVisit.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.sales-visit-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.sales-visit-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.sales-visit-header {
  margin-bottom: 0;
}

.sales-visit-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.sales-visit-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.sales-visit-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.sales-visit-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sales-visit-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sales-visit-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.sales-visit-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.sales-visit-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.sales-visit-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.sales-visit-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.sales-visit-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.sales-visit-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.sales-visit-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.sales-visit-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sales-visit-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.sales-visit-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.sales-visit-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.sales-visit-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.sales-visit-layout-dropdown-item:last-child {
  border-bottom: none;
}

.sales-visit-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-visit-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.sales-visit-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.sales-visit-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.sales-visit-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.sales-visit-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.sales-visit-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.sales-visit-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sales-visit-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-visit-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.sales-visit-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sales-visit-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.sales-visit-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.sales-visit-filter-parameter-wrapper {
  position: relative;
}

.sales-visit-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.sales-visit-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-visit-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.sales-visit-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sales-visit-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.sales-visit-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.sales-visit-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.sales-visit-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.sales-visit-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sales-visit-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.sales-visit-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.sales-visit-filter-close:hover {
  background-color: #f0f0f0;
}

.sales-visit-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.sales-visit-filter-group {
  margin-bottom: 1rem;
}

.sales-visit-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.sales-visit-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sales-visit-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.sales-visit-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.sales-visit-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.sales-visit-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.sales-visit-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.sales-visit-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sales-visit-filter-org-container {
  flex: 1 1;
  position: relative;
}

.sales-visit-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.sales-visit-filter-org-input:hover {
  border-color: #C2DE54;
}

.sales-visit-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.sales-visit-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.sales-visit-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sales-visit-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.sales-visit-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.sales-visit-filter-tag-remove:hover {
  color: #000;
}

.sales-visit-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.sales-visit-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.sales-visit-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sales-visit-filter-org-item:hover {
  background-color: #f5f5f5;
}

.sales-visit-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.sales-visit-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.sales-visit-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.sales-visit-filter-org-code {
  font-weight: 600;
  color: #333;
}

.sales-visit-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.sales-visit-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.sales-visit-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.sales-visit-type-dropdown-item:last-child {
  border-bottom: none;
}

.sales-visit-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.sales-visit-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.sales-visit-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.sales-visit-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.sales-visit-table {
  animation: salesVisitFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes salesVisitFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sales-visit-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .sales-visit-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .sales-visit-type-dropdown {
    min-width: 11.25rem;
  }

  .sales-visit-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/SalesVisit/SalesVisitModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-visit-modal {
  overscroll-behavior: contain;
}

.sales-visit-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.sv-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.sv-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.sv-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.sv-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.sv-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.sv-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.sv-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.sv-modal-pov-button--external.sv-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.sv-modal-pov-button--external .sv-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-pov-button--external .sv-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.sv-modal-pov-caret--open {
  transform: rotate(180deg);
}

.sv-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.sv-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.sv-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.sv-modal-pov-dropdown-item span {
  flex: 1 1;
}

.sv-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.sv-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.sv-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.sv-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.sv-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.sv-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sv-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sv-modal-tabs--display .sv-modal-tab {
  color: #666666;
}

.sv-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.sv-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.sv-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.sv-modal-tabs--display .sv-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.sv-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.sv-modal-tabs--external .sv-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sv-modal-tabs--external.sv-modal-tabs--display .sv-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sv-modal-tabs--external .sv-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.sv-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.sv-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.sv-modal-action-button span {
  white-space: nowrap;
}

.sv-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.sv-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.sv-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sv-modal-action-button--disabled .sv-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.sv-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.sv-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.sv-modal-left-area--full .sv-modal-back-button {
  transition: width 300ms ease;
}

.sv-modal-left-area--full .sv-modal-back-button:hover {
  width: 3.5rem;
}

.sv-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.sv-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.sv-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sv-modal-content--item {
  padding-bottom: 1rem;
}

.sv-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.sv-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.sv-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.sv-modal-attachment-table-container .sv-modal-detail-table thead,
.sv-modal-attachment-table-container .sv-modal-attachment-table thead {
  box-shadow: none !important;
}

.sv-modal-attachment-table-container .sv-modal-detail-table tr,
.sv-modal-attachment-table-container .sv-modal-attachment-table tr {
  box-shadow: none !important;
}

.sv-modal-attachment-table-container .sv-modal-detail-table tbody tr:last-child,
.sv-modal-attachment-table-container .sv-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.sv-modal-attachment-table-container .sv-modal-detail-table tbody tr:last-child td,
.sv-modal-attachment-table-container .sv-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.sv-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.sv-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.sv-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.sv-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.sv-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.sv-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.sv-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.sv-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.sv-modal-attachment-filename--external {
  color: #E67E22;
}

.sv-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.sv-modal-tab-content--display .sv-modal-attachment-filename--external {
  color: #E67E22;
}

.sv-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.sv-modal-attachment-size {
  color: #666666;
}

.sv-modal-attachment-date {
  color: #666666;
}

.sv-modal-attachment-uploadedby {
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.sv-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.sv-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sv-modal-attachment-browse-btn:focus {
  outline: none;
}

.sv-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.sv-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.sv-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-attachment-browse-btn--disabled .sv-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.sv-modal-tab-content--display .sv-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.sv-modal-tab-content--display .sv-modal-attachment-filename.sv-modal-attachment-filename--external {
  color: #E67E22;
}

.sv-modal-tab-content--display .sv-modal-attachment-type {
  color: #666666;
}

.sv-modal-tab-content--display .sv-modal-attachment-size {
  color: #666666;
}

.sv-modal-tab-content--display .sv-modal-attachment-date {
  color: #666666;
}

.sv-modal-tab-content--display .sv-modal-attachment-uploadedby {
  color: #333333;
}

.sv-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.sv-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.sv-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.sv-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.sv-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.sv-modal-tab-content--display .sv-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.sv-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.sv-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.sv-modal-tab-content--display .sv-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.sv-modal-basic-section--external .sv-modal-form-input:focus {
  border-color: #F5B041;
}

.sv-modal-basic-section--external .sv-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.sv-modal-tab-content--external .sv-modal-form-input:focus,
.sv-modal-tab-content--external .sv-modal-form-textarea:focus,
.sv-modal-tab-content--external .sv-modal-custom-dropdown-input:focus,
.sv-modal-tab-content--external .sv-modal-date-input:focus,
.sv-modal-tab-content--external .sv-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.sv-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.sv-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.sv-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.sv-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.sv-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sv-modal-tab-content--display .sv-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.sv-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.sv-modal-tab-content--display .sv-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.sv-modal-partner-header-section--external .sv-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.sv-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sv-modal-tab-content--display .sv-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.sv-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.sv-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.sv-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.sv-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sv-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.sv-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.sv-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.sv-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.sv-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.sv-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.sv-modal-chat-section {
  padding: 1.5rem 0;
}

.sv-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sv-modal-chat-header h3 {
  margin: 0;
}

.sv-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.sv-modal-chat-new-thread .sv-modal-form-textarea {
  min-height: 5rem;
}

.sv-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.sv-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sv-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sv-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.sv-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sv-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.sv-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.sv-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.sv-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.sv-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.sv-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.sv-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.sv-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.sv-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.sv-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-chat-user-name {
  color: #333333 !important;
}

.sv-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.sv-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.sv-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.sv-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.sv-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.sv-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.sv-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.sv-modal-chat-reply-btn:hover .sv-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.sv-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.sv-modal-chat-replies .sv-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.sv-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.sv-modal-chat-reply-input .sv-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.sv-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.sv-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.sv-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.sv-modal-tab-content--display .sv-modal-chat-thread {
  border-color: #E5E5E5;
}

.sv-modal-tab-content--display .sv-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display .sv-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-chat-user-position {
  background-color: #E8F5E9;
}

.sv-modal-tab-content--display .sv-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.sv-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.sv-modal-tab-content--display .sv-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.sv-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.sv-modal-notes-header-section--external .sv-modal-form-textarea:focus {
  border-color: #F5B041;
}

.sv-modal-chat-section--external .sv-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.sv-modal-chat-avatar--external {
  background-color: #F5B041;
}

.sv-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.sv-modal-tab-content--display .sv-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-thread {
  border-color: #E5E5E5;
}

.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-user-name {
  color: #333333 !important;
}

.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-user-position {
  background-color: #FDE8D0;
}

.sv-modal-tab-content--display.sv-modal-tab-content--external .sv-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.sv-modal-chat-reply-btn--external {
  color: #E67E22;
}

.sv-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.sv-modal-chat-reply-btn--external .sv-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sv-modal-chat-reply-btn--external:hover .sv-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.sv-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.sv-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.sv-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.sv-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.sv-modal-chat-textarea-wrapper {
  position: relative;
}

.sv-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.sv-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sv-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.sv-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.sv-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.sv-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sv-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sv-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.sv-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.sv-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.sv-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.sv-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.sv-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.sv-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.sv-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.sv-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.sv-modal-tab-content--display .sv-modal-table-empty-state-title {
  color: #666666;
}

.sv-modal-tab-content--display .sv-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.sv-modal-partner-header-section + .sv-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.sv-modal-partner-header-section + .sv-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.sv-modal-partner-header-section + .sv-modal-item-content-section .sv-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.sv-modal-partner-header-section + .sv-modal-item-content-section .sv-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.sv-modal-partner-header-section + .sv-modal-item-content-section .sv-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.sv-modal-partner-header-section + .sv-modal-item-content-section .sv-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.sv-modal-partner-header-section + .sv-modal-item-content-section .sv-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.sv-modal-partner-table-container .sv-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.sv-modal-partner-table-container .sv-modal-partner-table th:last-child,
.sv-modal-partner-table-container .sv-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.sv-modal-detail-table-container--external.sv-modal-partner-table-container .sv-modal-partner-table th:last-child,
.sv-modal-detail-table-container--external.sv-modal-partner-table-container .sv-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.sv-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sv-modal-item-header-section .sv-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-tab-content--display .sv-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.sv-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.sv-modal-tab-content--display .sv-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.sv-modal-item-header-section--external .sv-modal-form-input:focus {
  border-color: #F5B041;
}

.sv-modal-item-header-section--external .sv-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.sv-modal-detail-subtabs--external .sv-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.sv-modal-detail-subtabs--external .sv-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.sv-modal-detail-subtabs--external .sv-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.sv-modal-tab-content--display .sv-modal-detail-subtabs--external .sv-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sv-modal-tab-content--display .sv-modal-detail-subtabs--external .sv-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.sv-modal-tab-content.sv-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.sv-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.sv-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.sv-modal-item-table-wrapper .sv-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.sv-modal-item-table-wrapper .sv-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.sv-modal-item-table-wrapper--terms .sv-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.sv-modal-tab-content--external.sv-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.sv-modal-tab-content--external .sv-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-tab-content--external .sv-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-tab-content--external .sv-modal-item-table-wrapper--terms .sv-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.sv-modal-tab-content--external .sv-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.sv-modal-item-table-wrapper--terms .sv-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.sv-modal-item-table-wrapper--terms .sv-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-modal-item-table-wrapper--terms .sv-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.sv-modal-item-table-wrapper--terms .sv-modal-detail-table tr {
  height: auto;
}

.sv-modal-item-table-wrapper--terms .sv-modal-detail-table-container .sv-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.sv-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.sv-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.sv-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.sv-modal-volume-input-group .sv-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.sv-modal-volume-input-group .sv-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.sv-modal-volume-input-group .sv-modal-sla-input-wrapper .sv-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.sv-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.sv-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.sv-modal-volume-uom-list--display .sv-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-volume-uom-list--display .sv-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.sv-modal-volume-uom-list--display .sv-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-volume-uom-list--display .sv-modal-volume-uom-check {
  color: #999999 !important;
}

.sv-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.sv-modal-volume-uom-dropdown--display .sv-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sv-modal-volume-uom-dropdown--display .sv-modal-volume-uom-item:hover {
  background-color: transparent;
}

.sv-modal-volume-uom-dropdown--display .sv-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.sv-modal-volume-uom-dropdown--display .sv-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.sv-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.sv-modal-weight-input-group .sv-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.sv-modal-weight-input-group .sv-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.sv-modal-weight-input-group .sv-modal-sla-input-wrapper .sv-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.sv-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.sv-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-weight-uom-input::placeholder {
  color: #999999;
}

.sv-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.sv-modal-weight-uom-dropdown--display .sv-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sv-modal-weight-uom-dropdown--display .sv-modal-weight-uom-item:hover {
  background-color: transparent;
}

.sv-modal-weight-uom-dropdown--display .sv-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.sv-modal-weight-uom-dropdown--display .sv-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.sv-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.sv-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.sv-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.sv-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.sv-modal-form-input--display ~ .sv-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.sv-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.sv-modal-form-input--display {
  cursor: default;
}

.sv-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.sv-modal-form-label--display {
  color: #333333 !important;
}

.sv-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.sv-modal-form-label--display .sv-modal-required {
  color: #FF4D4F;
}

.sv-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.sv-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.sv-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.sv-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.sv-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.sv-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.sv-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sv-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.sv-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.sv-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.sv-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.sv-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.sv-modal-sla-spinner-btn:disabled .sv-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sv-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sla-spinner-btn:hover .sv-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.sv-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.sv-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.sv-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.sv-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.sv-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.sv-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.sv-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.sv-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.sv-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.sv-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.sv-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.sv-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.sv-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.sv-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.sv-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.sv-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.sv-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.sv-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.sv-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.sv-modal-stage-dropdown-input--display .sv-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.sv-modal-stage-dropdown-input--display .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.sv-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.sv-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.sv-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.sv-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.sv-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sv-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.sv-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.sv-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.sv-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.sv-modal-accordion-header--display {
  color: #333333;
}

.sv-modal-accordion-header--display.sv-modal-accordion-header--active {
  color: #333333;
}

.sv-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.sv-modal-accordion-header--display .sv-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.sv-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.sv-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.sv-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.sv-modal-stage-main-title--display {
  color: #138B4C;
}

.sv-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-stage-title--display {
  color: #333333;
}

.sv-modal-stage-current {
  margin-bottom: 1.875rem;
}

.sv-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.sv-modal-stage-label--display {
  color: #666666;
}

.sv-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-stage-subtitle--display {
  color: #333333;
}

.sv-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.sv-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.sv-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.sv-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.sv-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.sv-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sv-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.sv-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.sv-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sv-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.sv-modal-download-button:active {
  background-color: #E0E0E0;
}

.sv-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-download-button--display .sv-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.sv-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.sv-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.sv-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.sv-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.sv-modal-timeline-item--display .sv-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.sv-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.sv-modal-timeline-badge--inactive .sv-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.sv-modal-timeline-item--display .sv-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.sv-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.sv-modal-timeline-item--display .sv-modal-timeline-line {
  background-color: #138B4C;
}

.sv-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sv-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.sv-modal-timeline-status--display {
  color: #333333;
}

.sv-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.sv-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.sv-modal-timeline-date--display {
  color: #666666;
}

.sv-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.sv-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.sv-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.sv-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sv-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.sv-modal-timeline-document--display {
  color: #138B4C;
}

.sv-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.sv-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.sv-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.sv-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.sv-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.sv-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.sv-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.sv-modal-activity-item--display .sv-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.sv-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.sv-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.sv-modal-activity-item--display .sv-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.sv-modal-activity-item--display .sv-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.sv-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.sv-modal-activity-item--display .sv-modal-activity-line {
  background-color: #138B4C;
}

.sv-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.sv-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.sv-modal-activity-type--display {
  color: #333333;
}

.sv-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.sv-modal-activity-header--display {
  color: #666666;
}

.sv-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.sv-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.sv-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.sv-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.sv-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.sv-modal-activity-change--display .sv-modal-activity-field {
  color: #333333;
}

.sv-modal-activity-change--display .sv-modal-activity-new {
  color: #138B4C;
}

.sv-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.sv-modal-activity-date--display {
  color: #666666;
}

.sv-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.sv-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.sv-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sv-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.sv-modal-activity-more--display {
  color: #138B4C;
}

.sv-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-activity-more--display .sv-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.sv-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.sv-modal-reference-table thead {
  background-color: #F9F9F9;
}

.sv-modal-tab-content--display .sv-modal-reference-table thead {
  background-color: #FAFAFA;
}

.sv-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.sv-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.sv-modal-tab-content--display .sv-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.sv-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.sv-modal-tab-content--display .sv-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.sv-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.sv-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.sv-modal-detail-subtab:hover {
  color: #138B4C;
}

.sv-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.sv-modal-tab-content--display .sv-modal-detail-subtab {
  color: #666666;
}

.sv-modal-tab-content--display .sv-modal-detail-subtab:hover {
  color: #138B4C;
}

.sv-modal-tab-content--display .sv-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.sv-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.sv-modal-tab-content.sv-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.sv-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-detail-delivery-wrapper .sv-modal-form-label {
  flex-shrink: 0;
}

.sv-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.sv-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.sv-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.sv-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sv-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sv-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sv-modal-detail-table-container .sv-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sv-modal-detail-table-container .sv-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-modal-detail-table-container .sv-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.sv-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.sv-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.sv-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.sv-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.sv-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.sv-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.sv-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-detail-table th,
.sv-modal-tab-content--display .sv-modal-packaging-table th,
.sv-modal-tab-content--display .sv-modal-partner-table th,
.sv-modal-tab-content--display .sv-modal-attachment-table th {
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-detail-table td,
.sv-modal-tab-content--display .sv-modal-packaging-table td,
.sv-modal-tab-content--display .sv-modal-partner-table td,
.sv-modal-tab-content--display .sv-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-description,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-text,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-batch,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-serial,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-so-item,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-package-no,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-product-type,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-product-group,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-product-category,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sv-modal-tab-content--display .sv-modal-detail-table tbody tr:hover .sv-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-description,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-text,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-batch,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-serial,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-so-item,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-package-no,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-type,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-group,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-category,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .sv-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.sv-modal-detail-table-container .sv-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.sv-modal-detail-table-container .sv-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.sv-modal-detail-table-container--external .sv-modal-detail-table td {
  color: #555555 !important;
}

.sv-modal-detail-table-container .sv-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.sv-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.sv-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.sv-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.sv-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.sv-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.sv-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.sv-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.sv-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.sv-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sv-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sv-modal-detail-table tbody tr:hover .detail-table-description,
.sv-modal-detail-table tbody tr:hover .detail-table-text,
.sv-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sv-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sv-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sv-modal-detail-table tbody tr:hover .detail-table-batch,
.sv-modal-detail-table tbody tr:hover .detail-table-serial,
.sv-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sv-modal-detail-table tbody tr:hover .detail-table-so-item,
.sv-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sv-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sv-modal-detail-table tbody tr:hover .detail-table-package-no,
.sv-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sv-modal-detail-table tbody tr:hover .detail-table-product-type,
.sv-modal-detail-table tbody tr:hover .detail-table-product-group,
.sv-modal-detail-table tbody tr:hover .detail-table-product-category,
.sv-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sv-modal-detail-table tbody tr:hover .sv-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-description,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-text,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-batch,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-serial,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-so-item,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-package-no,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-type,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-group,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-category,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .sv-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.sv-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.sv-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.sv-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.sv-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.sv-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.sv-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sv-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.sv-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.sv-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.sv-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.sv-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.sv-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.sv-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.sv-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.sv-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.sv-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.sv-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.sv-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.sv-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.sv-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.sv-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.sv-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sv-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.sv-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sv-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.sv-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.sv-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sv-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.sv-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.sv-modal-add-item-btn--disabled .sv-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.sv-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.sv-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.sv-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.sv-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sv-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sv-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.sv-modal-sales-order-table-container .sv-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.sv-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.sv-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sv-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.sv-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.sv-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.sv-modal-table-input:focus {
  outline: none;
}

.sv-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.sv-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.sv-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.sv-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.sv-modal-tags-container {
  position: relative;
  width: 100%;
}

.sv-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sv-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sv-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.sv-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.sv-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sv-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.sv-modal-tags-input--display .sv-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.sv-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.sv-modal-tag-remove:hover {
  color: #333333;
}

.sv-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.sv-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sv-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.sv-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.sv-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.sv-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.sv-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.sv-modal-status-container {
  position: relative;
  width: 100%;
}

.sv-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sv-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sv-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.sv-modal-status-placeholder {
  color: #999999;
}

.sv-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.sv-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sv-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sv-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-status-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-status-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.sv-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.sv-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.sv-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.sv-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.sv-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.sv-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.sv-modal-status-input--display .sv-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.sv-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.sv-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sv-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sv-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.sv-modal-stage-dropdown-placeholder {
  color: #999999;
}

.sv-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.sv-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sv-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sv-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.sv-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.sv-modal-stage--created .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.sv-modal-stage--approved .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.sv-modal-stage--processed .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.sv-modal-stage--picked .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.sv-modal-stage--packed .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.sv-modal-stage--planned .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.sv-modal-stage--loaded .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.sv-modal-stage--issued .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.sv-modal-stage--departed .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.sv-modal-stage--arrived .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.sv-modal-stage--unloaded .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.sv-modal-stage--delivered .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.sv-modal-stage--confirmed .sv-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.sv-modal-stage--billed .sv-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.sv-modal-stage-dropdown-input .sv-modal-stage,
.sv-modal-stage-dropdown-item .sv-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.sv-modal-baseline-date-dropdown {
  position: relative;
}

.sv-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sv-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.sv-modal-reference-type-dropdown {
  position: relative;
}

.sv-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sv-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.sv-modal-delivery-priority-dropdown {
  position: relative;
}

.sv-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sv-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.sv-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.sv-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.sv-modal-delivery-priority-separator {
  color: #666666;
}

.sv-modal-delivery-priority-name {
  color: #333333;
}

.sv-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.sv-modal-organization-dropdown {
  position: relative;
}

.sv-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.sv-modal-organization-dropdown-content--display .sv-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-organization-dropdown-content--display .sv-modal-organization-item:hover {
  background-color: transparent !important;
}

.sv-modal-organization-dropdown-content--display .sv-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-organization-dropdown-content--display .sv-modal-organization-code,
.sv-modal-organization-dropdown-content--display .sv-modal-organization-name,
.sv-modal-organization-dropdown-content--display .sv-modal-organization-separator {
  color: #999999 !important;
}

.sv-modal-organization-dropdown-content--display .sv-modal-organization-check {
  color: #999999 !important;
}

.sv-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-organization-separator {
  color: #999999;
}

.sv-modal-organization-name {
  color: #333333;
}

.sv-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.sv-modal-sales-structure-dropdown {
  position: relative;
}

.sv-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.sv-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.sv-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-sales-structure-separator {
  color: #999999;
}

.sv-modal-sales-structure-name {
  color: #333333;
}

.sv-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.sv-modal-delivery-type-dropdown {
  position: relative;
}

.sv-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.sv-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sv-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sv-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sv-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.sv-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.sv-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.sv-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-delivery-type-separator {
  color: #999999;
}

.sv-modal-delivery-type-description {
  color: #333333;
}

.sv-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.sv-modal-content::-webkit-scrollbar,
.sv-modal-stage-content::-webkit-scrollbar,


.sv-modal-content::-webkit-scrollbar-track,
.sv-modal-stage-content::-webkit-scrollbar-track,


.sv-modal-content::-webkit-scrollbar-thumb,
.sv-modal-stage-content::-webkit-scrollbar-thumb,


.sv-modal-content::-webkit-scrollbar-thumb:hover,
.sv-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.sv-modal-sales-channel-dropdown {
  position: relative;
}

.sv-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sv-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-sales-channel-separator {
  color: #999999;
}

.sv-modal-sales-channel-name {
  color: #333333;
}

.sv-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.sv-modal-sales-unit-dropdown {
  position: relative;
}

.sv-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sv-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-sales-unit-separator {
  color: #999999;
}

.sv-modal-sales-unit-name {
  color: #333333;
}

.sv-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.sv-modal-organization-item--placeholder,
.sv-modal-sales-structure-item--placeholder,
.sv-modal-sales-channel-item--placeholder,
.sv-modal-sales-unit-item--placeholder,
.sv-modal-territory-item--placeholder,
.sv-modal-sales-office-item--placeholder,
.sv-modal-sold-to-party-item--placeholder,
.sv-modal-deliver-to-party-item--placeholder,
.sv-modal-attention-to-deliver-item--placeholder,
.sv-modal-incoterm-item--placeholder,
.sv-modal-delivery-point-item--placeholder,
.sv-modal-shipping-point-item--placeholder,
.sv-modal-sales-order-item--placeholder,
.sv-modal-sales-team-item--placeholder,
.sv-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.sv-modal-organization-item--placeholder:hover,
.sv-modal-sales-structure-item--placeholder:hover,
.sv-modal-sales-channel-item--placeholder:hover,
.sv-modal-sales-unit-item--placeholder:hover,
.sv-modal-territory-item--placeholder:hover,
.sv-modal-sales-office-item--placeholder:hover,
.sv-modal-sold-to-party-item--placeholder:hover,
.sv-modal-deliver-to-party-item--placeholder:hover,
.sv-modal-attention-to-deliver-item--placeholder:hover,
.sv-modal-incoterm-item--placeholder:hover,
.sv-modal-delivery-point-item--placeholder:hover,
.sv-modal-shipping-point-item--placeholder:hover,
.sv-modal-sales-order-item--placeholder:hover,
.sv-modal-sales-team-item--placeholder:hover,
.sv-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.sv-modal-sold-to-party-dropdown {
  position: relative;
}

.sv-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-sold-to-party-input:focus,
.sv-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.sv-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.sv-modal-sold-to-party-separator {
  color: #999999;
}

.sv-modal-sold-to-party-name {
  color: #333333;
}

.sv-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.sv-modal-deliver-to-party-dropdown {
  position: relative;
}

.sv-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sv-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.sv-modal-deliver-to-party-separator {
  color: #999999;
}

.sv-modal-deliver-to-party-name {
  color: #333333;
}

.sv-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.sv-modal-attention-to-deliver-dropdown {
  position: relative;
}
.sv-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.sv-modal-attention-to-deliver-separator {
  color: #999999;
}
.sv-modal-attention-to-deliver-name {
  color: #333333;
}
.sv-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.sv-modal-incoterm-dropdown {
  position: relative;
}
.sv-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.sv-modal-incoterm-separator {
  color: #999999;
}
.sv-modal-incoterm-name {
  color: #333333;
}
.sv-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.sv-modal-delivery-point-dropdown {
  position: relative;
}
.sv-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sv-modal-delivery-point-separator {
  color: #999999;
}
.sv-modal-delivery-point-name {
  color: #333333;
}
.sv-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.sv-modal-shipping-point-dropdown {
  position: relative;
}
.sv-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sv-modal-shipping-point-separator {
  color: #999999;
}
.sv-modal-shipping-point-name {
  color: #333333;
}
.sv-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.sv-modal-sales-order-dropdown {
  position: relative;
}
.sv-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.sv-modal-sales-order-separator {
  color: #999999;
}
.sv-modal-sales-order-name {
  color: #333333;
}
.sv-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.sv-modal-date-picker {
  position: relative;
}
.sv-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.sv-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.sv-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.sv-modal-date-input::-webkit-datetime-edit-text,
.sv-modal-date-input::-webkit-datetime-edit-month-field,
.sv-modal-date-input::-webkit-datetime-edit-day-field,
.sv-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.sv-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.sv-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.sv-modal-sales-person-dropdown {
  position: relative;
}
.sv-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.sv-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.sv-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.sv-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sv-modal-sales-person-separator {
  color: #999999;
}
.sv-modal-sales-person-name {
  color: #333333;
}
.sv-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.sv-modal-sales-team-dropdown {
  position: relative;
}
.sv-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sv-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sv-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sv-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sv-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sv-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sv-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sv-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.sv-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.sv-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.sv-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.sv-modal-sales-team-separator {
  color: #999999;
}
.sv-modal-sales-team-name {
  color: #333333;
}
.sv-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sv-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.sv-modal-territory-dropdown {
  position: relative;
}

.sv-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sv-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-territory-separator {
  color: #999999;
}

.sv-modal-territory-name {
  color: #333333;
}

.sv-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.sv-modal-sales-office-dropdown {
  position: relative;
}

.sv-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sv-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sv-modal-sales-office-separator {
  color: #999999;
}

.sv-modal-sales-office-name {
  color: #333333;
}

.sv-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.sv-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sv-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.sv-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.sv-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.sv-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sv-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sv-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-table-dropdown-input:focus {
  outline: none;
}

.sv-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.sv-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.sv-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.sv-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.sv-modal-delivery-type-list::-webkit-scrollbar,
.sv-modal-stage-dropdown-list::-webkit-scrollbar,
.sv-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sv-modal-delivery-type-list::-webkit-scrollbar-track,
.sv-modal-stage-dropdown-list::-webkit-scrollbar-track,
.sv-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-delivery-type-list::-webkit-scrollbar-thumb,
.sv-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.sv-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sv-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.sv-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.sv-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.sv-modal-wrapper,
.sv-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-visit-modal,
.sv-modal-wrapper,
.sv-modal-wrapper *,
.sv-modal-content,
.sv-modal-data-flow-2-container,
.sv-modal-data-flow-container,
.sv-modal-calendar-container,
.sv-modal-calendar-milestones-list,
.sv-modal-calendar-view,
.sv-modal-calendar-yearly,
.sv-modal-calendar-monthly,
.sv-modal-calendar-weekly,
.sv-modal-calendar-weekly-body,
.sv-modal-calendar-daily,
.sv-modal-calendar-daily-timeline,
.sv-modal-calendar-grid,
.sv-modal-calendar-grid-body,
.sv-modal-detail-table-container,
.sv-modal-item-table-wrapper,
.sv-modal-attachment-table-container,
.sv-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.sv-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sv-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sv-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.sv-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.sv-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.sv-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.sv-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.sv-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.sv-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-tab-content--display .sv-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.sv-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-tab-content--display .sv-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.sv-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.sv-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.sv-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) {
  font-weight: 600;
}

.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) .sv-modal-packaging-input,
.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) .sv-modal-packaging-input--display,
.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) .sv-modal-handling-product-input,
.sv-modal-packaging-row--unassigned:not(.sv-modal-packaging-row--expanded) .sv-modal-handling-product-input--display {
  font-weight: 600;
}

.sv-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.sv-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row td.sv-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row td.sv-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row td.sv-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td.sv-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded td.sv-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row--expanded:hover td.sv-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display,
.sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display,
.sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.sv-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.sv-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-tab-content--display .sv-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.sv-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-tab-content--display .sv-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.sv-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.sv-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.sv-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.sv-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.sv-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.sv-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.sv-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.sv-modal-packaging-detail-table th:first-child,
.sv-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.sv-modal-packaging-detail-table th:nth-child(2),
.sv-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.sv-modal-packaging-detail-table th:nth-child(3),
.sv-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.sv-modal-packaging-detail-table td:nth-child(4),
.sv-modal-packaging-detail-table td:nth-child(6),
.sv-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.sv-modal-packaging-detail-table td:nth-child(5),
.sv-modal-packaging-detail-table td:nth-child(7),
.sv-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.sv-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.sv-modal-tab-content--display .sv-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display .sv-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.sv-modal-tab-content--display .sv-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.sv-modal-tab-content--display .sv-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.sv-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.sv-modal-packaging-table td:last-child,
.sv-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.sv-modal-packaging-table td:last-child .sv-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.sv-modal-detail-table-container--external .sv-modal-packaging-table th:last-child,
.sv-modal-detail-table-container--external .sv-modal-packaging-table td.sv-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.sv-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.sv-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sv-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sv-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.sv-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.sv-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.sv-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.sv-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.sv-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.sv-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.sv-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.sv-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.sv-modal-packaging-child-table tr {
  border: none !important;
}

.sv-modal-packaging-child-table thead,
.sv-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.sv-modal-packaging-child-table th:first-child,
.sv-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.sv-modal-packaging-child-table th:nth-child(2),
.sv-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.sv-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.sv-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.sv-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.sv-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.sv-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.sv-modal-packaging-child-table th:nth-child(3),
.sv-modal-packaging-child-table td:nth-child(3),
.sv-modal-packaging-child-table th:nth-child(4),
.sv-modal-packaging-child-table td:nth-child(4),
.sv-modal-packaging-child-table th:nth-child(5),
.sv-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.sv-modal-packaging-child-table th:nth-child(6),
.sv-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.sv-modal-packaging-child-table th:nth-child(7),
.sv-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.sv-modal-detail-table-container--external .sv-modal-packaging-child-table th:last-child,
.sv-modal-detail-table-container--external .sv-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.sv-modal-packaging-child-table td:last-child .sv-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.sv-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.sv-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sv-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.sv-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.sv-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row {
  transition: none !important;
}

.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display,
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display:focus,
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display,
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display:focus,
.sv-modal-tab-content--display .sv-modal-detail-table-container .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display:focus,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display:focus,
.sv-modal-tab-content--display .sv-modal-detail-table-container--external .sv-modal-packaging-table tbody tr.sv-modal-packaging-row:hover td .sv-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.sv-modal-detail-table-container--external .sv-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.sv-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sv-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.sv-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.sv-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.sv-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.sv-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.sv-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.sv-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.sv-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.sv-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.sv-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.sv-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.sv-modal-detail-table-container--external .sv-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.sv-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-item--display {
  color: #999999 !important;
}

.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-code,
.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-name,
.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-separator {
  color: #999999 !important;
}

.sv-modal-handling-product-dropdown-content--display .sv-modal-handling-product-check {
  color: #999999 !important;
}

.sv-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.sv-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.sv-modal-handling-product-dropdown-content--narrow .sv-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.sv-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.sv-modal-packaging-detail-table .sv-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.sv-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.sv-modal-detail-table-container--dropdown-open .sv-modal-detail-table {
  overflow: visible;
}

.sv-modal-detail-table-container--dropdown-open .sv-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.sv-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sv-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sv-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.sv-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.sv-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.sv-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.sv-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.sv-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.sv-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.sv-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sv-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.sv-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.sv-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.sv-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.sv-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.sv-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.sv-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.sv-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sv-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.sv-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.sv-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-item:hover {
  background-color: transparent;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-item--placeholder {
  display: none;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-code,
.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-name,
.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-separator {
  color: #555555;
}

.sv-modal-handling-product-dropdown-content--view-only .sv-modal-handling-product-check {
  color: #888888;
}

.sv-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.sv-modal-handling-product-separator {
  color: #999999;
}

.sv-modal-handling-product-name {
  color: #333333;
}

.sv-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sv-modal-handling-product-item--placeholder {
  cursor: default;
}

.sv-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.sv-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.sv-modal-detail-table td:has(.sv-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.sv-modal-detail-table td .sv-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.sv-modal-detail-table td .sv-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.sv-modal-detail-table td .sv-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.sv-modal-detail-table td .sv-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.sv-modal-detail-table td .sv-modal-handling-product-input--display,
.sv-modal-detail-table td .sv-modal-handling-product-input--display:focus,
.sv-modal-detail-table td .sv-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display,
.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display:focus,
.sv-modal-detail-table-container .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display:focus,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover td .sv-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.sv-modal-detail-table td .sv-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.sv-modal-detail-table td .sv-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.sv-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.sv-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.sv-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.sv-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-table-text-icon-btn--filled:not(.sv-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.sv-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.sv-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sv-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.sv-modal-table-text-icon-btn--display.sv-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.sv-modal-table-text-icon-btn--display.sv-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-table-text-icon-btn--display.sv-modal-table-text-icon-btn--external.sv-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.sv-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.sv-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.sv-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.sv-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.sv-modal-serial-assignment-btn {
  width: 10.625rem;
}

.sv-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.sv-modal-batch-assignment-btn--filled .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.sv-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.sv-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.sv-modal-batch-assignment-btn--display .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-batch-assignment-btn--display.sv-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.sv-modal-batch-assignment-btn--display.sv-modal-batch-assignment-btn--filled .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.sv-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.sv-modal-secured-qty-btn.sv-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.sv-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.sv-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.sv-modal-secured-qty-btn--grey .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.sv-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.sv-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.sv-modal-batch-assignment-btn--partial .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.sv-modal-batch-assignment-btn--display.sv-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.sv-modal-batch-assignment-btn--display.sv-modal-batch-assignment-btn--partial .sv-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.sv-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.sv-modal-secured-qty-modal .sv-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.sv-modal-secured-qty-modal .sv-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.sv-modal-secured-qty-modal.sv-modal-batch-assignment-modal--display .sv-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.sv-modal-secured-qty-modal .sv-modal-item-text-content {
  overflow-x: hidden;
}

.sv-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.sv-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.sv-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.sv-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.sv-modal-batch-assignment-modal--display .sv-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.sv-modal-batch-assignment-modal--display .sv-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.sv-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.sv-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.sv-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.sv-modal-secured-qty-lock-btn--open .sv-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.sv-modal-secured-qty-lock-btn--locked .sv-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.sv-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.sv-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.sv-modal-batch-assignment-modal .sv-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.sv-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.sv-modal-batch-assignment-modal .sv-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.sv-modal-batch-assignment-modal .sv-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.sv-modal-batch-assignment-modal.sv-modal-batch-assignment-modal--display .sv-modal-item-text-info {
  background-color: #F2F8EA;
}

.sv-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.sv-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.sv-modal-batch-assignment-info-group {
  flex: 1 1;
}

.sv-modal-batch-assignment-info-group .sv-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sv-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.sv-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sv-modal-batch-assignment-table-section .sv-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sv-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.sv-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sv-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sv-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.sv-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.sv-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.sv-modal-batch-assignment-table th,
.sv-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.sv-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.sv-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.sv-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.sv-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sv-modal-batch-assignment-table tbody td:has(.sv-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.sv-modal-batch-assignment-table tbody td:has(.sv-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.sv-modal-batch-assignment-table tbody td:nth-child(2),
.sv-modal-batch-assignment-table tbody td:nth-child(3),
.sv-modal-batch-assignment-table tbody td:nth-child(4),
.sv-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.sv-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.sv-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.sv-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sv-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.sv-modal-batch-assignment-modal--display .sv-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.sv-modal-batch-assignment-modal--display .sv-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.sv-modal-batch-assignment-modal--display .sv-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-batch-assignment-modal--display .sv-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.sv-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.sv-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.sv-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.sv-modal-batch-assignment-table .sv-modal-placeholder-text {
  color: #CCCCCC;
}

.sv-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.sv-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.sv-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.sv-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.sv-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.sv-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.sv-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.sv-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.sv-modal-batch-assignment-table th.batch-table-frozen-batch,
table.sv-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.sv-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.sv-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.sv-modal-batch-assignment-table td.batch-table-frozen-batch,
table.sv-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.sv-modal-batch-assignment-table th.batch-table-frozen-batch,
table.sv-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.sv-modal-batch-assignment-table th.batch-table-frozen-assign,
table.sv-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.sv-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.sv-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.sv-modal-item-text-info {
  margin-bottom: 1rem;
}

.sv-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.sv-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.sv-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.sv-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.sv-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.sv-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.sv-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.sv-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-item-text-modal .modal-header .modal-title,
.sv-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.sv-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.sv-modal-item-text-label--display {
  color: #333333;
}

.sv-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.sv-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.sv-modal-item-text-modal .sv-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.sv-modal-item-text-modal .sv-modal-item-text-textarea-wrapper .sv-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.sv-modal-item-text-textarea {
  overflow-y: auto !important;
}

.sv-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.sv-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sv-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.sv-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.sv-modal-add-do-item-modal .sv-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.sv-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.sv-modal-add-do-item-dropdown-section .sv-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sv-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sv-modal-add-do-item-table-section .sv-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.sv-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.sv-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.sv-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sv-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.sv-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.sv-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.sv-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.sv-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.sv-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.sv-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.sv-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.sv-modal-detail-table td:first-child .sv-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.sv-modal-detail-table td:first-child .sv-modal-partner-type-input {
  padding-left: 0.625rem;
}

.sv-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.sv-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.sv-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sv-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.sv-modal-partner-type-dropdown--display .sv-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.sv-modal-partner-type-dropdown-content--display .sv-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-partner-type-dropdown-content--display .sv-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.sv-modal-partner-type-dropdown-content--display .sv-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-partner-type-dropdown-content--display .sv-modal-partner-type-check {
  color: #999999 !important;
}

.sv-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.sv-modal-partner-type-dropdown--display .sv-modal-partner-type-value {
  color: #555555;
}

.sv-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.sv-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.sv-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.sv-modal-partner-type-item--placeholder {
  cursor: default;
}

.sv-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.sv-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sv-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.sv-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.sv-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.sv-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.sv-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sv-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.sv-modal-partner-id-dropdown--display .sv-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-code,
.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-name,
.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-separator {
  color: #999999 !important;
}

.sv-modal-partner-id-dropdown-content--display .sv-modal-partner-id-check {
  color: #999999 !important;
}

.sv-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.sv-modal-partner-id-dropdown--display .sv-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.sv-modal-detail-table tbody tr:hover .sv-modal-partner-type-dropdown--display .sv-modal-partner-type-input-wrapper,
.sv-modal-detail-table tbody tr:hover .sv-modal-partner-id-dropdown--display .sv-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .sv-modal-partner-type-dropdown--display .sv-modal-partner-type-input-wrapper,
.sv-modal-detail-table-container--external .sv-modal-detail-table tbody tr:hover .sv-modal-partner-id-dropdown--display .sv-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.sv-modal-partner-type-arrow--external {
  visibility: hidden;
}

.sv-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.sv-modal-partner-type-dropdown--external .sv-modal-partner-type-value {
  color: #555555;
}

.sv-modal-partner-id-dropdown--external .sv-modal-partner-id-value {
  color: #555555;
}

.sv-modal-detail-table-container--external .sv-modal-detail-table td.sv-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.sv-modal-partner-header-section--external .sv-modal-form-input--display {
  color: #555555;
}

.sv-modal-detail-table td.sv-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.sv-modal-tab-content--display .sv-modal-detail-table td.sv-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.sv-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sv-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sv-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.sv-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.sv-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.sv-modal-partner-id-item--placeholder {
  cursor: default;
}

.sv-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.sv-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.sv-modal-partner-id-separator {
  color: #999999;
}

.sv-modal-partner-id-name {
  color: #666666;
}

.sv-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sv-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.sv-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.sv-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sv-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sv-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sv-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.sv-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sv-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sv-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.sv-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.sv-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.sv-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.sv-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.sv-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.sv-modal-data-flow-stage--completed .sv-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sv-modal-data-flow-stage--active .sv-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sv-modal-data-flow-stage--completed .sv-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-data-flow-stage--active .sv-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.sv-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.sv-modal-data-flow-stage--completed .sv-modal-data-flow-stage-label {
  color: #138B4C;
}

.sv-modal-data-flow-stage--active .sv-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.sv-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.sv-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.sv-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.sv-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.sv-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.sv-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sv-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.sv-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.sv-modal-data-flow-document--active .sv-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.sv-modal-data-flow-document-fold {
  display: none;
}

.sv-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.sv-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.sv-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.sv-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.sv-modal-data-flow-document-icon-wrapper--active .sv-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.sv-modal-data-flow-document--active .sv-modal-data-flow-document-title {
  color: #138B4C;
}

.sv-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.sv-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.sv-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.sv-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.sv-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.sv-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.sv-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.sv-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.sv-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sv-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.sv-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.sv-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.sv-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.sv-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.sv-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.sv-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.sv-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.sv-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.sv-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sv-modal-terms-area-button .sv-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.sv-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.sv-modal-tab-content--display .sv-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.sv-modal-tab-content--display .sv-modal-terms-area-button .sv-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.sv-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sv-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.sv-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.sv-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sv-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sv-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sv-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.sv-modal-data-flow-2-row {
  display: flex;
}

.sv-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.sv-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.sv-modal-data-flow-2-row--content .sv-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.sv-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.sv-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.sv-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.sv-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-label {
  color: #333333;
}

.sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage-label {
  color: #999999;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--completed .sv-modal-data-flow-2-stage-label {
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--active .sv-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.sv-modal-tab-content--display .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.sv-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.sv-modal-data-flow-2-row--content .sv-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.sv-modal-data-flow-2-row--content .sv-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sv-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sv-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.sv-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.sv-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.sv-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sv-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.sv-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.sv-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.sv-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-title,
.sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-title {
  color: #333333;
}

.sv-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.sv-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.sv-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.sv-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-title {
  color: #888888;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-title,
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-title {
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--completed .sv-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--active .sv-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-date {
  color: #333333;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.sv-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.sv-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.sv-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.sv-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.sv-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.sv-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.sv-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sv-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sv-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sv-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.sv-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.sv-modal-data-flow-2-grid--external .sv-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.sv-modal-data-flow-2-grid--external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell {
  border-bottom: none;
}

.sv-modal-data-flow-2-grid--external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.sv-modal-data-flow-2-grid--external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell--label::after {
  display: none;
}

.sv-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.sv-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.sv-modal-data-flow-2-row--content-top .sv-modal-data-flow-2-document--buyer.sv-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.sv-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.sv-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sv-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.sv-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.sv-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.sv-modal-data-flow-2-stage--external-completed .sv-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.sv-modal-data-flow-2-stage--external-active .sv-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.sv-modal-data-flow-2-stage--external-completed .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.sv-modal-data-flow-2-stage--external-active .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.sv-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.sv-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sv-modal-data-flow-2-document--external .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.sv-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.sv-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.sv-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.sv-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.sv-modal-data-flow-2-document--external .sv-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.sv-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.sv-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sv-modal-data-flow-2-document--supplier .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.sv-modal-data-flow-2-document--supplier .sv-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.sv-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.sv-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.sv-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sv-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier .sv-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier .sv-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-completed .sv-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--supplier-active .sv-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.sv-modal-tab-content--data-flow-2-external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.sv-modal-tab-content--data-flow-2-external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external .sv-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external .sv-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.sv-modal-tab-content--display.sv-modal-tab-content--data-flow-2-external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.sv-modal-tab-content--display.sv-modal-tab-content--data-flow-2-external .sv-modal-data-flow-2-row--header .sv-modal-data-flow-2-cell:has(.sv-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-circle,
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external-completed .sv-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external-active .sv-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-icon,
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external-completed .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external-active .sv-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-stage--external .sv-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-completed .sv-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.sv-modal-tab-content--display .sv-modal-data-flow-2-document--external-active .sv-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.sv-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.sv-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.sv-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.sv-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.sv-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.sv-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sv-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sv-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sv-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.sv-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.sv-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.sv-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.sv-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.sv-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sv-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.sv-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.sv-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.sv-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.sv-modal-milestone-date-value {
  color: #666666;
}

.sv-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.sv-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.sv-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.sv-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.sv-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.sv-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sv-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.sv-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sv-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.sv-modal-activity-item--display .sv-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.sv-modal-calendar-milestones .sv-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.sv-modal-calendar-milestones .sv-modal-activity-user:hover {
  text-decoration: none;
}

.sv-modal-calendar-milestones .sv-modal-activity-item--display .sv-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.sv-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.sv-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sv-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sv-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.sv-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-calendar-nav-btn:hover .sv-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.sv-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.sv-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.sv-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.sv-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.sv-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.sv-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.sv-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.sv-modal-calendar-view-mode-btn--active + .sv-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.sv-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sv-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.sv-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.sv-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.sv-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sv-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sv-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.sv-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.sv-modal-calendar-grid-cell:nth-child(7n-1),
.sv-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.sv-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.sv-modal-calendar-grid-day-name:nth-child(6),
.sv-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.sv-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.sv-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sv-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.sv-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.sv-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.sv-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.sv-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.sv-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.sv-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sv-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.sv-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sv-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.sv-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.sv-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.sv-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sv-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.sv-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.sv-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.sv-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sv-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.sv-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sv-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sv-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.sv-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.sv-modal-calendar-weekly-day-column:nth-child(6),
.sv-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.sv-modal-calendar-weekly-day-header:nth-child(6),
.sv-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.sv-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.sv-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sv-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sv-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.sv-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sv-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sv-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.sv-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.sv-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sv-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.sv-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sv-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.sv-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sv-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sv-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.sv-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.sv-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.sv-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.sv-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sv-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sv-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.sv-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sv-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sv-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.sv-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-view {
  border-color: #D0D0D0;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-view-mode-btn--active + .sv-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-milestones-header {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-view-title {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-grid-day-name {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-grid-cell-day {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-weekly-day-name {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-weekly-day-date {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-weekly-event-title {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-daily-header {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-daily-hour-label {
  color: #666666;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-daily-event-title {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar .sv-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.sv-modal-calendar-milestones-header--external {
  color: #333333;
}

.sv-modal-calendar-nav-btn--external .sv-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sv-modal-calendar-nav-btn--external:hover .sv-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.sv-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.sv-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.sv-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.sv-modal-calendar-view-mode-btn--active-external + .sv-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.sv-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.sv-modal-tab-content--calendar-external .sv-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.sv-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.sv-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.sv-modal-activity-type--external {
  color: #333333;
}

.sv-modal-activity-user--external {
  color: #E67E22;
}

.sv-modal-activity-user--external:hover {
  color: #D35400;
}

.sv-modal-calendar-milestones .sv-modal-activity-user--external {
  color: #E67E22;
}

.sv-modal-calendar-milestones .sv-modal-activity-user--external:hover {
  color: #D35400;
}

.sv-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.sv-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sv-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sv-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sv-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.sv-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sv-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sv-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sv-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.sv-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sv-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sv-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sv-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-milestones-header--external {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-view-mode-btn--active-external + .sv-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-calendar-nav-btn--external .sv-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-activity-type--external {
  color: #333333;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-activity-user--external {
  color: #E67E22;
}

.sv-modal-tab-content--display.sv-modal-tab-content--calendar-external .sv-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.sv-modal-input--error,
.sv-modal-form-input.sv-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.sv-modal-dropdown--error .sv-modal-delivery-type-input,
.sv-modal-dropdown--error .sv-modal-organization-input,
.sv-modal-dropdown--error .sv-modal-sales-structure-input,
.sv-modal-dropdown--error .sv-modal-sales-channel-input,
.sv-modal-dropdown--error .sv-modal-sales-unit-input,
.sv-modal-dropdown--error .sv-modal-territory-input,
.sv-modal-dropdown--error .sv-modal-sales-office-input,
.sv-modal-dropdown--error .sv-modal-sold-to-party-input,
.sv-modal-dropdown--error .sv-modal-deliver-to-party-input,
.sv-modal-dropdown--error .sv-modal-attention-to-deliver-input,
.sv-modal-dropdown--error .sv-modal-incoterm-input,
.sv-modal-dropdown--error .sv-modal-delivery-point-input,
.sv-modal-dropdown--error .sv-modal-shipping-point-input,
.sv-modal-dropdown--error .sv-modal-sales-order-input,
.sv-modal-dropdown--error .sv-modal-sales-team-input,
.sv-modal-dropdown--error .sv-modal-sales-person-input,
.sv-modal-dropdown--error .sv-modal-delivery-priority-input,
.sv-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.sv-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.sv-modal-date-picker-wrapper.sv-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.sv-modal-custom-dropdown {
  position: relative;
}

.sv-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sv-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sv-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sv-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sv-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-check {
  color: #999999 !important;
}

.sv-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sv-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sv-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.sv-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.sv-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sv-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.sv-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sv-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.sv-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sv-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sv-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sv-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.sv-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sv-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.sv-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sv-modal-setting-form-label--display {
  color: #333333;
}

.sv-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sv-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-setting-dropdown--active .sv-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.sv-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.sv-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.sv-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sv-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.sv-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.sv-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.sv-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-setting-dropdown-icon.sv-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sv-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.sv-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.sv-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.sv-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.sv-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.sv-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.sv-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sv-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sv-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sv-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.sv-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.sv-modal-setting-dropdown-item-separator {
  color: #999999;
}

.sv-modal-setting-dropdown-item-name {
  color: #333333;
}

.sv-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sv-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.sv-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.sv-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sv-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sv-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.sv-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.sv-modal-setting-tab-content--print .sv-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.sv-modal-setting-tab-content--print .sv-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-modal-setting-tab-content--print .sv-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.sv-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.sv-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.sv-modal-setting-table thead tr {
  height: 2.25rem;
}

.sv-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.sv-modal-setting-table tbody tr {
  height: 2.25rem;
}

.sv-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.sv-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.sv-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.sv-modal-setting-table--display thead th:nth-child(2),
.sv-modal-setting-table--display thead th:nth-child(3),
.sv-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.sv-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.sv-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.sv-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.sv-modal-setting-table--transfer.sv-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.sv-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.sv-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.sv-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.sv-modal-setting-table--transfer:not(.sv-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.sv-modal-setting-table--transfer:not(.sv-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.sv-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.sv-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.sv-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.sv-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.sv-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sv-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sv-modal-tab-content--display .sv-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.sv-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.sv-modal-tab-content--display .sv-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.sv-modal-attribute-header-section--external .sv-modal-form-input:focus {
  border-color: #F5B041;
}

.sv-modal-attribute-header-section--external .sv-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.sv-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.sv-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.sv-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.sv-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.sv-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.sv-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.sv-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.sv-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.sv-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.sv-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.sv-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.sv-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.sv-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.sv-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.sv-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.sv-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.sv-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.sv-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.sv-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.sv-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.sv-modal-available-qty-tree-level {
  position: relative;
}

.sv-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.sv-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.sv-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.sv-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.sv-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.sv-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.sv-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.sv-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.sv-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.sv-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.sv-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.sv-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.sv-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.sv-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.sv-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.sv-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.sv-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.sv-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.sv-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.sv-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.sv-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.sv-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.sv-modal-available-qty-tree-batch-header .sv-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.sv-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.sv-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.sv-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sv-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.sv-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.sv-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.sv-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.sv-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.sv-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.sv-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.sv-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.sv-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.sv-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.sv-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sv-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.sv-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.sv-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.sv-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.sv-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.sv-modal-activity-type--clickable.sv-modal-activity-type--display:hover {
  color: #138B4C;
}

.sv-modal-activity-type--clickable.sv-modal-activity-type--external:hover {
  color: #E67E00;
}

.sv-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sv-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.sv-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sv-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.sv-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sv-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.sv-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sv-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.sv-modal-activity-detail-content .sv-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.sv-modal-activity-detail-modal .sv-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.sv-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.sv-modal-activity-detail-modal .sv-modal-tabs--display .sv-modal-tab {
  color: #333333;
}

.sv-modal-activity-detail-modal .sv-modal-tabs--display .sv-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.sv-modal-activity-detail-modal .sv-modal-tabs--external.sv-modal-tabs--display .sv-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.sv-modal-activity-detail-tab-content--general .sv-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.sv-modal-activity-detail-content .sv-modal-milestone-status {
  margin: 0;
}

.sv-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.sv-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.sv-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.sv-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.sv-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.sv-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.sv-modal-activity-detail-pic-chat-wrapper:hover .sv-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.sv-modal-activity-detail-pic-chat-wrapper:hover .sv-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.sv-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.sv-modal-activity-detail-pic--clickable:hover .sv-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.sv-modal-activity-detail-content--external .sv-modal-activity-detail-pic {
  color: #E67E22;
}

.sv-modal-activity-detail-content--external .sv-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.sv-modal-activity-detail-content--external .sv-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.sv-modal-activity-detail-content--external .sv-modal-activity-detail-pic--clickable:hover .sv-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.sv-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.sv-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sv-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sv-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.sv-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.sv-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.sv-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.sv-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.sv-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.sv-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.sv-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sv-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sv-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.sv-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.sv-modal-activity-detail-content--external .sv-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.sv-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.sv-modal-activity-detail-content--external .sv-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sv-modal-activity-detail-content--external .sv-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sv-modal-activity-detail-content--external .sv-modal-activity-detail-document-name {
  color: #E67E22;
}

.sv-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.sv-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.sv-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.sv-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.sv-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.sv-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.sv-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.sv-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.sv-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.sv-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.sv-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.sv-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.sv-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.sv-modal-activity-detail-tab-content--general {
  padding: 0;
}

.sv-modal-activity-detail-tab-content--general .sv-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.sv-modal-activity-detail-tab-content--general > div:not(.sv-modal-item-text-info) {
  padding: 0 1.5rem;
}

.sv-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.sv-modal-activity-detail-tab-content--attachment,
.sv-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.sv-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.sv-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.sv-modal-activity-detail-tab-content--attachment .sv-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.sv-modal-activity-detail-tab-content--attachment .sv-modal-batch-assignment-table-section > .sv-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sv-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.sv-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.sv-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.sv-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.sv-modal-activity-detail-content--external .sv-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.sv-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.sv-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.sv-modal-activity-detail-content--external .sv-modal-item-text-info {
  background-color: #FEF5E7;
}

.sv-modal-activity-detail-content--external .sv-modal-task-notes-section {
  background-color: #FEF5E7;
}

.sv-modal-task-notes-section .sv-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sv-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.sv-modal-task-notes-textarea.sv-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.sv-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.sv-modal-task-chat-section > .sv-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sv-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.sv-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.sv-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sv-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sv-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sv-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.sv-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.sv-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.sv-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sv-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.sv-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.sv-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.sv-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.sv-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.sv-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.sv-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.sv-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.sv-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.sv-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.sv-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.sv-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.sv-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sv-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.sv-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.sv-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.sv-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.sv-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.sv-modal-activity-detail-content--external .sv-modal-task-chat-avatar {
  background-color: #F5B041;
}

.sv-modal-activity-detail-content--external .sv-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.sv-modal-activity-detail-content--external .sv-modal-task-chat-reply-btn {
  color: #E67E22;
}

.sv-modal-activity-detail-content--external .sv-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.sv-modal-dropdown--display .sv-modal-dropdown-item,
.sv-modal-dropdown--display [class*="-item"],
.sv-modal-tags-dropdown--display .sv-modal-tags-dropdown-item,
.sv-modal-baseline-date-dropdown--display .sv-modal-baseline-date-item,
.sv-modal-reference-type-dropdown--display .sv-modal-reference-type-item,
.sv-modal-delivery-priority-dropdown--display .sv-modal-delivery-priority-item,
.sv-modal-organization-dropdown--display .sv-modal-organization-item,
.sv-modal-sales-structure-dropdown--display .sv-modal-sales-structure-item,
.sv-modal-delivery-type-dropdown--display .sv-modal-delivery-type-item,
.sv-modal-sales-channel-dropdown--display .sv-modal-sales-channel-item,
.sv-modal-sales-unit-dropdown--display .sv-modal-sales-unit-item,
.sv-modal-sold-to-party-dropdown--display .sv-modal-sold-to-party-item,
.sv-modal-deliver-to-party-dropdown--display .sv-modal-deliver-to-party-item,
.sv-modal-attention-to-deliver-dropdown--display .sv-modal-attention-to-deliver-item,
.sv-modal-incoterm-dropdown--display .sv-modal-incoterm-item,
.sv-modal-delivery-point-dropdown--display .sv-modal-delivery-point-item,
.sv-modal-shipping-point-dropdown--display .sv-modal-shipping-point-item,
.sv-modal-sales-order-dropdown--display .sv-modal-sales-order-item,
.sv-modal-sales-person-dropdown--display .sv-modal-sales-person-item,
.sv-modal-sales-team-dropdown--display .sv-modal-sales-team-item,
.sv-modal-territory-dropdown--display .sv-modal-territory-item,
.sv-modal-sales-office-dropdown--display .sv-modal-sales-office-item,
.sv-modal-status-dropdown--display .sv-modal-status-item,
.sv-modal-handling-product-dropdown--display .sv-modal-handling-product-item,
.sv-modal-child-uom-dropdown--display .sv-modal-child-uom-item,
.sv-modal-partner-type-dropdown--display .sv-modal-partner-type-item,
.sv-modal-partner-id-dropdown--display .sv-modal-partner-id-item,
.sv-modal-custom-dropdown--display .sv-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.sv-modal-dropdown--display .sv-modal-dropdown-item:hover,
.sv-modal-dropdown--display [class*="-item"]:hover,
.sv-modal-tags-dropdown--display .sv-modal-tags-dropdown-item:hover,
.sv-modal-baseline-date-dropdown--display .sv-modal-baseline-date-item:hover,
.sv-modal-reference-type-dropdown--display .sv-modal-reference-type-item:hover,
.sv-modal-delivery-priority-dropdown--display .sv-modal-delivery-priority-item:hover,
.sv-modal-organization-dropdown--display .sv-modal-organization-item:hover,
.sv-modal-sales-structure-dropdown--display .sv-modal-sales-structure-item:hover,
.sv-modal-delivery-type-dropdown--display .sv-modal-delivery-type-item:hover,
.sv-modal-sales-channel-dropdown--display .sv-modal-sales-channel-item:hover,
.sv-modal-sales-unit-dropdown--display .sv-modal-sales-unit-item:hover,
.sv-modal-sold-to-party-dropdown--display .sv-modal-sold-to-party-item:hover,
.sv-modal-deliver-to-party-dropdown--display .sv-modal-deliver-to-party-item:hover,
.sv-modal-attention-to-deliver-dropdown--display .sv-modal-attention-to-deliver-item:hover,
.sv-modal-incoterm-dropdown--display .sv-modal-incoterm-item:hover,
.sv-modal-delivery-point-dropdown--display .sv-modal-delivery-point-item:hover,
.sv-modal-shipping-point-dropdown--display .sv-modal-shipping-point-item:hover,
.sv-modal-sales-order-dropdown--display .sv-modal-sales-order-item:hover,
.sv-modal-sales-person-dropdown--display .sv-modal-sales-person-item:hover,
.sv-modal-sales-team-dropdown--display .sv-modal-sales-team-item:hover,
.sv-modal-territory-dropdown--display .sv-modal-territory-item:hover,
.sv-modal-sales-office-dropdown--display .sv-modal-sales-office-item:hover,
.sv-modal-status-dropdown--display .sv-modal-status-item:hover,
.sv-modal-handling-product-dropdown--display .sv-modal-handling-product-item:hover,
.sv-modal-child-uom-dropdown--display .sv-modal-child-uom-item:hover,
.sv-modal-partner-type-dropdown--display .sv-modal-partner-type-item:hover,
.sv-modal-partner-id-dropdown--display .sv-modal-partner-id-item:hover,
.sv-modal-custom-dropdown--display .sv-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.sv-modal-dropdown--display [class*="-item--selected"],
.sv-modal-tags-dropdown--display .sv-modal-tags-dropdown-item--selected,
.sv-modal-baseline-date-dropdown--display .sv-modal-baseline-date-item--selected,
.sv-modal-reference-type-dropdown--display .sv-modal-reference-type-item--selected,
.sv-modal-delivery-priority-dropdown--display .sv-modal-delivery-priority-item--selected,
.sv-modal-organization-dropdown--display .sv-modal-organization-item--selected,
.sv-modal-sales-structure-dropdown--display .sv-modal-sales-structure-item--selected,
.sv-modal-delivery-type-dropdown--display .sv-modal-delivery-type-item--selected,
.sv-modal-sales-channel-dropdown--display .sv-modal-sales-channel-item--selected,
.sv-modal-sales-unit-dropdown--display .sv-modal-sales-unit-item--selected,
.sv-modal-sold-to-party-dropdown--display .sv-modal-sold-to-party-item--selected,
.sv-modal-deliver-to-party-dropdown--display .sv-modal-deliver-to-party-item--selected,
.sv-modal-attention-to-deliver-dropdown--display .sv-modal-attention-to-deliver-item--selected,
.sv-modal-incoterm-dropdown--display .sv-modal-incoterm-item--selected,
.sv-modal-delivery-point-dropdown--display .sv-modal-delivery-point-item--selected,
.sv-modal-shipping-point-dropdown--display .sv-modal-shipping-point-item--selected,
.sv-modal-sales-order-dropdown--display .sv-modal-sales-order-item--selected,
.sv-modal-sales-person-dropdown--display .sv-modal-sales-person-item--selected,
.sv-modal-sales-team-dropdown--display .sv-modal-sales-team-item--selected,
.sv-modal-territory-dropdown--display .sv-modal-territory-item--selected,
.sv-modal-sales-office-dropdown--display .sv-modal-sales-office-item--selected,
.sv-modal-status-dropdown--display .sv-modal-status-item--selected,
.sv-modal-handling-product-dropdown--display .sv-modal-handling-product-item--selected,
.sv-modal-child-uom-dropdown--display .sv-modal-child-uom-item--selected,
.sv-modal-partner-type-dropdown--display .sv-modal-partner-type-item--selected,
.sv-modal-partner-id-dropdown--display .sv-modal-partner-id-item--selected,
.sv-modal-custom-dropdown--display .sv-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.sv-modal-dropdown--display [class*="-check"],
.sv-modal-dropdown--display .sv-modal-dropdown-check,
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.sv-modal-dropdown--display [class*="-item-code"],
.sv-modal-dropdown--display [class*="-item-name"],
.sv-modal-dropdown--display [class*="-item-content"],
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-code,
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-name,
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-item,
.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.sv-modal-sold-to-party-dropdown-content--display .sv-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.sv-modal-tags-dropdown--display .sv-modal-tags-item,
.sv-modal-tags-dropdown--display .sv-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-tags-dropdown--display .sv-modal-tags-item:hover {
  background-color: transparent !important;
}

.sv-modal-tags-dropdown--display .sv-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.sv-modal-tags-dropdown--display .sv-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item,
.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.sv-modal-custom-dropdown-list--display .sv-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ── Visit Tab Styles ────────────────────────────────────────────────── */
.sv-modal-visit-container { padding: 1rem; }
.sv-modal-checkin-section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; gap: 1rem; margin-bottom: 1rem; }
.sv-modal-checkin-card { padding: 1rem; border: 1px solid #e0e0e0; border-radius: 0.25rem; }
.sv-modal-checkin-card-title { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.75rem; }
.sv-modal-checkin-field { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.75rem; }
.sv-modal-checkin-label { color: #666; }
.sv-modal-checkin-value { font-weight: 500; color: #333; }
.sv-modal-map-placeholder { width: 100%; height: 12.5rem; background-color: #f5f5f5; border: 1px dashed #ccc; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.8125rem; margin-top: 1rem; }
.sv-modal-duration-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 600; background-color: #e8f5e9; color: #2e7d32; }
.sv-modal-expense-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 1rem; }
.sv-modal-expense-table th { background-color: #fafafa; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
.sv-modal-expense-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }
.sv-modal-expense-summary { display: flex; gap: 1rem; margin-top: 0.75rem; padding: 0.75rem; background-color: #f8f9fa; border-radius: 0.25rem; }
.sv-modal-expense-summary-item { flex: 1 1; text-align: center; }
.sv-modal-expense-summary-label { font-size: 0.6875rem; color: #666; }
.sv-modal-expense-summary-value { font-size: 1rem; font-weight: 700; margin-top: 0.25rem; }
.sv-modal-report-section { margin-top: 1rem; }
.sv-modal-report-field { margin-bottom: 0.75rem; }
.sv-modal-report-label { font-size: 0.75rem; font-weight: 600; color: #333; margin-bottom: 0.25rem; }
.sv-modal-report-value { font-size: 0.75rem; color: #555; padding: 0.5rem; background-color: #fafafa; border-radius: 0.25rem; min-height: 2.5rem; }

/* ===== from pages/Sales/SectionDashboard.css ===== */
.section-dashboard {
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
}

.section-dashboard__label {
  font-size: 0.625rem;
  font-weight: 700;
  color: #138B4C;
  letter-spacing: 0.5px;
  padding: 0.5rem 1rem 0.25rem 1rem;
}

.section-dashboard__card {
  padding: 0.75rem 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}

.section-dashboard__card:last-of-type {
  border-bottom: none;
}

.section-dashboard__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.section-dashboard__card-head h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.section-dashboard__big {
  font-size: 1.25rem;
  font-weight: 700;
}

.section-dashboard__hint {
  font-size: 0.6875rem;
  color: #888;
  margin-bottom: 0.5rem;
  text-align: left;
}

.section-dashboard__subtext {
  font-size: 0.625rem;
  color: #888;
  margin-bottom: 0.25rem;
}

.section-dashboard__bar-wrap {
  height: 0.3125rem;
  background: #E5E5E5;
  border-radius: 0.1875rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.section-dashboard__bar {
  height: 100%;
  border-radius: 0.1875rem;
}

.section-dashboard__seg-row {
  display: flex;
  gap: 0.1875rem;
  margin-bottom: 0.25rem;
}

.section-dashboard__seg-row > div {
  height: 0.375rem;
}

.section-dashboard__bucket-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.5625rem;
  color: #888;
}

.section-dashboard__tiles {
  display: flex;
  gap: 0.375rem;
}

.section-dashboard__tile {
  flex: 1 1;
  border-radius: 0.25rem;
  padding: 0.375rem;
  text-align: center;
}

.section-dashboard__tile-value {
  font-size: 1rem;
  font-weight: 700;
}

.section-dashboard__tile-value--small {
  font-size: 0.75rem;
}

.section-dashboard__tile-label {
  font-size: 0.5625rem;
  color: #666;
}

.tile-green { background: #EDF5EC; color: #138B4C; }
.tile-amber { background: #FFF8E1; color: #F59E0B; }
.tile-red { background: #FDE8E8; color: #DC2626; }
.tile-blue { background: #E8F0FE; color: #0070C0; }
.tile-purple { background: #F3E8FF; color: #7C3AED; }
.tile-gray { background: #F5F5F5; color: #666; }
.tile-dark-red { background: #FDE8E8; color: #7f1d1d; }
.tile-orange { background: #FFEDD5; color: #EA580C; }

.section-dashboard__tile-value--xs { font-size: 0.6875rem; }
.section-dashboard__tile-value--sm { font-size: 0.75rem; }
.section-dashboard__tile--compact { padding: 0.3125rem 0.1875rem; }
.section-dashboard__tile-label--xs { font-size: 0.5rem; }

.section-dashboard__agents-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
}

.section-dashboard__agents-head h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0;
}

.section-dashboard__agents-counts {
  display: flex;
  gap: 0.25rem;
}

.section-dashboard__pill {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 0.375rem;
  border-radius: 0.5rem;
}

.section-dashboard__agent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.section-dashboard__agent:last-child {
  border-bottom: none;
}

.section-dashboard__agent-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.section-dashboard__agent-info {
  flex: 1 1;
}

.section-dashboard__agent-name {
  font-size: 0.6875rem;
  font-weight: 600;
}

.section-dashboard__agent-detail {
  font-size: 0.625rem;
  color: #999;
}

.section-dashboard__status-pill {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 1px 0.3125rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
}

.section-dashboard__agents-wrap {
  padding: 0.5rem 1rem;
}

.section-dashboard__results {
  margin-top: 0.75rem;
  padding: 0.625rem;
  background: #FAFAFA;
  border-radius: 0.5rem;
}

.section-dashboard__results h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.section-dashboard__result-row {
  margin-bottom: 0.5rem;
}

.section-dashboard__result-row:last-child {
  margin-bottom: 0;
}

.section-dashboard__result-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  margin-bottom: 0.1875rem;
}

.section-dashboard__result-head span:first-child {
  color: #666;
}

.section-dashboard__result-head span:last-child {
  font-weight: 700;
}

.section-dashboard__result-bar-wrap {
  height: 0.1875rem;
  background: #E5E5E5;
  border-radius: 2px;
  overflow: hidden;
}

.section-dashboard__result-bar {
  height: 100%;
  border-radius: 2px;
}

.section-dashboard__alert {
  font-size: 0.625rem;
  margin-top: 0.25rem;
}

/* ===== from pages/Sales/ServiceRequest/ServiceRequest.css ===== */
/* Service Request Wrapper - prevent page scroll */
.service-request-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Service Request Container */
.service-request-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.service-request-header {
  margin-bottom: 0;
}

.service-request-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Service Request Control - Exact copy of third-nav-control */
.service-request-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.service-request-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.service-request-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.service-request-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.service-request-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.service-request-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.service-request-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.service-request-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.service-request-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.service-request-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.service-request-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.service-request-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.service-request-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.service-request-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.service-request-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.service-request-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.service-request-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.service-request-layout-dropdown-item:last-child {
  border-bottom: none;
}

.service-request-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.service-request-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.service-request-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.service-request-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.service-request-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.service-request-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.service-request-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.service-request-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-request-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-request-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.service-request-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.service-request-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.service-request-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.service-request-filter-parameter-wrapper {
  position: relative;
}

.service-request-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.service-request-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-request-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.service-request-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.service-request-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.service-request-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.service-request-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.service-request-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.service-request-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-request-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.service-request-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.service-request-filter-close:hover {
  background-color: #f0f0f0;
}

.service-request-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.service-request-filter-group {
  margin-bottom: 1rem;
}

.service-request-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.service-request-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-request-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.service-request-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.service-request-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.service-request-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.service-request-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.service-request-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.service-request-filter-org-container {
  flex: 1 1;
  position: relative;
}

.service-request-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.service-request-filter-org-input:hover {
  border-color: #C2DE54;
}

.service-request-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.service-request-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.service-request-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.service-request-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.service-request-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.service-request-filter-tag-remove:hover {
  color: #000;
}

.service-request-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.service-request-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.service-request-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.service-request-filter-org-item:hover {
  background-color: #f5f5f5;
}

.service-request-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.service-request-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.service-request-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.service-request-filter-org-code {
  font-weight: 600;
  color: #333;
}

.service-request-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.service-request-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.service-request-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.service-request-type-dropdown-item:last-child {
  border-bottom: none;
}

.service-request-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.service-request-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.service-request-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.service-request-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Service Request Table */
.service-request-table {
  animation: serviceRequestFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes serviceRequestFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .service-request-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .service-request-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .service-request-type-dropdown {
    min-width: 11.25rem;
  }

  .service-request-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/ServiceRequest/ServiceRequestModal.css ===== */
/* Delivery Order Modal Specific Styles */
.service-request-modal {
  overscroll-behavior: contain;
}

.service-request-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.sr-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.sr-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.sr-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.sr-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.sr-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.sr-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.sr-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.sr-modal-pov-button--external.sr-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.sr-modal-pov-button--external .sr-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-pov-button--external .sr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.sr-modal-pov-caret--open {
  transform: rotate(180deg);
}

.sr-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.sr-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.sr-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.sr-modal-pov-dropdown-item span {
  flex: 1 1;
}

.sr-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.sr-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.sr-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.sr-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.sr-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.sr-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sr-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sr-modal-tabs--display .sr-modal-tab {
  color: #666666;
}

.sr-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.sr-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.sr-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.sr-modal-tabs--display .sr-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.sr-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.sr-modal-tabs--external .sr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sr-modal-tabs--external.sr-modal-tabs--display .sr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sr-modal-tabs--external .sr-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.sr-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.sr-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.sr-modal-action-button span {
  white-space: nowrap;
}

.sr-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.sr-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.sr-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sr-modal-action-button--disabled .sr-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.sr-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.sr-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.sr-modal-left-area--full .sr-modal-back-button {
  transition: width 300ms ease;
}

.sr-modal-left-area--full .sr-modal-back-button:hover {
  width: 3.5rem;
}

.sr-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.sr-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.sr-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sr-modal-content--item {
  padding-bottom: 1rem;
}

.sr-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.sr-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.sr-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.sr-modal-attachment-table-container .sr-modal-detail-table thead,
.sr-modal-attachment-table-container .sr-modal-attachment-table thead {
  box-shadow: none !important;
}

.sr-modal-attachment-table-container .sr-modal-detail-table tr,
.sr-modal-attachment-table-container .sr-modal-attachment-table tr {
  box-shadow: none !important;
}

.sr-modal-attachment-table-container .sr-modal-detail-table tbody tr:last-child,
.sr-modal-attachment-table-container .sr-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.sr-modal-attachment-table-container .sr-modal-detail-table tbody tr:last-child td,
.sr-modal-attachment-table-container .sr-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.sr-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.sr-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.sr-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.sr-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.sr-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.sr-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.sr-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.sr-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.sr-modal-attachment-filename--external {
  color: #E67E22;
}

.sr-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.sr-modal-tab-content--display .sr-modal-attachment-filename--external {
  color: #E67E22;
}

.sr-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.sr-modal-attachment-size {
  color: #666666;
}

.sr-modal-attachment-date {
  color: #666666;
}

.sr-modal-attachment-uploadedby {
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.sr-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.sr-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sr-modal-attachment-browse-btn:focus {
  outline: none;
}

.sr-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.sr-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.sr-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-attachment-browse-btn--disabled .sr-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.sr-modal-tab-content--display .sr-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.sr-modal-tab-content--display .sr-modal-attachment-filename.sr-modal-attachment-filename--external {
  color: #E67E22;
}

.sr-modal-tab-content--display .sr-modal-attachment-type {
  color: #666666;
}

.sr-modal-tab-content--display .sr-modal-attachment-size {
  color: #666666;
}

.sr-modal-tab-content--display .sr-modal-attachment-date {
  color: #666666;
}

.sr-modal-tab-content--display .sr-modal-attachment-uploadedby {
  color: #333333;
}

.sr-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.sr-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.sr-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.sr-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.sr-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.sr-modal-tab-content--display .sr-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.sr-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.sr-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.sr-modal-tab-content--display .sr-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.sr-modal-basic-section--external .sr-modal-form-input:focus {
  border-color: #F5B041;
}

.sr-modal-basic-section--external .sr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.sr-modal-tab-content--external .sr-modal-form-input:focus,
.sr-modal-tab-content--external .sr-modal-form-textarea:focus,
.sr-modal-tab-content--external .sr-modal-custom-dropdown-input:focus,
.sr-modal-tab-content--external .sr-modal-date-input:focus,
.sr-modal-tab-content--external .sr-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.sr-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.sr-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.sr-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.sr-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.sr-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sr-modal-tab-content--display .sr-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.sr-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.sr-modal-tab-content--display .sr-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.sr-modal-partner-header-section--external .sr-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.sr-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sr-modal-tab-content--display .sr-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.sr-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.sr-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.sr-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.sr-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sr-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.sr-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.sr-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.sr-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.sr-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.sr-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.sr-modal-chat-section {
  padding: 1.5rem 0;
}

.sr-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sr-modal-chat-header h3 {
  margin: 0;
}

.sr-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.sr-modal-chat-new-thread .sr-modal-form-textarea {
  min-height: 5rem;
}

.sr-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.sr-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sr-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sr-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.sr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sr-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.sr-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.sr-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.sr-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.sr-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.sr-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.sr-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.sr-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.sr-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.sr-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-chat-user-name {
  color: #333333 !important;
}

.sr-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.sr-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.sr-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.sr-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.sr-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.sr-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.sr-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.sr-modal-chat-reply-btn:hover .sr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.sr-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.sr-modal-chat-replies .sr-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.sr-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.sr-modal-chat-reply-input .sr-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.sr-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.sr-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.sr-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.sr-modal-tab-content--display .sr-modal-chat-thread {
  border-color: #E5E5E5;
}

.sr-modal-tab-content--display .sr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display .sr-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-chat-user-position {
  background-color: #E8F5E9;
}

.sr-modal-tab-content--display .sr-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.sr-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.sr-modal-tab-content--display .sr-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.sr-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.sr-modal-notes-header-section--external .sr-modal-form-textarea:focus {
  border-color: #F5B041;
}

.sr-modal-chat-section--external .sr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.sr-modal-chat-avatar--external {
  background-color: #F5B041;
}

.sr-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.sr-modal-tab-content--display .sr-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-thread {
  border-color: #E5E5E5;
}

.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-message--main {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-user-name {
  color: #333333 !important;
}

.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-user-position {
  background-color: #FDE8D0;
}

.sr-modal-tab-content--display.sr-modal-tab-content--external .sr-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.sr-modal-chat-reply-btn--external {
  color: #E67E22;
}

.sr-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.sr-modal-chat-reply-btn--external .sr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sr-modal-chat-reply-btn--external:hover .sr-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.sr-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.sr-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.sr-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.sr-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.sr-modal-chat-textarea-wrapper {
  position: relative;
}

.sr-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.sr-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sr-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.sr-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.sr-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.sr-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sr-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.sr-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.sr-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.sr-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.sr-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.sr-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.sr-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.sr-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.sr-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.sr-modal-tab-content--display .sr-modal-table-empty-state-title {
  color: #666666;
}

.sr-modal-tab-content--display .sr-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.sr-modal-partner-header-section + .sr-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.sr-modal-partner-header-section + .sr-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.sr-modal-partner-header-section + .sr-modal-item-content-section .sr-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.sr-modal-partner-header-section + .sr-modal-item-content-section .sr-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.sr-modal-partner-header-section + .sr-modal-item-content-section .sr-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.sr-modal-partner-header-section + .sr-modal-item-content-section .sr-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.sr-modal-partner-header-section + .sr-modal-item-content-section .sr-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.sr-modal-partner-table-container .sr-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.sr-modal-partner-table-container .sr-modal-partner-table th:last-child,
.sr-modal-partner-table-container .sr-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.sr-modal-detail-table-container--external.sr-modal-partner-table-container .sr-modal-partner-table th:last-child,
.sr-modal-detail-table-container--external.sr-modal-partner-table-container .sr-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.sr-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sr-modal-item-header-section .sr-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-tab-content--display .sr-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.sr-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.sr-modal-tab-content--display .sr-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.sr-modal-item-header-section--external .sr-modal-form-input:focus {
  border-color: #F5B041;
}

.sr-modal-item-header-section--external .sr-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.sr-modal-detail-subtabs--external .sr-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.sr-modal-detail-subtabs--external .sr-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.sr-modal-detail-subtabs--external .sr-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.sr-modal-tab-content--display .sr-modal-detail-subtabs--external .sr-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.sr-modal-tab-content--display .sr-modal-detail-subtabs--external .sr-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.sr-modal-tab-content.sr-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.sr-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.sr-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.sr-modal-item-table-wrapper .sr-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.sr-modal-item-table-wrapper .sr-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.sr-modal-item-table-wrapper--terms .sr-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.sr-modal-tab-content--external.sr-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.sr-modal-tab-content--external .sr-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-tab-content--external .sr-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-tab-content--external .sr-modal-item-table-wrapper--terms .sr-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.sr-modal-tab-content--external .sr-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.sr-modal-item-table-wrapper--terms .sr-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.sr-modal-item-table-wrapper--terms .sr-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sr-modal-item-table-wrapper--terms .sr-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.sr-modal-item-table-wrapper--terms .sr-modal-detail-table tr {
  height: auto;
}

.sr-modal-item-table-wrapper--terms .sr-modal-detail-table-container .sr-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.sr-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.sr-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.sr-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.sr-modal-volume-input-group .sr-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.sr-modal-volume-input-group .sr-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.sr-modal-volume-input-group .sr-modal-sla-input-wrapper .sr-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.sr-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.sr-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.sr-modal-volume-uom-list--display .sr-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-volume-uom-list--display .sr-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.sr-modal-volume-uom-list--display .sr-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-volume-uom-list--display .sr-modal-volume-uom-check {
  color: #999999 !important;
}

.sr-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.sr-modal-volume-uom-dropdown--display .sr-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sr-modal-volume-uom-dropdown--display .sr-modal-volume-uom-item:hover {
  background-color: transparent;
}

.sr-modal-volume-uom-dropdown--display .sr-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.sr-modal-volume-uom-dropdown--display .sr-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.sr-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.sr-modal-weight-input-group .sr-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.sr-modal-weight-input-group .sr-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.sr-modal-weight-input-group .sr-modal-sla-input-wrapper .sr-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.sr-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.sr-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-weight-uom-input::placeholder {
  color: #999999;
}

.sr-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.sr-modal-weight-uom-dropdown--display .sr-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.sr-modal-weight-uom-dropdown--display .sr-modal-weight-uom-item:hover {
  background-color: transparent;
}

.sr-modal-weight-uom-dropdown--display .sr-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.sr-modal-weight-uom-dropdown--display .sr-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.sr-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.sr-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.sr-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.sr-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.sr-modal-form-input--display ~ .sr-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.sr-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.sr-modal-form-input--display {
  cursor: default;
}

.sr-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.sr-modal-form-label--display {
  color: #333333 !important;
}

.sr-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.sr-modal-form-label--display .sr-modal-required {
  color: #FF4D4F;
}

.sr-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.sr-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.sr-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.sr-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.sr-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.sr-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.sr-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sr-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.sr-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.sr-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.sr-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.sr-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.sr-modal-sla-spinner-btn:disabled .sr-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sr-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sla-spinner-btn:hover .sr-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.sr-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.sr-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.sr-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.sr-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.sr-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.sr-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.sr-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.sr-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.sr-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.sr-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.sr-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.sr-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.sr-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.sr-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.sr-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.sr-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.sr-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.sr-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.sr-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.sr-modal-stage-dropdown-input--display .sr-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.sr-modal-stage-dropdown-input--display .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.sr-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.sr-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.sr-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.sr-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.sr-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sr-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.sr-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.sr-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.sr-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.sr-modal-accordion-header--display {
  color: #333333;
}

.sr-modal-accordion-header--display.sr-modal-accordion-header--active {
  color: #333333;
}

.sr-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.sr-modal-accordion-header--display .sr-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.sr-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.sr-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.sr-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.sr-modal-stage-main-title--display {
  color: #138B4C;
}

.sr-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-stage-title--display {
  color: #333333;
}

.sr-modal-stage-current {
  margin-bottom: 1.875rem;
}

.sr-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.sr-modal-stage-label--display {
  color: #666666;
}

.sr-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-stage-subtitle--display {
  color: #333333;
}

.sr-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.sr-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.sr-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.sr-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.sr-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.sr-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sr-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.sr-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.sr-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sr-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.sr-modal-download-button:active {
  background-color: #E0E0E0;
}

.sr-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-download-button--display .sr-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.sr-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.sr-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.sr-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.sr-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.sr-modal-timeline-item--display .sr-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.sr-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.sr-modal-timeline-badge--inactive .sr-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.sr-modal-timeline-item--display .sr-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.sr-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.sr-modal-timeline-item--display .sr-modal-timeline-line {
  background-color: #138B4C;
}

.sr-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sr-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.sr-modal-timeline-status--display {
  color: #333333;
}

.sr-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.sr-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.sr-modal-timeline-date--display {
  color: #666666;
}

.sr-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.sr-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.sr-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.sr-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sr-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.sr-modal-timeline-document--display {
  color: #138B4C;
}

.sr-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.sr-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.sr-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.sr-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.sr-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.sr-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.sr-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.sr-modal-activity-item--display .sr-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.sr-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.sr-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.sr-modal-activity-item--display .sr-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.sr-modal-activity-item--display .sr-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.sr-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.sr-modal-activity-item--display .sr-modal-activity-line {
  background-color: #138B4C;
}

.sr-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.sr-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.sr-modal-activity-type--display {
  color: #333333;
}

.sr-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.sr-modal-activity-header--display {
  color: #666666;
}

.sr-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.sr-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.sr-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.sr-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.sr-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.sr-modal-activity-change--display .sr-modal-activity-field {
  color: #333333;
}

.sr-modal-activity-change--display .sr-modal-activity-new {
  color: #138B4C;
}

.sr-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.sr-modal-activity-date--display {
  color: #666666;
}

.sr-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.sr-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.sr-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sr-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.sr-modal-activity-more--display {
  color: #138B4C;
}

.sr-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-activity-more--display .sr-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.sr-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.sr-modal-reference-table thead {
  background-color: #F9F9F9;
}

.sr-modal-tab-content--display .sr-modal-reference-table thead {
  background-color: #FAFAFA;
}

.sr-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.sr-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.sr-modal-tab-content--display .sr-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.sr-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.sr-modal-tab-content--display .sr-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.sr-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.sr-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.sr-modal-detail-subtab:hover {
  color: #138B4C;
}

.sr-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.sr-modal-tab-content--display .sr-modal-detail-subtab {
  color: #666666;
}

.sr-modal-tab-content--display .sr-modal-detail-subtab:hover {
  color: #138B4C;
}

.sr-modal-tab-content--display .sr-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.sr-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.sr-modal-tab-content.sr-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.sr-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-detail-delivery-wrapper .sr-modal-form-label {
  flex-shrink: 0;
}

.sr-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.sr-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.sr-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.sr-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sr-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sr-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sr-modal-detail-table-container .sr-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sr-modal-detail-table-container .sr-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sr-modal-detail-table-container .sr-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.sr-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.sr-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.sr-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.sr-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.sr-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.sr-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.sr-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-detail-table th,
.sr-modal-tab-content--display .sr-modal-packaging-table th,
.sr-modal-tab-content--display .sr-modal-partner-table th,
.sr-modal-tab-content--display .sr-modal-attachment-table th {
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-detail-table td,
.sr-modal-tab-content--display .sr-modal-packaging-table td,
.sr-modal-tab-content--display .sr-modal-partner-table td,
.sr-modal-tab-content--display .sr-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-description,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-text,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-batch,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-serial,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-so-item,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-package-no,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-product-type,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-product-group,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-product-category,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sr-modal-tab-content--display .sr-modal-detail-table tbody tr:hover .sr-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-description,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-text,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-batch,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-serial,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-so-item,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-package-no,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-type,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-group,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-category,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .sr-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.sr-modal-detail-table-container .sr-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.sr-modal-detail-table-container .sr-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.sr-modal-detail-table-container--external .sr-modal-detail-table td {
  color: #555555 !important;
}

.sr-modal-detail-table-container .sr-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.sr-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.sr-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.sr-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.sr-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.sr-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.sr-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.sr-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Service Request No. column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.sr-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.sr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sr-modal-detail-table tbody tr:hover .detail-table-description,
.sr-modal-detail-table tbody tr:hover .detail-table-text,
.sr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sr-modal-detail-table tbody tr:hover .detail-table-batch,
.sr-modal-detail-table tbody tr:hover .detail-table-serial,
.sr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sr-modal-detail-table tbody tr:hover .detail-table-so-item,
.sr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sr-modal-detail-table tbody tr:hover .detail-table-package-no,
.sr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sr-modal-detail-table tbody tr:hover .detail-table-product-type,
.sr-modal-detail-table tbody tr:hover .detail-table-product-group,
.sr-modal-detail-table tbody tr:hover .detail-table-product-category,
.sr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sr-modal-detail-table tbody tr:hover .sr-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-description,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-text,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-available-qty,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-batch,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-serial,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-sales-order,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-so-item,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-pr-item,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-package-no,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-type,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-group,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-category,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .detail-table-product-variant,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .sr-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.sr-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.sr-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.sr-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.sr-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.sr-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.sr-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sr-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.sr-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.sr-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.sr-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.sr-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.sr-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.sr-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.sr-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.sr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.sr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.sr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.sr-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.sr-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.sr-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.sr-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.sr-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sr-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.sr-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sr-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.sr-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.sr-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sr-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.sr-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.sr-modal-add-item-btn--disabled .sr-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.sr-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Service Request Table - Same style as Detail Delivery Table */
.sr-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.sr-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.sr-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sr-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sr-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.sr-modal-sales-order-table-container .sr-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.sr-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.sr-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.sr-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.sr-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.sr-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.sr-modal-table-input:focus {
  outline: none;
}

.sr-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.sr-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.sr-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.sr-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.sr-modal-tags-container {
  position: relative;
  width: 100%;
}

.sr-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sr-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sr-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.sr-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.sr-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sr-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.sr-modal-tags-input--display .sr-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.sr-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.sr-modal-tag-remove:hover {
  color: #333333;
}

.sr-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.sr-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sr-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.sr-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.sr-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.sr-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.sr-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.sr-modal-status-container {
  position: relative;
  width: 100%;
}

.sr-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sr-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sr-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.sr-modal-status-placeholder {
  color: #999999;
}

.sr-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.sr-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sr-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sr-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-status-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-status-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.sr-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.sr-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.sr-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.sr-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.sr-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.sr-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.sr-modal-status-input--display .sr-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.sr-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.sr-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sr-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.sr-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.sr-modal-stage-dropdown-placeholder {
  color: #999999;
}

.sr-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.sr-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.sr-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sr-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.sr-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.sr-modal-stage--created .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.sr-modal-stage--approved .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.sr-modal-stage--processed .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.sr-modal-stage--picked .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.sr-modal-stage--packed .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.sr-modal-stage--planned .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.sr-modal-stage--loaded .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.sr-modal-stage--issued .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.sr-modal-stage--departed .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.sr-modal-stage--arrived .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.sr-modal-stage--unloaded .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.sr-modal-stage--delivered .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.sr-modal-stage--confirmed .sr-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.sr-modal-stage--billed .sr-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.sr-modal-stage-dropdown-input .sr-modal-stage,
.sr-modal-stage-dropdown-item .sr-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.sr-modal-baseline-date-dropdown {
  position: relative;
}

.sr-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sr-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.sr-modal-reference-type-dropdown {
  position: relative;
}

.sr-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sr-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.sr-modal-delivery-priority-dropdown {
  position: relative;
}

.sr-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sr-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.sr-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.sr-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.sr-modal-delivery-priority-separator {
  color: #666666;
}

.sr-modal-delivery-priority-name {
  color: #333333;
}

.sr-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.sr-modal-organization-dropdown {
  position: relative;
}

.sr-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.sr-modal-organization-dropdown-content--display .sr-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-organization-dropdown-content--display .sr-modal-organization-item:hover {
  background-color: transparent !important;
}

.sr-modal-organization-dropdown-content--display .sr-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-organization-dropdown-content--display .sr-modal-organization-code,
.sr-modal-organization-dropdown-content--display .sr-modal-organization-name,
.sr-modal-organization-dropdown-content--display .sr-modal-organization-separator {
  color: #999999 !important;
}

.sr-modal-organization-dropdown-content--display .sr-modal-organization-check {
  color: #999999 !important;
}

.sr-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-organization-separator {
  color: #999999;
}

.sr-modal-organization-name {
  color: #333333;
}

.sr-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.sr-modal-sales-structure-dropdown {
  position: relative;
}

.sr-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.sr-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.sr-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-sales-structure-separator {
  color: #999999;
}

.sr-modal-sales-structure-name {
  color: #333333;
}

.sr-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.sr-modal-delivery-type-dropdown {
  position: relative;
}

.sr-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.sr-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sr-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sr-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.sr-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.sr-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.sr-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.sr-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-delivery-type-separator {
  color: #999999;
}

.sr-modal-delivery-type-description {
  color: #333333;
}

.sr-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.sr-modal-content::-webkit-scrollbar,
.sr-modal-stage-content::-webkit-scrollbar,


.sr-modal-content::-webkit-scrollbar-track,
.sr-modal-stage-content::-webkit-scrollbar-track,


.sr-modal-content::-webkit-scrollbar-thumb,
.sr-modal-stage-content::-webkit-scrollbar-thumb,


.sr-modal-content::-webkit-scrollbar-thumb:hover,
.sr-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.sr-modal-sales-channel-dropdown {
  position: relative;
}

.sr-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sr-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-sales-channel-separator {
  color: #999999;
}

.sr-modal-sales-channel-name {
  color: #333333;
}

.sr-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.sr-modal-sales-unit-dropdown {
  position: relative;
}

.sr-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sr-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-sales-unit-separator {
  color: #999999;
}

.sr-modal-sales-unit-name {
  color: #333333;
}

.sr-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.sr-modal-organization-item--placeholder,
.sr-modal-sales-structure-item--placeholder,
.sr-modal-sales-channel-item--placeholder,
.sr-modal-sales-unit-item--placeholder,
.sr-modal-territory-item--placeholder,
.sr-modal-sales-office-item--placeholder,
.sr-modal-sold-to-party-item--placeholder,
.sr-modal-deliver-to-party-item--placeholder,
.sr-modal-attention-to-deliver-item--placeholder,
.sr-modal-incoterm-item--placeholder,
.sr-modal-delivery-point-item--placeholder,
.sr-modal-shipping-point-item--placeholder,
.sr-modal-sales-order-item--placeholder,
.sr-modal-sales-team-item--placeholder,
.sr-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.sr-modal-organization-item--placeholder:hover,
.sr-modal-sales-structure-item--placeholder:hover,
.sr-modal-sales-channel-item--placeholder:hover,
.sr-modal-sales-unit-item--placeholder:hover,
.sr-modal-territory-item--placeholder:hover,
.sr-modal-sales-office-item--placeholder:hover,
.sr-modal-sold-to-party-item--placeholder:hover,
.sr-modal-deliver-to-party-item--placeholder:hover,
.sr-modal-attention-to-deliver-item--placeholder:hover,
.sr-modal-incoterm-item--placeholder:hover,
.sr-modal-delivery-point-item--placeholder:hover,
.sr-modal-shipping-point-item--placeholder:hover,
.sr-modal-sales-order-item--placeholder:hover,
.sr-modal-sales-team-item--placeholder:hover,
.sr-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.sr-modal-sold-to-party-dropdown {
  position: relative;
}

.sr-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-sold-to-party-input:focus,
.sr-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.sr-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.sr-modal-sold-to-party-separator {
  color: #999999;
}

.sr-modal-sold-to-party-name {
  color: #333333;
}

.sr-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.sr-modal-deliver-to-party-dropdown {
  position: relative;
}

.sr-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sr-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.sr-modal-deliver-to-party-separator {
  color: #999999;
}

.sr-modal-deliver-to-party-name {
  color: #333333;
}

.sr-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.sr-modal-attention-to-deliver-dropdown {
  position: relative;
}
.sr-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.sr-modal-attention-to-deliver-separator {
  color: #999999;
}
.sr-modal-attention-to-deliver-name {
  color: #333333;
}
.sr-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.sr-modal-incoterm-dropdown {
  position: relative;
}
.sr-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.sr-modal-incoterm-separator {
  color: #999999;
}
.sr-modal-incoterm-name {
  color: #333333;
}
.sr-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.sr-modal-delivery-point-dropdown {
  position: relative;
}
.sr-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sr-modal-delivery-point-separator {
  color: #999999;
}
.sr-modal-delivery-point-name {
  color: #333333;
}
.sr-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.sr-modal-shipping-point-dropdown {
  position: relative;
}
.sr-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sr-modal-shipping-point-separator {
  color: #999999;
}
.sr-modal-shipping-point-name {
  color: #333333;
}
.sr-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Service Request Dropdown Styles */
.sr-modal-sales-order-dropdown {
  position: relative;
}
.sr-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.sr-modal-sales-order-separator {
  color: #999999;
}
.sr-modal-sales-order-name {
  color: #333333;
}
.sr-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.sr-modal-date-picker {
  position: relative;
}
.sr-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.sr-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.sr-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.sr-modal-date-input::-webkit-datetime-edit-text,
.sr-modal-date-input::-webkit-datetime-edit-month-field,
.sr-modal-date-input::-webkit-datetime-edit-day-field,
.sr-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.sr-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.sr-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.sr-modal-sales-person-dropdown {
  position: relative;
}
.sr-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.sr-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.sr-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.sr-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.sr-modal-sales-person-separator {
  color: #999999;
}
.sr-modal-sales-person-name {
  color: #333333;
}
.sr-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.sr-modal-sales-team-dropdown {
  position: relative;
}
.sr-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.sr-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.sr-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.sr-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.sr-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.sr-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.sr-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sr-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.sr-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.sr-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.sr-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sr-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.sr-modal-sales-team-separator {
  color: #999999;
}
.sr-modal-sales-team-name {
  color: #333333;
}
.sr-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.sr-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.sr-modal-territory-dropdown {
  position: relative;
}

.sr-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sr-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-territory-separator {
  color: #999999;
}

.sr-modal-territory-name {
  color: #333333;
}

.sr-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.sr-modal-sales-office-dropdown {
  position: relative;
}

.sr-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sr-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.sr-modal-sales-office-separator {
  color: #999999;
}

.sr-modal-sales-office-name {
  color: #333333;
}

.sr-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Service Request Section */
.sr-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sr-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.sr-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.sr-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.sr-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sr-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sr-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-table-dropdown-input:focus {
  outline: none;
}

.sr-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.sr-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.sr-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.sr-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.sr-modal-delivery-type-list::-webkit-scrollbar,
.sr-modal-stage-dropdown-list::-webkit-scrollbar,
.sr-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sr-modal-delivery-type-list::-webkit-scrollbar-track,
.sr-modal-stage-dropdown-list::-webkit-scrollbar-track,
.sr-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-delivery-type-list::-webkit-scrollbar-thumb,
.sr-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.sr-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sr-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.sr-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.sr-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.sr-modal-wrapper,
.sr-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.service-request-modal,
.sr-modal-wrapper,
.sr-modal-wrapper *,
.sr-modal-content,
.sr-modal-data-flow-2-container,
.sr-modal-data-flow-container,
.sr-modal-calendar-container,
.sr-modal-calendar-milestones-list,
.sr-modal-calendar-view,
.sr-modal-calendar-yearly,
.sr-modal-calendar-monthly,
.sr-modal-calendar-weekly,
.sr-modal-calendar-weekly-body,
.sr-modal-calendar-daily,
.sr-modal-calendar-daily-timeline,
.sr-modal-calendar-grid,
.sr-modal-calendar-grid-body,
.sr-modal-detail-table-container,
.sr-modal-item-table-wrapper,
.sr-modal-attachment-table-container,
.sr-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.sr-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sr-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sr-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.sr-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.sr-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.sr-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.sr-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.sr-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.sr-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-tab-content--display .sr-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.sr-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-tab-content--display .sr-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.sr-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.sr-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.sr-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) {
  font-weight: 600;
}

.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) .sr-modal-packaging-input,
.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) .sr-modal-packaging-input--display,
.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) .sr-modal-handling-product-input,
.sr-modal-packaging-row--unassigned:not(.sr-modal-packaging-row--expanded) .sr-modal-handling-product-input--display {
  font-weight: 600;
}

.sr-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.sr-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row td.sr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row td.sr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row td.sr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td.sr-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded td.sr-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row--expanded:hover td.sr-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display,
.sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display,
.sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.sr-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.sr-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-tab-content--display .sr-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.sr-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-tab-content--display .sr-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.sr-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.sr-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.sr-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.sr-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.sr-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.sr-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.sr-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.sr-modal-packaging-detail-table th:first-child,
.sr-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.sr-modal-packaging-detail-table th:nth-child(2),
.sr-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.sr-modal-packaging-detail-table th:nth-child(3),
.sr-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.sr-modal-packaging-detail-table td:nth-child(4),
.sr-modal-packaging-detail-table td:nth-child(6),
.sr-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.sr-modal-packaging-detail-table td:nth-child(5),
.sr-modal-packaging-detail-table td:nth-child(7),
.sr-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.sr-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.sr-modal-tab-content--display .sr-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display .sr-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.sr-modal-tab-content--display .sr-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.sr-modal-tab-content--display .sr-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.sr-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.sr-modal-packaging-table td:last-child,
.sr-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.sr-modal-packaging-table td:last-child .sr-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.sr-modal-detail-table-container--external .sr-modal-packaging-table th:last-child,
.sr-modal-detail-table-container--external .sr-modal-packaging-table td.sr-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.sr-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.sr-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sr-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sr-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.sr-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.sr-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.sr-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.sr-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.sr-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.sr-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.sr-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.sr-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.sr-modal-packaging-child-table tr {
  border: none !important;
}

.sr-modal-packaging-child-table thead,
.sr-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.sr-modal-packaging-child-table th:first-child,
.sr-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.sr-modal-packaging-child-table th:nth-child(2),
.sr-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.sr-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.sr-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.sr-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.sr-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.sr-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.sr-modal-packaging-child-table th:nth-child(3),
.sr-modal-packaging-child-table td:nth-child(3),
.sr-modal-packaging-child-table th:nth-child(4),
.sr-modal-packaging-child-table td:nth-child(4),
.sr-modal-packaging-child-table th:nth-child(5),
.sr-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.sr-modal-packaging-child-table th:nth-child(6),
.sr-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.sr-modal-packaging-child-table th:nth-child(7),
.sr-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.sr-modal-detail-table-container--external .sr-modal-packaging-child-table th:last-child,
.sr-modal-detail-table-container--external .sr-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.sr-modal-packaging-child-table td:last-child .sr-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.sr-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.sr-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sr-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.sr-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.sr-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row {
  transition: none !important;
}

.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display,
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display:focus,
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display,
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display:focus,
.sr-modal-tab-content--display .sr-modal-detail-table-container .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display:focus,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display:focus,
.sr-modal-tab-content--display .sr-modal-detail-table-container--external .sr-modal-packaging-table tbody tr.sr-modal-packaging-row:hover td .sr-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.sr-modal-detail-table-container--external .sr-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.sr-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sr-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.sr-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.sr-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.sr-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.sr-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.sr-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.sr-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.sr-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.sr-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.sr-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.sr-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.sr-modal-detail-table-container--external .sr-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.sr-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-item--display {
  color: #999999 !important;
}

.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-code,
.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-name,
.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-separator {
  color: #999999 !important;
}

.sr-modal-handling-product-dropdown-content--display .sr-modal-handling-product-check {
  color: #999999 !important;
}

.sr-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.sr-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.sr-modal-handling-product-dropdown-content--narrow .sr-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.sr-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.sr-modal-packaging-detail-table .sr-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.sr-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.sr-modal-detail-table-container--dropdown-open .sr-modal-detail-table {
  overflow: visible;
}

.sr-modal-detail-table-container--dropdown-open .sr-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.sr-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sr-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sr-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.sr-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.sr-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.sr-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.sr-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.sr-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.sr-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.sr-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.sr-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.sr-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.sr-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.sr-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.sr-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.sr-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.sr-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.sr-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sr-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.sr-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.sr-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-item:hover {
  background-color: transparent;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-item--placeholder {
  display: none;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-code,
.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-name,
.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-separator {
  color: #555555;
}

.sr-modal-handling-product-dropdown-content--view-only .sr-modal-handling-product-check {
  color: #888888;
}

.sr-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.sr-modal-handling-product-separator {
  color: #999999;
}

.sr-modal-handling-product-name {
  color: #333333;
}

.sr-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.sr-modal-handling-product-item--placeholder {
  cursor: default;
}

.sr-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.sr-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.sr-modal-detail-table td:has(.sr-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.sr-modal-detail-table td .sr-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.sr-modal-detail-table td .sr-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.sr-modal-detail-table td .sr-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.sr-modal-detail-table td .sr-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.sr-modal-detail-table td .sr-modal-handling-product-input--display,
.sr-modal-detail-table td .sr-modal-handling-product-input--display:focus,
.sr-modal-detail-table td .sr-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display,
.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display:focus,
.sr-modal-detail-table-container .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display:focus,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover td .sr-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.sr-modal-detail-table td .sr-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.sr-modal-detail-table td .sr-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.sr-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.sr-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.sr-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.sr-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-table-text-icon-btn--filled:not(.sr-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.sr-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.sr-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sr-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.sr-modal-table-text-icon-btn--display.sr-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.sr-modal-table-text-icon-btn--display.sr-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-table-text-icon-btn--display.sr-modal-table-text-icon-btn--external.sr-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.sr-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.sr-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.sr-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.sr-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.sr-modal-serial-assignment-btn {
  width: 10.625rem;
}

.sr-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.sr-modal-batch-assignment-btn--filled .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.sr-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.sr-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.sr-modal-batch-assignment-btn--display .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-batch-assignment-btn--display.sr-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.sr-modal-batch-assignment-btn--display.sr-modal-batch-assignment-btn--filled .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.sr-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.sr-modal-secured-qty-btn.sr-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.sr-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.sr-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.sr-modal-secured-qty-btn--grey .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.sr-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.sr-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.sr-modal-batch-assignment-btn--partial .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.sr-modal-batch-assignment-btn--display.sr-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.sr-modal-batch-assignment-btn--display.sr-modal-batch-assignment-btn--partial .sr-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.sr-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.sr-modal-secured-qty-modal .sr-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.sr-modal-secured-qty-modal .sr-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.sr-modal-secured-qty-modal.sr-modal-batch-assignment-modal--display .sr-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.sr-modal-secured-qty-modal .sr-modal-item-text-content {
  overflow-x: hidden;
}

.sr-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.sr-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.sr-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.sr-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.sr-modal-batch-assignment-modal--display .sr-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.sr-modal-batch-assignment-modal--display .sr-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.sr-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.sr-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.sr-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.sr-modal-secured-qty-lock-btn--open .sr-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.sr-modal-secured-qty-lock-btn--locked .sr-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.sr-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.sr-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.sr-modal-batch-assignment-modal .sr-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.sr-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.sr-modal-batch-assignment-modal .sr-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.sr-modal-batch-assignment-modal .sr-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.sr-modal-batch-assignment-modal.sr-modal-batch-assignment-modal--display .sr-modal-item-text-info {
  background-color: #F2F8EA;
}

.sr-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.sr-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.sr-modal-batch-assignment-info-group {
  flex: 1 1;
}

.sr-modal-batch-assignment-info-group .sr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sr-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.sr-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sr-modal-batch-assignment-table-section .sr-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sr-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.sr-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.sr-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sr-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.sr-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.sr-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.sr-modal-batch-assignment-table th,
.sr-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.sr-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.sr-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.sr-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.sr-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sr-modal-batch-assignment-table tbody td:has(.sr-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.sr-modal-batch-assignment-table tbody td:has(.sr-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.sr-modal-batch-assignment-table tbody td:nth-child(2),
.sr-modal-batch-assignment-table tbody td:nth-child(3),
.sr-modal-batch-assignment-table tbody td:nth-child(4),
.sr-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.sr-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.sr-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.sr-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sr-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.sr-modal-batch-assignment-modal--display .sr-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.sr-modal-batch-assignment-modal--display .sr-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.sr-modal-batch-assignment-modal--display .sr-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-batch-assignment-modal--display .sr-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.sr-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.sr-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.sr-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.sr-modal-batch-assignment-table .sr-modal-placeholder-text {
  color: #CCCCCC;
}

.sr-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.sr-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.sr-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.sr-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.sr-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.sr-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.sr-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.sr-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.sr-modal-batch-assignment-table th.batch-table-frozen-batch,
table.sr-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.sr-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.sr-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.sr-modal-batch-assignment-table td.batch-table-frozen-batch,
table.sr-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.sr-modal-batch-assignment-table th.batch-table-frozen-batch,
table.sr-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.sr-modal-batch-assignment-table th.batch-table-frozen-assign,
table.sr-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.sr-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.sr-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.sr-modal-item-text-info {
  margin-bottom: 1rem;
}

.sr-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.sr-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.sr-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.sr-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.sr-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.sr-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.sr-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.sr-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-item-text-modal .modal-header .modal-title,
.sr-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.sr-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.sr-modal-item-text-label--display {
  color: #333333;
}

.sr-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.sr-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.sr-modal-item-text-modal .sr-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.sr-modal-item-text-modal .sr-modal-item-text-textarea-wrapper .sr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.sr-modal-item-text-textarea {
  overflow-y: auto !important;
}

.sr-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.sr-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sr-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.sr-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.sr-modal-add-do-item-modal .sr-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.sr-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.sr-modal-add-do-item-dropdown-section .sr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.sr-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sr-modal-add-do-item-table-section .sr-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.sr-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.sr-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.sr-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.sr-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.sr-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.sr-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.sr-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.sr-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.sr-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.sr-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.sr-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.sr-modal-detail-table td:first-child .sr-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.sr-modal-detail-table td:first-child .sr-modal-partner-type-input {
  padding-left: 0.625rem;
}

.sr-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.sr-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.sr-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sr-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.sr-modal-partner-type-dropdown--display .sr-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.sr-modal-partner-type-dropdown-content--display .sr-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-partner-type-dropdown-content--display .sr-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.sr-modal-partner-type-dropdown-content--display .sr-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-partner-type-dropdown-content--display .sr-modal-partner-type-check {
  color: #999999 !important;
}

.sr-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.sr-modal-partner-type-dropdown--display .sr-modal-partner-type-value {
  color: #555555;
}

.sr-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.sr-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.sr-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.sr-modal-partner-type-item--placeholder {
  cursor: default;
}

.sr-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.sr-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sr-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.sr-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.sr-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.sr-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.sr-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.sr-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.sr-modal-partner-id-dropdown--display .sr-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-code,
.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-name,
.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-separator {
  color: #999999 !important;
}

.sr-modal-partner-id-dropdown-content--display .sr-modal-partner-id-check {
  color: #999999 !important;
}

.sr-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.sr-modal-partner-id-dropdown--display .sr-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.sr-modal-detail-table tbody tr:hover .sr-modal-partner-type-dropdown--display .sr-modal-partner-type-input-wrapper,
.sr-modal-detail-table tbody tr:hover .sr-modal-partner-id-dropdown--display .sr-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .sr-modal-partner-type-dropdown--display .sr-modal-partner-type-input-wrapper,
.sr-modal-detail-table-container--external .sr-modal-detail-table tbody tr:hover .sr-modal-partner-id-dropdown--display .sr-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.sr-modal-partner-type-arrow--external {
  visibility: hidden;
}

.sr-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.sr-modal-partner-type-dropdown--external .sr-modal-partner-type-value {
  color: #555555;
}

.sr-modal-partner-id-dropdown--external .sr-modal-partner-id-value {
  color: #555555;
}

.sr-modal-detail-table-container--external .sr-modal-detail-table td.sr-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.sr-modal-partner-header-section--external .sr-modal-form-input--display {
  color: #555555;
}

.sr-modal-detail-table td.sr-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.sr-modal-tab-content--display .sr-modal-detail-table td.sr-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.sr-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.sr-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.sr-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.sr-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.sr-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.sr-modal-partner-id-item--placeholder {
  cursor: default;
}

.sr-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.sr-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.sr-modal-partner-id-separator {
  color: #999999;
}

.sr-modal-partner-id-name {
  color: #666666;
}

.sr-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sr-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.sr-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.sr-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sr-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sr-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sr-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.sr-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sr-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sr-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.sr-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.sr-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.sr-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.sr-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.sr-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.sr-modal-data-flow-stage--completed .sr-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sr-modal-data-flow-stage--active .sr-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sr-modal-data-flow-stage--completed .sr-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-data-flow-stage--active .sr-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.sr-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.sr-modal-data-flow-stage--completed .sr-modal-data-flow-stage-label {
  color: #138B4C;
}

.sr-modal-data-flow-stage--active .sr-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.sr-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.sr-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.sr-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.sr-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.sr-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.sr-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sr-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.sr-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.sr-modal-data-flow-document--active .sr-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.sr-modal-data-flow-document-fold {
  display: none;
}

.sr-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.sr-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.sr-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.sr-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.sr-modal-data-flow-document-icon-wrapper--active .sr-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.sr-modal-data-flow-document--active .sr-modal-data-flow-document-title {
  color: #138B4C;
}

.sr-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.sr-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.sr-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.sr-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.sr-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.sr-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.sr-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.sr-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.sr-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sr-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.sr-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.sr-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.sr-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.sr-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.sr-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.sr-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.sr-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.sr-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.sr-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.sr-modal-terms-area-button .sr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.sr-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.sr-modal-tab-content--display .sr-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.sr-modal-tab-content--display .sr-modal-terms-area-button .sr-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.sr-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.sr-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.sr-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sr-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sr-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sr-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.sr-modal-data-flow-2-row {
  display: flex;
}

.sr-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sr-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.sr-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.sr-modal-data-flow-2-row--content .sr-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.sr-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.sr-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.sr-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.sr-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-label {
  color: #333333;
}

.sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage-label {
  color: #999999;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--completed .sr-modal-data-flow-2-stage-label {
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--active .sr-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.sr-modal-tab-content--display .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.sr-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.sr-modal-data-flow-2-row--content .sr-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.sr-modal-data-flow-2-row--content .sr-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sr-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sr-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.sr-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.sr-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.sr-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sr-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.sr-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.sr-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.sr-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-title,
.sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-title {
  color: #333333;
}

.sr-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.sr-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.sr-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.sr-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-title {
  color: #888888;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-title,
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-title {
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--completed .sr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--active .sr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-date {
  color: #333333;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.sr-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.sr-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.sr-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.sr-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.sr-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.sr-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.sr-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sr-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.sr-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.sr-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.sr-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.sr-modal-data-flow-2-grid--external .sr-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.sr-modal-data-flow-2-grid--external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell {
  border-bottom: none;
}

.sr-modal-data-flow-2-grid--external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.sr-modal-data-flow-2-grid--external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell--label::after {
  display: none;
}

.sr-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.sr-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.sr-modal-data-flow-2-row--content-top .sr-modal-data-flow-2-document--buyer.sr-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.sr-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.sr-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sr-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.sr-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.sr-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.sr-modal-data-flow-2-stage--external-completed .sr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.sr-modal-data-flow-2-stage--external-active .sr-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.sr-modal-data-flow-2-stage--external-completed .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.sr-modal-data-flow-2-stage--external-active .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.sr-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.sr-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sr-modal-data-flow-2-document--external .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.sr-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.sr-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.sr-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.sr-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.sr-modal-data-flow-2-document--external .sr-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.sr-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.sr-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sr-modal-data-flow-2-document--supplier .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.sr-modal-data-flow-2-document--supplier .sr-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.sr-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.sr-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.sr-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.sr-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier .sr-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier .sr-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-completed .sr-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--supplier-active .sr-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.sr-modal-tab-content--data-flow-2-external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.sr-modal-tab-content--data-flow-2-external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external .sr-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external .sr-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.sr-modal-tab-content--display.sr-modal-tab-content--data-flow-2-external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.sr-modal-tab-content--display.sr-modal-tab-content--data-flow-2-external .sr-modal-data-flow-2-row--header .sr-modal-data-flow-2-cell:has(.sr-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-circle,
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external-completed .sr-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external-active .sr-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-icon,
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external-completed .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external-active .sr-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-stage--external .sr-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-completed .sr-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.sr-modal-tab-content--display .sr-modal-data-flow-2-document--external-active .sr-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.sr-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.sr-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.sr-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.sr-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.sr-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.sr-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sr-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sr-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sr-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.sr-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.sr-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.sr-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.sr-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.sr-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sr-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.sr-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.sr-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.sr-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.sr-modal-milestone-date-value {
  color: #666666;
}

.sr-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.sr-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.sr-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.sr-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.sr-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.sr-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sr-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.sr-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sr-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.sr-modal-activity-item--display .sr-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.sr-modal-calendar-milestones .sr-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.sr-modal-calendar-milestones .sr-modal-activity-user:hover {
  text-decoration: none;
}

.sr-modal-calendar-milestones .sr-modal-activity-item--display .sr-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.sr-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.sr-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sr-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.sr-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.sr-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-calendar-nav-btn:hover .sr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.sr-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.sr-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.sr-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.sr-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.sr-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.sr-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.sr-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.sr-modal-calendar-view-mode-btn--active + .sr-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.sr-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sr-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.sr-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.sr-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.sr-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sr-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sr-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.sr-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.sr-modal-calendar-grid-cell:nth-child(7n-1),
.sr-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.sr-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.sr-modal-calendar-grid-day-name:nth-child(6),
.sr-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.sr-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.sr-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sr-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.sr-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.sr-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.sr-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.sr-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.sr-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.sr-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sr-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.sr-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sr-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.sr-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.sr-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.sr-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sr-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.sr-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.sr-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.sr-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sr-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.sr-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sr-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sr-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.sr-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.sr-modal-calendar-weekly-day-column:nth-child(6),
.sr-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.sr-modal-calendar-weekly-day-header:nth-child(6),
.sr-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.sr-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.sr-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sr-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sr-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.sr-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sr-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sr-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.sr-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.sr-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sr-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.sr-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.sr-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.sr-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.sr-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.sr-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.sr-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.sr-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.sr-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.sr-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sr-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.sr-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.sr-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sr-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sr-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.sr-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-view {
  border-color: #D0D0D0;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-view-mode-btn--active + .sr-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-milestones-header {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-view-title {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-grid-day-name {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-grid-cell-day {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-weekly-day-name {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-weekly-day-date {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-weekly-event-title {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-daily-header {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-daily-hour-label {
  color: #666666;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-daily-event-title {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar .sr-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.sr-modal-calendar-milestones-header--external {
  color: #333333;
}

.sr-modal-calendar-nav-btn--external .sr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sr-modal-calendar-nav-btn--external:hover .sr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.sr-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.sr-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.sr-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.sr-modal-calendar-view-mode-btn--active-external + .sr-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.sr-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.sr-modal-tab-content--calendar-external .sr-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.sr-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.sr-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.sr-modal-activity-type--external {
  color: #333333;
}

.sr-modal-activity-user--external {
  color: #E67E22;
}

.sr-modal-activity-user--external:hover {
  color: #D35400;
}

.sr-modal-calendar-milestones .sr-modal-activity-user--external {
  color: #E67E22;
}

.sr-modal-calendar-milestones .sr-modal-activity-user--external:hover {
  color: #D35400;
}

.sr-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.sr-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sr-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sr-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sr-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.sr-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sr-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sr-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sr-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.sr-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.sr-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.sr-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.sr-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-milestones-header--external {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-view-mode-btn--active-external + .sr-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-calendar-nav-btn--external .sr-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-activity-type--external {
  color: #333333;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-activity-user--external {
  color: #E67E22;
}

.sr-modal-tab-content--display.sr-modal-tab-content--calendar-external .sr-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.sr-modal-input--error,
.sr-modal-form-input.sr-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.sr-modal-dropdown--error .sr-modal-delivery-type-input,
.sr-modal-dropdown--error .sr-modal-organization-input,
.sr-modal-dropdown--error .sr-modal-sales-structure-input,
.sr-modal-dropdown--error .sr-modal-sales-channel-input,
.sr-modal-dropdown--error .sr-modal-sales-unit-input,
.sr-modal-dropdown--error .sr-modal-territory-input,
.sr-modal-dropdown--error .sr-modal-sales-office-input,
.sr-modal-dropdown--error .sr-modal-sold-to-party-input,
.sr-modal-dropdown--error .sr-modal-deliver-to-party-input,
.sr-modal-dropdown--error .sr-modal-attention-to-deliver-input,
.sr-modal-dropdown--error .sr-modal-incoterm-input,
.sr-modal-dropdown--error .sr-modal-delivery-point-input,
.sr-modal-dropdown--error .sr-modal-shipping-point-input,
.sr-modal-dropdown--error .sr-modal-sales-order-input,
.sr-modal-dropdown--error .sr-modal-sales-team-input,
.sr-modal-dropdown--error .sr-modal-sales-person-input,
.sr-modal-dropdown--error .sr-modal-delivery-priority-input,
.sr-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.sr-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.sr-modal-date-picker-wrapper.sr-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.sr-modal-custom-dropdown {
  position: relative;
}

.sr-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.sr-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.sr-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.sr-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-check {
  color: #999999 !important;
}

.sr-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.sr-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.sr-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.sr-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.sr-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sr-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.sr-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sr-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.sr-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sr-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sr-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.sr-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.sr-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sr-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.sr-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.sr-modal-setting-form-label--display {
  color: #333333;
}

.sr-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.sr-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-setting-dropdown--active .sr-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.sr-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.sr-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.sr-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.sr-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.sr-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.sr-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.sr-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-setting-dropdown-icon.sr-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.sr-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.sr-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.sr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.sr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.sr-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.sr-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.sr-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.sr-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.sr-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.sr-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.sr-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.sr-modal-setting-dropdown-item-separator {
  color: #999999;
}

.sr-modal-setting-dropdown-item-name {
  color: #333333;
}

.sr-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.sr-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.sr-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.sr-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.sr-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.sr-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.sr-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.sr-modal-setting-tab-content--print .sr-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.sr-modal-setting-tab-content--print .sr-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sr-modal-setting-tab-content--print .sr-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.sr-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.sr-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.sr-modal-setting-table thead tr {
  height: 2.25rem;
}

.sr-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.sr-modal-setting-table tbody tr {
  height: 2.25rem;
}

.sr-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.sr-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.sr-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.sr-modal-setting-table--display thead th:nth-child(2),
.sr-modal-setting-table--display thead th:nth-child(3),
.sr-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.sr-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.sr-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.sr-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.sr-modal-setting-table--transfer.sr-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.sr-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.sr-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sr-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.sr-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.sr-modal-setting-table--transfer:not(.sr-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.sr-modal-setting-table--transfer:not(.sr-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.sr-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.sr-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.sr-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.sr-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.sr-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.sr-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sr-modal-tab-content--display .sr-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.sr-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.sr-modal-tab-content--display .sr-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.sr-modal-attribute-header-section--external .sr-modal-form-input:focus {
  border-color: #F5B041;
}

.sr-modal-attribute-header-section--external .sr-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.sr-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.sr-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.sr-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.sr-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.sr-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.sr-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.sr-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.sr-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.sr-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.sr-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.sr-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.sr-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.sr-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.sr-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.sr-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.sr-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.sr-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.sr-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.sr-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.sr-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.sr-modal-available-qty-tree-level {
  position: relative;
}

.sr-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.sr-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.sr-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.sr-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.sr-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.sr-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.sr-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.sr-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.sr-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.sr-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.sr-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.sr-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.sr-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.sr-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.sr-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.sr-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.sr-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.sr-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.sr-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.sr-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.sr-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.sr-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.sr-modal-available-qty-tree-batch-header .sr-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.sr-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.sr-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.sr-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.sr-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.sr-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.sr-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.sr-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.sr-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.sr-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.sr-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.sr-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.sr-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.sr-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.sr-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sr-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.sr-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.sr-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.sr-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.sr-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.sr-modal-activity-type--clickable.sr-modal-activity-type--display:hover {
  color: #138B4C;
}

.sr-modal-activity-type--clickable.sr-modal-activity-type--external:hover {
  color: #E67E00;
}

.sr-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sr-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.sr-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sr-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.sr-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.sr-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.sr-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sr-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to sr-modal-form-label */
.sr-modal-activity-detail-content .sr-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.sr-modal-activity-detail-modal .sr-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.sr-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.sr-modal-activity-detail-modal .sr-modal-tabs--display .sr-modal-tab {
  color: #333333;
}

.sr-modal-activity-detail-modal .sr-modal-tabs--display .sr-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.sr-modal-activity-detail-modal .sr-modal-tabs--external.sr-modal-tabs--display .sr-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.sr-modal-activity-detail-tab-content--general .sr-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.sr-modal-activity-detail-content .sr-modal-milestone-status {
  margin: 0;
}

.sr-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.sr-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.sr-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.sr-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.sr-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.sr-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.sr-modal-activity-detail-pic-chat-wrapper:hover .sr-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.sr-modal-activity-detail-pic-chat-wrapper:hover .sr-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.sr-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.sr-modal-activity-detail-pic--clickable:hover .sr-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.sr-modal-activity-detail-content--external .sr-modal-activity-detail-pic {
  color: #E67E22;
}

.sr-modal-activity-detail-content--external .sr-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.sr-modal-activity-detail-content--external .sr-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.sr-modal-activity-detail-content--external .sr-modal-activity-detail-pic--clickable:hover .sr-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.sr-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.sr-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.sr-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.sr-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.sr-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.sr-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.sr-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.sr-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.sr-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.sr-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.sr-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sr-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.sr-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.sr-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.sr-modal-activity-detail-content--external .sr-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.sr-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.sr-modal-activity-detail-content--external .sr-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.sr-modal-activity-detail-content--external .sr-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.sr-modal-activity-detail-content--external .sr-modal-activity-detail-document-name {
  color: #E67E22;
}

.sr-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.sr-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.sr-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.sr-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.sr-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.sr-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.sr-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sr-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.sr-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.sr-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.sr-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.sr-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.sr-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.sr-modal-activity-detail-tab-content--general {
  padding: 0;
}

.sr-modal-activity-detail-tab-content--general .sr-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.sr-modal-activity-detail-tab-content--general > div:not(.sr-modal-item-text-info) {
  padding: 0 1.5rem;
}

.sr-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.sr-modal-activity-detail-tab-content--attachment,
.sr-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.sr-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.sr-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.sr-modal-activity-detail-tab-content--attachment .sr-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.sr-modal-activity-detail-tab-content--attachment .sr-modal-batch-assignment-table-section > .sr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sr-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.sr-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.sr-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.sr-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.sr-modal-activity-detail-content--external .sr-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.sr-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.sr-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.sr-modal-activity-detail-content--external .sr-modal-item-text-info {
  background-color: #FEF5E7;
}

.sr-modal-activity-detail-content--external .sr-modal-task-notes-section {
  background-color: #FEF5E7;
}

.sr-modal-task-notes-section .sr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sr-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.sr-modal-task-notes-textarea.sr-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.sr-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.sr-modal-task-chat-section > .sr-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sr-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.sr-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.sr-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sr-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sr-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.sr-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.sr-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.sr-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.sr-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sr-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.sr-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.sr-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.sr-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.sr-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.sr-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.sr-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.sr-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.sr-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.sr-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.sr-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.sr-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.sr-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.sr-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.sr-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.sr-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.sr-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.sr-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.sr-modal-activity-detail-content--external .sr-modal-task-chat-avatar {
  background-color: #F5B041;
}

.sr-modal-activity-detail-content--external .sr-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.sr-modal-activity-detail-content--external .sr-modal-task-chat-reply-btn {
  color: #E67E22;
}

.sr-modal-activity-detail-content--external .sr-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.sr-modal-dropdown--display .sr-modal-dropdown-item,
.sr-modal-dropdown--display [class*="-item"],
.sr-modal-tags-dropdown--display .sr-modal-tags-dropdown-item,
.sr-modal-baseline-date-dropdown--display .sr-modal-baseline-date-item,
.sr-modal-reference-type-dropdown--display .sr-modal-reference-type-item,
.sr-modal-delivery-priority-dropdown--display .sr-modal-delivery-priority-item,
.sr-modal-organization-dropdown--display .sr-modal-organization-item,
.sr-modal-sales-structure-dropdown--display .sr-modal-sales-structure-item,
.sr-modal-delivery-type-dropdown--display .sr-modal-delivery-type-item,
.sr-modal-sales-channel-dropdown--display .sr-modal-sales-channel-item,
.sr-modal-sales-unit-dropdown--display .sr-modal-sales-unit-item,
.sr-modal-sold-to-party-dropdown--display .sr-modal-sold-to-party-item,
.sr-modal-deliver-to-party-dropdown--display .sr-modal-deliver-to-party-item,
.sr-modal-attention-to-deliver-dropdown--display .sr-modal-attention-to-deliver-item,
.sr-modal-incoterm-dropdown--display .sr-modal-incoterm-item,
.sr-modal-delivery-point-dropdown--display .sr-modal-delivery-point-item,
.sr-modal-shipping-point-dropdown--display .sr-modal-shipping-point-item,
.sr-modal-sales-order-dropdown--display .sr-modal-sales-order-item,
.sr-modal-sales-person-dropdown--display .sr-modal-sales-person-item,
.sr-modal-sales-team-dropdown--display .sr-modal-sales-team-item,
.sr-modal-territory-dropdown--display .sr-modal-territory-item,
.sr-modal-sales-office-dropdown--display .sr-modal-sales-office-item,
.sr-modal-status-dropdown--display .sr-modal-status-item,
.sr-modal-handling-product-dropdown--display .sr-modal-handling-product-item,
.sr-modal-child-uom-dropdown--display .sr-modal-child-uom-item,
.sr-modal-partner-type-dropdown--display .sr-modal-partner-type-item,
.sr-modal-partner-id-dropdown--display .sr-modal-partner-id-item,
.sr-modal-custom-dropdown--display .sr-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.sr-modal-dropdown--display .sr-modal-dropdown-item:hover,
.sr-modal-dropdown--display [class*="-item"]:hover,
.sr-modal-tags-dropdown--display .sr-modal-tags-dropdown-item:hover,
.sr-modal-baseline-date-dropdown--display .sr-modal-baseline-date-item:hover,
.sr-modal-reference-type-dropdown--display .sr-modal-reference-type-item:hover,
.sr-modal-delivery-priority-dropdown--display .sr-modal-delivery-priority-item:hover,
.sr-modal-organization-dropdown--display .sr-modal-organization-item:hover,
.sr-modal-sales-structure-dropdown--display .sr-modal-sales-structure-item:hover,
.sr-modal-delivery-type-dropdown--display .sr-modal-delivery-type-item:hover,
.sr-modal-sales-channel-dropdown--display .sr-modal-sales-channel-item:hover,
.sr-modal-sales-unit-dropdown--display .sr-modal-sales-unit-item:hover,
.sr-modal-sold-to-party-dropdown--display .sr-modal-sold-to-party-item:hover,
.sr-modal-deliver-to-party-dropdown--display .sr-modal-deliver-to-party-item:hover,
.sr-modal-attention-to-deliver-dropdown--display .sr-modal-attention-to-deliver-item:hover,
.sr-modal-incoterm-dropdown--display .sr-modal-incoterm-item:hover,
.sr-modal-delivery-point-dropdown--display .sr-modal-delivery-point-item:hover,
.sr-modal-shipping-point-dropdown--display .sr-modal-shipping-point-item:hover,
.sr-modal-sales-order-dropdown--display .sr-modal-sales-order-item:hover,
.sr-modal-sales-person-dropdown--display .sr-modal-sales-person-item:hover,
.sr-modal-sales-team-dropdown--display .sr-modal-sales-team-item:hover,
.sr-modal-territory-dropdown--display .sr-modal-territory-item:hover,
.sr-modal-sales-office-dropdown--display .sr-modal-sales-office-item:hover,
.sr-modal-status-dropdown--display .sr-modal-status-item:hover,
.sr-modal-handling-product-dropdown--display .sr-modal-handling-product-item:hover,
.sr-modal-child-uom-dropdown--display .sr-modal-child-uom-item:hover,
.sr-modal-partner-type-dropdown--display .sr-modal-partner-type-item:hover,
.sr-modal-partner-id-dropdown--display .sr-modal-partner-id-item:hover,
.sr-modal-custom-dropdown--display .sr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.sr-modal-dropdown--display [class*="-item--selected"],
.sr-modal-tags-dropdown--display .sr-modal-tags-dropdown-item--selected,
.sr-modal-baseline-date-dropdown--display .sr-modal-baseline-date-item--selected,
.sr-modal-reference-type-dropdown--display .sr-modal-reference-type-item--selected,
.sr-modal-delivery-priority-dropdown--display .sr-modal-delivery-priority-item--selected,
.sr-modal-organization-dropdown--display .sr-modal-organization-item--selected,
.sr-modal-sales-structure-dropdown--display .sr-modal-sales-structure-item--selected,
.sr-modal-delivery-type-dropdown--display .sr-modal-delivery-type-item--selected,
.sr-modal-sales-channel-dropdown--display .sr-modal-sales-channel-item--selected,
.sr-modal-sales-unit-dropdown--display .sr-modal-sales-unit-item--selected,
.sr-modal-sold-to-party-dropdown--display .sr-modal-sold-to-party-item--selected,
.sr-modal-deliver-to-party-dropdown--display .sr-modal-deliver-to-party-item--selected,
.sr-modal-attention-to-deliver-dropdown--display .sr-modal-attention-to-deliver-item--selected,
.sr-modal-incoterm-dropdown--display .sr-modal-incoterm-item--selected,
.sr-modal-delivery-point-dropdown--display .sr-modal-delivery-point-item--selected,
.sr-modal-shipping-point-dropdown--display .sr-modal-shipping-point-item--selected,
.sr-modal-sales-order-dropdown--display .sr-modal-sales-order-item--selected,
.sr-modal-sales-person-dropdown--display .sr-modal-sales-person-item--selected,
.sr-modal-sales-team-dropdown--display .sr-modal-sales-team-item--selected,
.sr-modal-territory-dropdown--display .sr-modal-territory-item--selected,
.sr-modal-sales-office-dropdown--display .sr-modal-sales-office-item--selected,
.sr-modal-status-dropdown--display .sr-modal-status-item--selected,
.sr-modal-handling-product-dropdown--display .sr-modal-handling-product-item--selected,
.sr-modal-child-uom-dropdown--display .sr-modal-child-uom-item--selected,
.sr-modal-partner-type-dropdown--display .sr-modal-partner-type-item--selected,
.sr-modal-partner-id-dropdown--display .sr-modal-partner-id-item--selected,
.sr-modal-custom-dropdown--display .sr-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.sr-modal-dropdown--display [class*="-check"],
.sr-modal-dropdown--display .sr-modal-dropdown-check,
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.sr-modal-dropdown--display [class*="-item-code"],
.sr-modal-dropdown--display [class*="-item-name"],
.sr-modal-dropdown--display [class*="-item-content"],
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-code,
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-name,
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-item,
.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.sr-modal-sold-to-party-dropdown-content--display .sr-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.sr-modal-tags-dropdown--display .sr-modal-tags-item,
.sr-modal-tags-dropdown--display .sr-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-tags-dropdown--display .sr-modal-tags-item:hover {
  background-color: transparent !important;
}

.sr-modal-tags-dropdown--display .sr-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.sr-modal-tags-dropdown--display .sr-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item,
.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.sr-modal-custom-dropdown-list--display .sr-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ===== from pages/Sales/Settlement/Settlement.css ===== */
/* Settlement Wrapper - prevent page scroll */
.settlement-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Settlement Container */
.settlement-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.settlement-header {
  margin-bottom: 0;
}

.settlement-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Settlement Control - Exact copy of third-nav-control */
.settlement-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.settlement-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.settlement-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.settlement-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.settlement-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.settlement-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.settlement-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.settlement-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.settlement-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.settlement-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.settlement-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.settlement-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.settlement-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.settlement-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.settlement-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.settlement-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.settlement-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.settlement-layout-dropdown-item:last-child {
  border-bottom: none;
}

.settlement-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.settlement-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.settlement-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.settlement-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.settlement-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.settlement-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.settlement-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.settlement-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settlement-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.settlement-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.settlement-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.settlement-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.settlement-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.settlement-filter-parameter-wrapper {
  position: relative;
}

.settlement-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.settlement-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.settlement-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.settlement-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settlement-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.settlement-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.settlement-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.settlement-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.settlement-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.settlement-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.settlement-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.settlement-filter-close:hover {
  background-color: #f0f0f0;
}

.settlement-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.settlement-filter-group {
  margin-bottom: 1rem;
}

.settlement-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.settlement-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settlement-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.settlement-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.settlement-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.settlement-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.settlement-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.settlement-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.settlement-filter-org-container {
  flex: 1 1;
  position: relative;
}

.settlement-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.settlement-filter-org-input:hover {
  border-color: #C2DE54;
}

.settlement-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.settlement-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.settlement-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.settlement-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.settlement-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.settlement-filter-tag-remove:hover {
  color: #000;
}

.settlement-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.settlement-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.settlement-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.settlement-filter-org-item:hover {
  background-color: #f5f5f5;
}

.settlement-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.settlement-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.settlement-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.settlement-filter-org-code {
  font-weight: 600;
  color: #333;
}

.settlement-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.settlement-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.settlement-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.settlement-type-dropdown-item:last-child {
  border-bottom: none;
}

.settlement-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.settlement-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.settlement-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.settlement-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Settlement Table */
.settlement-table {
  animation: settlementFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes settlementFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .settlement-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .settlement-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .settlement-type-dropdown {
    min-width: 11.25rem;
  }

  .settlement-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Settlement/SettlementModal.css ===== */
/* Delivery Order Modal Specific Styles */
.settlement-modal {
  overscroll-behavior: contain;
}

.settlement-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.st-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.st-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.st-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.st-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.st-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.st-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.st-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.st-modal-pov-button--external.st-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.st-modal-pov-button--external .st-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-pov-button--external .st-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.st-modal-pov-caret--open {
  transform: rotate(180deg);
}

.st-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.st-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.st-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.st-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.st-modal-pov-dropdown-item span {
  flex: 1 1;
}

.st-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.st-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.st-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.st-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.st-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.st-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.st-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.st-modal-tabs--display .st-modal-tab {
  color: #666666;
}

.st-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.st-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.st-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.st-modal-tabs--display .st-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.st-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.st-modal-tabs--external .st-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.st-modal-tabs--external.st-modal-tabs--display .st-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.st-modal-tabs--external .st-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.st-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.st-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.st-modal-action-button span {
  white-space: nowrap;
}

.st-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.st-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.st-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.st-modal-action-button--disabled .st-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.st-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.st-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.st-modal-left-area--full .st-modal-back-button {
  transition: width 300ms ease;
}

.st-modal-left-area--full .st-modal-back-button:hover {
  width: 3.5rem;
}

.st-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.st-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.st-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.st-modal-content--item {
  padding-bottom: 1rem;
}

.st-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.st-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.st-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.st-modal-attachment-table-container .st-modal-detail-table thead,
.st-modal-attachment-table-container .st-modal-attachment-table thead {
  box-shadow: none !important;
}

.st-modal-attachment-table-container .st-modal-detail-table tr,
.st-modal-attachment-table-container .st-modal-attachment-table tr {
  box-shadow: none !important;
}

.st-modal-attachment-table-container .st-modal-detail-table tbody tr:last-child,
.st-modal-attachment-table-container .st-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.st-modal-attachment-table-container .st-modal-detail-table tbody tr:last-child td,
.st-modal-attachment-table-container .st-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.st-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.st-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.st-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.st-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.st-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.st-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.st-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.st-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.st-modal-attachment-filename--external {
  color: #E67E22;
}

.st-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.st-modal-tab-content--display .st-modal-attachment-filename--external {
  color: #E67E22;
}

.st-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.st-modal-attachment-size {
  color: #666666;
}

.st-modal-attachment-date {
  color: #666666;
}

.st-modal-attachment-uploadedby {
  color: #333333;
}

.st-modal-tab-content--display .st-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.st-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.st-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.st-modal-attachment-browse-btn:focus {
  outline: none;
}

.st-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.st-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.st-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-attachment-browse-btn--disabled .st-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.st-modal-tab-content--display .st-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.st-modal-tab-content--display .st-modal-attachment-filename.st-modal-attachment-filename--external {
  color: #E67E22;
}

.st-modal-tab-content--display .st-modal-attachment-type {
  color: #666666;
}

.st-modal-tab-content--display .st-modal-attachment-size {
  color: #666666;
}

.st-modal-tab-content--display .st-modal-attachment-date {
  color: #666666;
}

.st-modal-tab-content--display .st-modal-attachment-uploadedby {
  color: #333333;
}

.st-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.st-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.st-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.st-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.st-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.st-modal-tab-content--display .st-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.st-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.st-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.st-modal-tab-content--display .st-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.st-modal-basic-section--external .st-modal-form-input:focus {
  border-color: #F5B041;
}

.st-modal-basic-section--external .st-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.st-modal-tab-content--external .st-modal-form-input:focus,
.st-modal-tab-content--external .st-modal-form-textarea:focus,
.st-modal-tab-content--external .st-modal-custom-dropdown-input:focus,
.st-modal-tab-content--external .st-modal-date-input:focus,
.st-modal-tab-content--external .st-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.st-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.st-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.st-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.st-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.st-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.st-modal-tab-content--display .st-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.st-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.st-modal-tab-content--display .st-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.st-modal-partner-header-section--external .st-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.st-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.st-modal-tab-content--display .st-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.st-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.st-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.st-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.st-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.st-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.st-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.st-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.st-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.st-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.st-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.st-modal-chat-section {
  padding: 1.5rem 0;
}

.st-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.st-modal-chat-header h3 {
  margin: 0;
}

.st-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.st-modal-chat-new-thread .st-modal-form-textarea {
  min-height: 5rem;
}

.st-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.st-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.st-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.st-modal-chat-message--main {
  background-color: #FAFAFA;
}

.st-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.st-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.st-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.st-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.st-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.st-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.st-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.st-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.st-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.st-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-tab-content--display .st-modal-chat-user-name {
  color: #333333 !important;
}

.st-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.st-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.st-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.st-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.st-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.st-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.st-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.st-modal-chat-reply-btn:hover .st-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.st-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.st-modal-chat-replies .st-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.st-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.st-modal-chat-reply-input .st-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.st-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.st-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.st-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.st-modal-tab-content--display .st-modal-chat-thread {
  border-color: #E5E5E5;
}

.st-modal-tab-content--display .st-modal-chat-message--main {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display .st-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.st-modal-tab-content--display .st-modal-chat-user-position {
  background-color: #E8F5E9;
}

.st-modal-tab-content--display .st-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.st-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.st-modal-tab-content--display .st-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.st-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.st-modal-notes-header-section--external .st-modal-form-textarea:focus {
  border-color: #F5B041;
}

.st-modal-chat-section--external .st-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.st-modal-chat-avatar--external {
  background-color: #F5B041;
}

.st-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.st-modal-tab-content--display .st-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-thread {
  border-color: #E5E5E5;
}

.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-message--main {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-user-name {
  color: #333333 !important;
}

.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-user-position {
  background-color: #FDE8D0;
}

.st-modal-tab-content--display.st-modal-tab-content--external .st-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.st-modal-chat-reply-btn--external {
  color: #E67E22;
}

.st-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.st-modal-chat-reply-btn--external .st-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.st-modal-chat-reply-btn--external:hover .st-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.st-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.st-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.st-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.st-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.st-modal-chat-textarea-wrapper {
  position: relative;
}

.st-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.st-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.st-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.st-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.st-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.st-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.st-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.st-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.st-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.st-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.st-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.st-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.st-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.st-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.st-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.st-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.st-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.st-modal-tab-content--display .st-modal-table-empty-state-title {
  color: #666666;
}

.st-modal-tab-content--display .st-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.st-modal-partner-header-section + .st-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.st-modal-partner-header-section + .st-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.st-modal-partner-header-section + .st-modal-item-content-section .st-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.st-modal-partner-header-section + .st-modal-item-content-section .st-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.st-modal-partner-header-section + .st-modal-item-content-section .st-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.st-modal-partner-header-section + .st-modal-item-content-section .st-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.st-modal-partner-header-section + .st-modal-item-content-section .st-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.st-modal-partner-table-container .st-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.st-modal-partner-table-container .st-modal-partner-table th:last-child,
.st-modal-partner-table-container .st-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.st-modal-detail-table-container--external.st-modal-partner-table-container .st-modal-partner-table th:last-child,
.st-modal-detail-table-container--external.st-modal-partner-table-container .st-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.st-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.st-modal-item-header-section .st-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-tab-content--display .st-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.st-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.st-modal-tab-content--display .st-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.st-modal-item-header-section--external .st-modal-form-input:focus {
  border-color: #F5B041;
}

.st-modal-item-header-section--external .st-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.st-modal-detail-subtabs--external .st-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.st-modal-detail-subtabs--external .st-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.st-modal-detail-subtabs--external .st-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.st-modal-tab-content--display .st-modal-detail-subtabs--external .st-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.st-modal-tab-content--display .st-modal-detail-subtabs--external .st-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.st-modal-tab-content.st-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.st-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.st-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.st-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.st-modal-item-table-wrapper .st-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.st-modal-item-table-wrapper .st-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.st-modal-item-table-wrapper--terms .st-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.st-modal-tab-content--external.st-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.st-modal-tab-content--external .st-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.st-modal-tab-content--external .st-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.st-modal-tab-content--external .st-modal-item-table-wrapper--terms .st-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.st-modal-tab-content--external .st-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.st-modal-item-table-wrapper--terms .st-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.st-modal-item-table-wrapper--terms .st-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.st-modal-item-table-wrapper--terms .st-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.st-modal-item-table-wrapper--terms .st-modal-detail-table tr {
  height: auto;
}

.st-modal-item-table-wrapper--terms .st-modal-detail-table-container .st-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.st-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.st-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.st-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.st-modal-volume-input-group .st-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.st-modal-volume-input-group .st-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.st-modal-volume-input-group .st-modal-sla-input-wrapper .st-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.st-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.st-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.st-modal-volume-uom-list--display .st-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-volume-uom-list--display .st-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.st-modal-volume-uom-list--display .st-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-volume-uom-list--display .st-modal-volume-uom-check {
  color: #999999 !important;
}

.st-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.st-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.st-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.st-modal-volume-uom-dropdown--display .st-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.st-modal-volume-uom-dropdown--display .st-modal-volume-uom-item:hover {
  background-color: transparent;
}

.st-modal-volume-uom-dropdown--display .st-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.st-modal-volume-uom-dropdown--display .st-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.st-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.st-modal-weight-input-group .st-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.st-modal-weight-input-group .st-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.st-modal-weight-input-group .st-modal-sla-input-wrapper .st-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.st-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.st-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-weight-uom-input::placeholder {
  color: #999999;
}

.st-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.st-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.st-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.st-modal-weight-uom-dropdown--display .st-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.st-modal-weight-uom-dropdown--display .st-modal-weight-uom-item:hover {
  background-color: transparent;
}

.st-modal-weight-uom-dropdown--display .st-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.st-modal-weight-uom-dropdown--display .st-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.st-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.st-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.st-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.st-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.st-modal-form-input--display ~ .st-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.st-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.st-modal-form-input--display {
  cursor: default;
}

.st-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.st-modal-form-label--display {
  color: #333333 !important;
}

.st-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.st-modal-form-label--display .st-modal-required {
  color: #FF4D4F;
}

.st-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.st-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.st-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.st-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.st-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.st-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.st-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.st-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.st-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.st-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.st-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.st-modal-sla-spinner-btn:disabled .st-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.st-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sla-spinner-btn:hover .st-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.st-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.st-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.st-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.st-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.st-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.st-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.st-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.st-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.st-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.st-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.st-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.st-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.st-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.st-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.st-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.st-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.st-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.st-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.st-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.st-modal-stage-dropdown-input--display .st-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.st-modal-stage-dropdown-input--display .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.st-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.st-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.st-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.st-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.st-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.st-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.st-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.st-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.st-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.st-modal-accordion-header--display {
  color: #333333;
}

.st-modal-accordion-header--display.st-modal-accordion-header--active {
  color: #333333;
}

.st-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.st-modal-accordion-header--display .st-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.st-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.st-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.st-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.st-modal-stage-main-title--display {
  color: #138B4C;
}

.st-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-stage-title--display {
  color: #333333;
}

.st-modal-stage-current {
  margin-bottom: 1.875rem;
}

.st-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.st-modal-stage-label--display {
  color: #666666;
}

.st-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-stage-subtitle--display {
  color: #333333;
}

.st-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.st-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.st-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.st-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.st-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.st-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.st-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.st-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.st-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.st-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.st-modal-download-button:active {
  background-color: #E0E0E0;
}

.st-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-download-button--display .st-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.st-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.st-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.st-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.st-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.st-modal-timeline-item--display .st-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.st-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.st-modal-timeline-badge--inactive .st-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.st-modal-timeline-item--display .st-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.st-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.st-modal-timeline-item--display .st-modal-timeline-line {
  background-color: #138B4C;
}

.st-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.st-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.st-modal-timeline-status--display {
  color: #333333;
}

.st-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.st-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.st-modal-timeline-date--display {
  color: #666666;
}

.st-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.st-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.st-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.st-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.st-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.st-modal-timeline-document--display {
  color: #138B4C;
}

.st-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.st-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.st-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.st-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.st-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.st-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.st-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.st-modal-activity-item--display .st-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.st-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.st-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.st-modal-activity-item--display .st-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.st-modal-activity-item--display .st-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.st-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.st-modal-activity-item--display .st-modal-activity-line {
  background-color: #138B4C;
}

.st-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.st-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.st-modal-activity-type--display {
  color: #333333;
}

.st-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.st-modal-activity-header--display {
  color: #666666;
}

.st-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.st-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.st-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.st-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.st-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.st-modal-activity-change--display .st-modal-activity-field {
  color: #333333;
}

.st-modal-activity-change--display .st-modal-activity-new {
  color: #138B4C;
}

.st-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.st-modal-activity-date--display {
  color: #666666;
}

.st-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.st-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.st-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.st-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.st-modal-activity-more--display {
  color: #138B4C;
}

.st-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-activity-more--display .st-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.st-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.st-modal-reference-table thead {
  background-color: #F9F9F9;
}

.st-modal-tab-content--display .st-modal-reference-table thead {
  background-color: #FAFAFA;
}

.st-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.st-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.st-modal-tab-content--display .st-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.st-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.st-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.st-modal-tab-content--display .st-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.st-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.st-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.st-modal-detail-subtab:hover {
  color: #138B4C;
}

.st-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.st-modal-tab-content--display .st-modal-detail-subtab {
  color: #666666;
}

.st-modal-tab-content--display .st-modal-detail-subtab:hover {
  color: #138B4C;
}

.st-modal-tab-content--display .st-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.st-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.st-modal-tab-content.st-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.st-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.st-modal-detail-delivery-wrapper .st-modal-form-label {
  flex-shrink: 0;
}

.st-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.st-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.st-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.st-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.st-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.st-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.st-modal-detail-table-container .st-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.st-modal-detail-table-container .st-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.st-modal-detail-table-container .st-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.st-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.st-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.st-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.st-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.st-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.st-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.st-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-detail-table th,
.st-modal-tab-content--display .st-modal-packaging-table th,
.st-modal-tab-content--display .st-modal-partner-table th,
.st-modal-tab-content--display .st-modal-attachment-table th {
  color: #333333;
}

.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-detail-table td,
.st-modal-tab-content--display .st-modal-packaging-table td,
.st-modal-tab-content--display .st-modal-partner-table td,
.st-modal-tab-content--display .st-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-description,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-text,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-available-qty,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-batch,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-serial,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-sales-order,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-so-item,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-pr-item,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-package-no,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-product-type,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-product-group,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-product-category,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .detail-table-product-variant,
.st-modal-tab-content--display .st-modal-detail-table tbody tr:hover .st-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-description,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-text,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-available-qty,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-batch,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-serial,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-sales-order,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-so-item,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-pr-item,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-package-no,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-type,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-group,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-category,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-variant,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .st-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.st-modal-detail-table-container .st-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.st-modal-detail-table-container .st-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.st-modal-detail-table-container .st-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.st-modal-detail-table-container .st-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.st-modal-detail-table-container .st-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.st-modal-detail-table-container--external .st-modal-detail-table td {
  color: #555555 !important;
}

.st-modal-detail-table-container .st-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.st-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.st-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.st-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.st-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.st-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.st-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.st-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.st-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.st-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.st-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Settlement No. column - non-editable style */
.st-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.st-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.st-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.st-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.st-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.st-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.st-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.st-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.st-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.st-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.st-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.st-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.st-modal-detail-table tbody tr:hover .detail-table-description,
.st-modal-detail-table tbody tr:hover .detail-table-text,
.st-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.st-modal-detail-table tbody tr:hover .detail-table-available-qty,
.st-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.st-modal-detail-table tbody tr:hover .detail-table-batch,
.st-modal-detail-table tbody tr:hover .detail-table-serial,
.st-modal-detail-table tbody tr:hover .detail-table-sales-order,
.st-modal-detail-table tbody tr:hover .detail-table-so-item,
.st-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.st-modal-detail-table tbody tr:hover .detail-table-pr-item,
.st-modal-detail-table tbody tr:hover .detail-table-package-no,
.st-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.st-modal-detail-table tbody tr:hover .detail-table-product-type,
.st-modal-detail-table tbody tr:hover .detail-table-product-group,
.st-modal-detail-table tbody tr:hover .detail-table-product-category,
.st-modal-detail-table tbody tr:hover .detail-table-product-variant,
.st-modal-detail-table tbody tr:hover .st-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-description,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-text,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-available-qty,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-batch,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-serial,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-sales-order,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-so-item,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-pr-item,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-package-no,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-type,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-group,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-category,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .detail-table-product-variant,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .st-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.st-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.st-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.st-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.st-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.st-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.st-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.st-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.st-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.st-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.st-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.st-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.st-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.st-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.st-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.st-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.st-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.st-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.st-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.st-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.st-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.st-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.st-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.st-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.st-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.st-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.st-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.st-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.st-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.st-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.st-modal-add-item-btn--disabled .st-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.st-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Settlement Table - Same style as Detail Delivery Table */
.st-modal-settlement-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for settlement table */
.st-modal-settlement-table-container::-webkit-scrollbar {
  height: 2px;
}

.st-modal-settlement-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.st-modal-settlement-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.st-modal-settlement-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.st-modal-settlement-table-container .st-modal-settlement-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.st-modal-settlement-table-container .st-modal-settlement-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.st-modal-settlement-table-container .st-modal-settlement-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-settlement-table-container .st-modal-settlement-table tbody {
  background-color: #FFFFFF;
}

.st-modal-settlement-table-container .st-modal-settlement-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.st-modal-settlement-table-container .st-modal-settlement-table tbody tr:last-child {
  border-bottom: none;
}

.st-modal-settlement-table-container .st-modal-settlement-table tbody tr:hover {
  background-color: #F4FAF3;
}

.st-modal-settlement-table-container .st-modal-settlement-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.st-modal-settlement-table-container .st-modal-settlement-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for settlement table */
.st-modal-settlement-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.st-modal-settlement-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.st-modal-settlement-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.st-modal-settlement-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.st-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.st-modal-table-input:focus {
  outline: none;
}

.st-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.st-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.st-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.st-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.st-modal-tags-container {
  position: relative;
  width: 100%;
}

.st-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.st-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.st-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.st-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.st-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.st-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.st-modal-tags-input--display .st-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.st-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.st-modal-tag-remove:hover {
  color: #333333;
}

.st-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.st-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.st-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.st-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.st-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.st-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.st-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.st-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.st-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.st-modal-status-container {
  position: relative;
  width: 100%;
}

.st-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.st-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.st-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.st-modal-status-placeholder {
  color: #999999;
}

.st-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.st-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.st-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.st-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-status-item:hover {
  background-color: #F5F5F5;
}

.st-modal-status-item--selected {
  background-color: #E8F5E9;
}

.st-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.st-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.st-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.st-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.st-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.st-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.st-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.st-modal-status-input--display .st-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.st-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.st-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.st-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.st-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.st-modal-stage-dropdown-placeholder {
  color: #999999;
}

.st-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.st-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.st-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.st-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.st-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.st-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.st-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.st-modal-stage--created .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.st-modal-stage--approved .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.st-modal-stage--processed .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.st-modal-stage--picked .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.st-modal-stage--packed .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.st-modal-stage--planned .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.st-modal-stage--loaded .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.st-modal-stage--issued .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.st-modal-stage--departed .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.st-modal-stage--arrived .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.st-modal-stage--unloaded .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.st-modal-stage--delivered .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.st-modal-stage--confirmed .st-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.st-modal-stage--billed .st-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.st-modal-stage-dropdown-input .st-modal-stage,
.st-modal-stage-dropdown-item .st-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.st-modal-baseline-date-dropdown {
  position: relative;
}

.st-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.st-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.st-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.st-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.st-modal-reference-type-dropdown {
  position: relative;
}

.st-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.st-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.st-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.st-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.st-modal-delivery-priority-dropdown {
  position: relative;
}

.st-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.st-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.st-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.st-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.st-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.st-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.st-modal-delivery-priority-separator {
  color: #666666;
}

.st-modal-delivery-priority-name {
  color: #333333;
}

.st-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.st-modal-organization-dropdown {
  position: relative;
}

.st-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.st-modal-organization-dropdown-content--display .st-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-organization-dropdown-content--display .st-modal-organization-item:hover {
  background-color: transparent !important;
}

.st-modal-organization-dropdown-content--display .st-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-organization-dropdown-content--display .st-modal-organization-code,
.st-modal-organization-dropdown-content--display .st-modal-organization-name,
.st-modal-organization-dropdown-content--display .st-modal-organization-separator {
  color: #999999 !important;
}

.st-modal-organization-dropdown-content--display .st-modal-organization-check {
  color: #999999 !important;
}

.st-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.st-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.st-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-organization-separator {
  color: #999999;
}

.st-modal-organization-name {
  color: #333333;
}

.st-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.st-modal-sales-structure-dropdown {
  position: relative;
}

.st-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.st-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.st-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.st-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.st-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-sales-structure-separator {
  color: #999999;
}

.st-modal-sales-structure-name {
  color: #333333;
}

.st-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.st-modal-delivery-type-dropdown {
  position: relative;
}

.st-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.st-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.st-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.st-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.st-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.st-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.st-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.st-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.st-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.st-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-delivery-type-separator {
  color: #999999;
}

.st-modal-delivery-type-description {
  color: #333333;
}

.st-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.st-modal-content::-webkit-scrollbar,
.st-modal-stage-content::-webkit-scrollbar,


.st-modal-content::-webkit-scrollbar-track,
.st-modal-stage-content::-webkit-scrollbar-track,


.st-modal-content::-webkit-scrollbar-thumb,
.st-modal-stage-content::-webkit-scrollbar-thumb,


.st-modal-content::-webkit-scrollbar-thumb:hover,
.st-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.st-modal-sales-channel-dropdown {
  position: relative;
}

.st-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.st-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.st-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.st-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-sales-channel-separator {
  color: #999999;
}

.st-modal-sales-channel-name {
  color: #333333;
}

.st-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.st-modal-sales-unit-dropdown {
  position: relative;
}

.st-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.st-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.st-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.st-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-sales-unit-separator {
  color: #999999;
}

.st-modal-sales-unit-name {
  color: #333333;
}

.st-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.st-modal-organization-item--placeholder,
.st-modal-sales-structure-item--placeholder,
.st-modal-sales-channel-item--placeholder,
.st-modal-sales-unit-item--placeholder,
.st-modal-territory-item--placeholder,
.st-modal-sales-office-item--placeholder,
.st-modal-sold-to-party-item--placeholder,
.st-modal-deliver-to-party-item--placeholder,
.st-modal-attention-to-deliver-item--placeholder,
.st-modal-incoterm-item--placeholder,
.st-modal-delivery-point-item--placeholder,
.st-modal-shipping-point-item--placeholder,
.st-modal-settlement-item--placeholder,
.st-modal-sales-team-item--placeholder,
.st-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.st-modal-organization-item--placeholder:hover,
.st-modal-sales-structure-item--placeholder:hover,
.st-modal-sales-channel-item--placeholder:hover,
.st-modal-sales-unit-item--placeholder:hover,
.st-modal-territory-item--placeholder:hover,
.st-modal-sales-office-item--placeholder:hover,
.st-modal-sold-to-party-item--placeholder:hover,
.st-modal-deliver-to-party-item--placeholder:hover,
.st-modal-attention-to-deliver-item--placeholder:hover,
.st-modal-incoterm-item--placeholder:hover,
.st-modal-delivery-point-item--placeholder:hover,
.st-modal-shipping-point-item--placeholder:hover,
.st-modal-settlement-item--placeholder:hover,
.st-modal-sales-team-item--placeholder:hover,
.st-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.st-modal-sold-to-party-dropdown {
  position: relative;
}

.st-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-sold-to-party-input:focus,
.st-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.st-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.st-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.st-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.st-modal-sold-to-party-separator {
  color: #999999;
}

.st-modal-sold-to-party-name {
  color: #333333;
}

.st-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.st-modal-deliver-to-party-dropdown {
  position: relative;
}

.st-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.st-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.st-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.st-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.st-modal-deliver-to-party-separator {
  color: #999999;
}

.st-modal-deliver-to-party-name {
  color: #333333;
}

.st-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.st-modal-attention-to-deliver-dropdown {
  position: relative;
}
.st-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.st-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.st-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.st-modal-attention-to-deliver-separator {
  color: #999999;
}
.st-modal-attention-to-deliver-name {
  color: #333333;
}
.st-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.st-modal-incoterm-dropdown {
  position: relative;
}
.st-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.st-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.st-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.st-modal-incoterm-separator {
  color: #999999;
}
.st-modal-incoterm-name {
  color: #333333;
}
.st-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.st-modal-delivery-point-dropdown {
  position: relative;
}
.st-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.st-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.st-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.st-modal-delivery-point-separator {
  color: #999999;
}
.st-modal-delivery-point-name {
  color: #333333;
}
.st-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.st-modal-shipping-point-dropdown {
  position: relative;
}
.st-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.st-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.st-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.st-modal-shipping-point-separator {
  color: #999999;
}
.st-modal-shipping-point-name {
  color: #333333;
}
.st-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Settlement Dropdown Styles */
.st-modal-settlement-dropdown {
  position: relative;
}
.st-modal-settlement-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-settlement-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-settlement-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-settlement-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-settlement-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-settlement-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-settlement-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-settlement-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-settlement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-settlement-item:hover {
  background-color: #F5F5F5;
}
.st-modal-settlement-item--selected {
  background-color: #E8F5E9;
}
.st-modal-settlement-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-settlement-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-settlement-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.st-modal-settlement-separator {
  color: #999999;
}
.st-modal-settlement-name {
  color: #333333;
}
.st-modal-settlement-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-settlement-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.st-modal-date-picker {
  position: relative;
}
.st-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.st-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.st-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.st-modal-date-input::-webkit-datetime-edit-text,
.st-modal-date-input::-webkit-datetime-edit-month-field,
.st-modal-date-input::-webkit-datetime-edit-day-field,
.st-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.st-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.st-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.st-modal-sales-person-dropdown {
  position: relative;
}
.st-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.st-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.st-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.st-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.st-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.st-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.st-modal-sales-person-separator {
  color: #999999;
}
.st-modal-sales-person-name {
  color: #333333;
}
.st-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.st-modal-sales-team-dropdown {
  position: relative;
}
.st-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.st-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.st-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.st-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.st-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.st-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.st-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.st-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.st-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.st-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.st-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.st-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.st-modal-sales-team-separator {
  color: #999999;
}
.st-modal-sales-team-name {
  color: #333333;
}
.st-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.st-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.st-modal-territory-dropdown {
  position: relative;
}

.st-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.st-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.st-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.st-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-territory-separator {
  color: #999999;
}

.st-modal-territory-name {
  color: #333333;
}

.st-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.st-modal-sales-office-dropdown {
  position: relative;
}

.st-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.st-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.st-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.st-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.st-modal-sales-office-separator {
  color: #999999;
}

.st-modal-sales-office-name {
  color: #333333;
}

.st-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Settlement Section */
.st-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.st-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.st-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.st-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.st-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.st-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.st-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-table-dropdown-input:focus {
  outline: none;
}

.st-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.st-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.st-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.st-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.st-modal-delivery-type-list::-webkit-scrollbar,
.st-modal-stage-dropdown-list::-webkit-scrollbar,
.st-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.st-modal-delivery-type-list::-webkit-scrollbar-track,
.st-modal-stage-dropdown-list::-webkit-scrollbar-track,
.st-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-delivery-type-list::-webkit-scrollbar-thumb,
.st-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.st-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.st-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.st-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.st-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.st-modal-wrapper,
.st-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.settlement-modal,
.st-modal-wrapper,
.st-modal-wrapper *,
.st-modal-content,
.st-modal-data-flow-2-container,
.st-modal-data-flow-container,
.st-modal-calendar-container,
.st-modal-calendar-milestones-list,
.st-modal-calendar-view,
.st-modal-calendar-yearly,
.st-modal-calendar-monthly,
.st-modal-calendar-weekly,
.st-modal-calendar-weekly-body,
.st-modal-calendar-daily,
.st-modal-calendar-daily-timeline,
.st-modal-calendar-grid,
.st-modal-calendar-grid-body,
.st-modal-detail-table-container,
.st-modal-item-table-wrapper,
.st-modal-attachment-table-container,
.st-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.st-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.st-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.st-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.st-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.st-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.st-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.st-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.st-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.st-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-tab-content--display .st-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.st-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-tab-content--display .st-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.st-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.st-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.st-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) {
  font-weight: 600;
}

.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) .st-modal-packaging-input,
.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) .st-modal-packaging-input--display,
.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) .st-modal-handling-product-input,
.st-modal-packaging-row--unassigned:not(.st-modal-packaging-row--expanded) .st-modal-handling-product-input--display {
  font-weight: 600;
}

.st-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.st-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row td.st-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row td.st-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row td.st-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td.st-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded td.st-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row--expanded:hover td.st-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display,
.st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display,
.st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.st-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.st-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-tab-content--display .st-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.st-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-tab-content--display .st-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.st-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.st-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.st-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.st-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.st-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.st-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.st-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.st-modal-packaging-detail-table th:first-child,
.st-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.st-modal-packaging-detail-table th:nth-child(2),
.st-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.st-modal-packaging-detail-table th:nth-child(3),
.st-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.st-modal-packaging-detail-table td:nth-child(4),
.st-modal-packaging-detail-table td:nth-child(6),
.st-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.st-modal-packaging-detail-table td:nth-child(5),
.st-modal-packaging-detail-table td:nth-child(7),
.st-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.st-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.st-modal-tab-content--display .st-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display .st-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.st-modal-tab-content--display .st-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.st-modal-tab-content--display .st-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.st-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.st-modal-packaging-table td:last-child,
.st-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.st-modal-packaging-table td:last-child .st-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.st-modal-detail-table-container--external .st-modal-packaging-table th:last-child,
.st-modal-detail-table-container--external .st-modal-packaging-table td.st-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.st-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.st-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.st-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.st-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.st-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.st-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.st-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.st-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.st-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.st-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.st-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.st-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.st-modal-packaging-child-table tr {
  border: none !important;
}

.st-modal-packaging-child-table thead,
.st-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.st-modal-packaging-child-table th:first-child,
.st-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.st-modal-packaging-child-table th:nth-child(2),
.st-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.st-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.st-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.st-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.st-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.st-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.st-modal-packaging-child-table th:nth-child(3),
.st-modal-packaging-child-table td:nth-child(3),
.st-modal-packaging-child-table th:nth-child(4),
.st-modal-packaging-child-table td:nth-child(4),
.st-modal-packaging-child-table th:nth-child(5),
.st-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.st-modal-packaging-child-table th:nth-child(6),
.st-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.st-modal-packaging-child-table th:nth-child(7),
.st-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.st-modal-detail-table-container--external .st-modal-packaging-child-table th:last-child,
.st-modal-detail-table-container--external .st-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.st-modal-packaging-child-table td:last-child .st-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.st-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.st-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.st-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.st-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.st-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row {
  transition: none !important;
}

.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display,
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display:focus,
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display,
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display:focus,
.st-modal-tab-content--display .st-modal-detail-table-container .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display:focus,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display:focus,
.st-modal-tab-content--display .st-modal-detail-table-container--external .st-modal-packaging-table tbody tr.st-modal-packaging-row:hover td .st-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.st-modal-detail-table-container--external .st-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.st-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.st-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.st-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.st-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.st-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.st-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.st-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.st-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.st-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.st-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.st-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.st-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.st-modal-detail-table-container--external .st-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.st-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-item--display {
  color: #999999 !important;
}

.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-code,
.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-name,
.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-separator {
  color: #999999 !important;
}

.st-modal-handling-product-dropdown-content--display .st-modal-handling-product-check {
  color: #999999 !important;
}

.st-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.st-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.st-modal-handling-product-dropdown-content--narrow .st-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.st-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.st-modal-packaging-detail-table .st-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.st-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.st-modal-detail-table-container--dropdown-open .st-modal-detail-table {
  overflow: visible;
}

.st-modal-detail-table-container--dropdown-open .st-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.st-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.st-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.st-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.st-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.st-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.st-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.st-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.st-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.st-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.st-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.st-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.st-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.st-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.st-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.st-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.st-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.st-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.st-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.st-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.st-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.st-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.st-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.st-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-item:hover {
  background-color: transparent;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-item--placeholder {
  display: none;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-code,
.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-name,
.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-separator {
  color: #555555;
}

.st-modal-handling-product-dropdown-content--view-only .st-modal-handling-product-check {
  color: #888888;
}

.st-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.st-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.st-modal-handling-product-separator {
  color: #999999;
}

.st-modal-handling-product-name {
  color: #333333;
}

.st-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.st-modal-handling-product-item--placeholder {
  cursor: default;
}

.st-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.st-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.st-modal-detail-table td:has(.st-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.st-modal-detail-table td .st-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.st-modal-detail-table td .st-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.st-modal-detail-table td .st-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.st-modal-detail-table td .st-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.st-modal-detail-table td .st-modal-handling-product-input--display,
.st-modal-detail-table td .st-modal-handling-product-input--display:focus,
.st-modal-detail-table td .st-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.st-modal-detail-table-container .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display,
.st-modal-detail-table-container .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display:focus,
.st-modal-detail-table-container .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display:focus,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover td .st-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.st-modal-detail-table td .st-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.st-modal-detail-table td .st-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.st-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.st-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.st-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.st-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-table-text-icon-btn--filled:not(.st-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.st-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.st-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.st-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.st-modal-table-text-icon-btn--display.st-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.st-modal-table-text-icon-btn--display.st-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-table-text-icon-btn--display.st-modal-table-text-icon-btn--external.st-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.st-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.st-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.st-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.st-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.st-modal-serial-assignment-btn {
  width: 10.625rem;
}

.st-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.st-modal-batch-assignment-btn--filled .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.st-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.st-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.st-modal-batch-assignment-btn--display .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-batch-assignment-btn--display.st-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.st-modal-batch-assignment-btn--display.st-modal-batch-assignment-btn--filled .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.st-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.st-modal-secured-qty-btn.st-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.st-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.st-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.st-modal-secured-qty-btn--grey .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.st-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.st-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.st-modal-batch-assignment-btn--partial .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.st-modal-batch-assignment-btn--display.st-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.st-modal-batch-assignment-btn--display.st-modal-batch-assignment-btn--partial .st-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.st-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.st-modal-secured-qty-modal .st-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.st-modal-secured-qty-modal .st-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.st-modal-secured-qty-modal.st-modal-batch-assignment-modal--display .st-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.st-modal-secured-qty-modal .st-modal-item-text-content {
  overflow-x: hidden;
}

.st-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.st-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.st-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.st-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.st-modal-batch-assignment-modal--display .st-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.st-modal-batch-assignment-modal--display .st-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.st-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.st-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.st-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.st-modal-secured-qty-lock-btn--open .st-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.st-modal-secured-qty-lock-btn--locked .st-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.st-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.st-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.st-modal-batch-assignment-modal .st-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.st-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.st-modal-batch-assignment-modal .st-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.st-modal-batch-assignment-modal .st-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.st-modal-batch-assignment-modal.st-modal-batch-assignment-modal--display .st-modal-item-text-info {
  background-color: #F2F8EA;
}

.st-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.st-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.st-modal-batch-assignment-info-group {
  flex: 1 1;
}

.st-modal-batch-assignment-info-group .st-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.st-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.st-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.st-modal-batch-assignment-table-section .st-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.st-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.st-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.st-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.st-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.st-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.st-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.st-modal-batch-assignment-table th,
.st-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.st-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.st-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.st-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.st-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.st-modal-batch-assignment-table tbody td:has(.st-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.st-modal-batch-assignment-table tbody td:has(.st-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.st-modal-batch-assignment-table tbody td:nth-child(2),
.st-modal-batch-assignment-table tbody td:nth-child(3),
.st-modal-batch-assignment-table tbody td:nth-child(4),
.st-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.st-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.st-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.st-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.st-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.st-modal-batch-assignment-modal--display .st-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.st-modal-batch-assignment-modal--display .st-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.st-modal-batch-assignment-modal--display .st-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-batch-assignment-modal--display .st-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.st-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.st-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.st-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.st-modal-batch-assignment-table .st-modal-placeholder-text {
  color: #CCCCCC;
}

.st-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.st-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.st-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.st-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.st-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.st-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.st-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.st-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.st-modal-batch-assignment-table th.batch-table-frozen-batch,
table.st-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.st-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.st-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.st-modal-batch-assignment-table td.batch-table-frozen-batch,
table.st-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.st-modal-batch-assignment-table th.batch-table-frozen-batch,
table.st-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.st-modal-batch-assignment-table th.batch-table-frozen-assign,
table.st-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.st-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.st-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.st-modal-item-text-info {
  margin-bottom: 1rem;
}

.st-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.st-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.st-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.st-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.st-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.st-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.st-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.st-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-item-text-modal .modal-header .modal-title,
.st-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.st-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.st-modal-item-text-label--display {
  color: #333333;
}

.st-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.st-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.st-modal-item-text-modal .st-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.st-modal-item-text-modal .st-modal-item-text-textarea-wrapper .st-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.st-modal-item-text-textarea {
  overflow-y: auto !important;
}

.st-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.st-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.st-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.st-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.st-modal-add-do-item-modal .st-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.st-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.st-modal-add-do-item-dropdown-section .st-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.st-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.st-modal-add-do-item-table-section .st-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.st-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.st-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.st-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.st-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.st-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.st-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.st-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.st-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.st-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.st-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.st-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.st-modal-detail-table td:first-child .st-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.st-modal-detail-table td:first-child .st-modal-partner-type-input {
  padding-left: 0.625rem;
}

.st-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.st-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.st-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.st-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.st-modal-partner-type-dropdown--display .st-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.st-modal-partner-type-dropdown-content--display .st-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-partner-type-dropdown-content--display .st-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.st-modal-partner-type-dropdown-content--display .st-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-partner-type-dropdown-content--display .st-modal-partner-type-check {
  color: #999999 !important;
}

.st-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.st-modal-partner-type-dropdown--display .st-modal-partner-type-value {
  color: #555555;
}

.st-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.st-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.st-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.st-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.st-modal-partner-type-item--placeholder {
  cursor: default;
}

.st-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.st-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.st-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.st-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.st-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.st-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.st-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.st-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.st-modal-partner-id-dropdown--display .st-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-code,
.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-name,
.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-separator {
  color: #999999 !important;
}

.st-modal-partner-id-dropdown-content--display .st-modal-partner-id-check {
  color: #999999 !important;
}

.st-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.st-modal-partner-id-dropdown--display .st-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.st-modal-detail-table tbody tr:hover .st-modal-partner-type-dropdown--display .st-modal-partner-type-input-wrapper,
.st-modal-detail-table tbody tr:hover .st-modal-partner-id-dropdown--display .st-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .st-modal-partner-type-dropdown--display .st-modal-partner-type-input-wrapper,
.st-modal-detail-table-container--external .st-modal-detail-table tbody tr:hover .st-modal-partner-id-dropdown--display .st-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.st-modal-partner-type-arrow--external {
  visibility: hidden;
}

.st-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.st-modal-partner-type-dropdown--external .st-modal-partner-type-value {
  color: #555555;
}

.st-modal-partner-id-dropdown--external .st-modal-partner-id-value {
  color: #555555;
}

.st-modal-detail-table-container--external .st-modal-detail-table td.st-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.st-modal-partner-header-section--external .st-modal-form-input--display {
  color: #555555;
}

.st-modal-detail-table td.st-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.st-modal-tab-content--display .st-modal-detail-table td.st-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.st-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.st-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.st-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.st-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.st-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.st-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.st-modal-partner-id-item--placeholder {
  cursor: default;
}

.st-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.st-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.st-modal-partner-id-separator {
  color: #999999;
}

.st-modal-partner-id-name {
  color: #666666;
}

.st-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.st-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.st-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.st-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.st-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.st-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.st-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.st-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.st-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.st-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.st-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.st-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.st-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.st-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.st-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.st-modal-data-flow-stage--completed .st-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.st-modal-data-flow-stage--active .st-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.st-modal-data-flow-stage--completed .st-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-data-flow-stage--active .st-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.st-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.st-modal-data-flow-stage--completed .st-modal-data-flow-stage-label {
  color: #138B4C;
}

.st-modal-data-flow-stage--active .st-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.st-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.st-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.st-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.st-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.st-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.st-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.st-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.st-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.st-modal-data-flow-document--active .st-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.st-modal-data-flow-document-fold {
  display: none;
}

.st-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.st-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.st-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.st-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.st-modal-data-flow-document-icon-wrapper--active .st-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.st-modal-data-flow-document--active .st-modal-data-flow-document-title {
  color: #138B4C;
}

.st-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.st-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.st-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.st-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.st-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.st-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.st-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.st-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.st-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.st-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.st-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.st-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.st-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.st-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.st-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.st-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.st-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.st-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.st-modal-terms-area-button .st-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.st-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.st-modal-tab-content--display .st-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.st-modal-tab-content--display .st-modal-terms-area-button .st-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.st-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.st-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.st-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.st-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.st-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.st-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.st-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.st-modal-data-flow-2-row {
  display: flex;
}

.st-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.st-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.st-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.st-modal-data-flow-2-row--content .st-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.st-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.st-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.st-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.st-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-label {
  color: #333333;
}

.st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.st-modal-tab-content--display .st-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage-label {
  color: #999999;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--completed .st-modal-data-flow-2-stage-label {
  color: #333333;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--active .st-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.st-modal-tab-content--display .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.st-modal-tab-content--display .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.st-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.st-modal-data-flow-2-row--content .st-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.st-modal-data-flow-2-row--content .st-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.st-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.st-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.st-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.st-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.st-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.st-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.st-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.st-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.st-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-title,
.st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-title {
  color: #333333;
}

.st-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.st-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.st-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.st-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.st-modal-tab-content--display .st-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-title {
  color: #888888;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-title,
.st-modal-tab-content--display .st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-title {
  color: #333333;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--completed .st-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--active .st-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-date {
  color: #333333;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.st-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.st-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.st-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.st-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.st-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.st-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.st-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.st-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.st-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.st-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.st-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.st-modal-data-flow-2-grid--external .st-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.st-modal-data-flow-2-grid--external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell {
  border-bottom: none;
}

.st-modal-data-flow-2-grid--external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.st-modal-data-flow-2-grid--external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell--label::after {
  display: none;
}

.st-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.st-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.st-modal-data-flow-2-row--content-top .st-modal-data-flow-2-document--buyer.st-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.st-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.st-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.st-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.st-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.st-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.st-modal-data-flow-2-stage--external-completed .st-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.st-modal-data-flow-2-stage--external-active .st-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.st-modal-data-flow-2-stage--external-completed .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.st-modal-data-flow-2-stage--external-active .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.st-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.st-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.st-modal-data-flow-2-document--external .st-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.st-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.st-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.st-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.st-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.st-modal-data-flow-2-document--external .st-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.st-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.st-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.st-modal-data-flow-2-document--supplier .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.st-modal-data-flow-2-document--supplier .st-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.st-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.st-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.st-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.st-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier .st-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier .st-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-completed .st-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--supplier-active .st-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.st-modal-tab-content--data-flow-2-external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.st-modal-tab-content--data-flow-2-external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external .st-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external .st-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external .st-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.st-modal-tab-content--display.st-modal-tab-content--data-flow-2-external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.st-modal-tab-content--display.st-modal-tab-content--data-flow-2-external .st-modal-data-flow-2-row--header .st-modal-data-flow-2-cell:has(.st-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-circle,
.st-modal-tab-content--display .st-modal-data-flow-2-stage--external-completed .st-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--external-active .st-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-icon,
.st-modal-tab-content--display .st-modal-data-flow-2-stage--external-completed .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-stage--external-active .st-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-stage--external .st-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.st-modal-tab-content--display .st-modal-data-flow-2-document--external-completed .st-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.st-modal-tab-content--display .st-modal-data-flow-2-document--external-active .st-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.st-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.st-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.st-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.st-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.st-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.st-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.st-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.st-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.st-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.st-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.st-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.st-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.st-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.st-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.st-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.st-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.st-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.st-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.st-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.st-modal-milestone-date-value {
  color: #666666;
}

.st-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.st-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.st-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.st-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.st-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.st-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.st-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.st-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.st-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.st-modal-activity-item--display .st-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.st-modal-calendar-milestones .st-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.st-modal-calendar-milestones .st-modal-activity-user:hover {
  text-decoration: none;
}

.st-modal-calendar-milestones .st-modal-activity-item--display .st-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.st-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.st-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.st-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.st-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.st-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-calendar-nav-btn:hover .st-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.st-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.st-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.st-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.st-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.st-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.st-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.st-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.st-modal-calendar-view-mode-btn--active + .st-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.st-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.st-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.st-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.st-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.st-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.st-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.st-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.st-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.st-modal-calendar-grid-cell:nth-child(7n-1),
.st-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.st-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.st-modal-calendar-grid-day-name:nth-child(6),
.st-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.st-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.st-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.st-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.st-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.st-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.st-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.st-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.st-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.st-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.st-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.st-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.st-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.st-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.st-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.st-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.st-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.st-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.st-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.st-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.st-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.st-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.st-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.st-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.st-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.st-modal-calendar-weekly-day-column:nth-child(6),
.st-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.st-modal-calendar-weekly-day-header:nth-child(6),
.st-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.st-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.st-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.st-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.st-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.st-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.st-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.st-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.st-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.st-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.st-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.st-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.st-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.st-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.st-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.st-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.st-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.st-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.st-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.st-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.st-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.st-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.st-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.st-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.st-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.st-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-view {
  border-color: #D0D0D0;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-view-mode-btn--active + .st-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-milestones-header {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-view-title {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-grid-day-name {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-grid-cell-day {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-weekly-day-name {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-weekly-day-date {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-weekly-event-title {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-daily-header {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-daily-hour-label {
  color: #666666;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-daily-event-title {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar .st-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.st-modal-calendar-milestones-header--external {
  color: #333333;
}

.st-modal-calendar-nav-btn--external .st-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.st-modal-calendar-nav-btn--external:hover .st-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.st-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.st-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.st-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.st-modal-calendar-view-mode-btn--active-external + .st-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.st-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.st-modal-tab-content--calendar-external .st-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.st-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.st-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.st-modal-activity-type--external {
  color: #333333;
}

.st-modal-activity-user--external {
  color: #E67E22;
}

.st-modal-activity-user--external:hover {
  color: #D35400;
}

.st-modal-calendar-milestones .st-modal-activity-user--external {
  color: #E67E22;
}

.st-modal-calendar-milestones .st-modal-activity-user--external:hover {
  color: #D35400;
}

.st-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.st-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.st-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.st-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.st-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.st-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.st-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.st-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.st-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.st-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.st-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.st-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.st-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-milestones-header--external {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-view-mode-btn--active-external + .st-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-calendar-nav-btn--external .st-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-activity-type--external {
  color: #333333;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-activity-user--external {
  color: #E67E22;
}

.st-modal-tab-content--display.st-modal-tab-content--calendar-external .st-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.st-modal-input--error,
.st-modal-form-input.st-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.st-modal-dropdown--error .st-modal-delivery-type-input,
.st-modal-dropdown--error .st-modal-organization-input,
.st-modal-dropdown--error .st-modal-sales-structure-input,
.st-modal-dropdown--error .st-modal-sales-channel-input,
.st-modal-dropdown--error .st-modal-sales-unit-input,
.st-modal-dropdown--error .st-modal-territory-input,
.st-modal-dropdown--error .st-modal-sales-office-input,
.st-modal-dropdown--error .st-modal-sold-to-party-input,
.st-modal-dropdown--error .st-modal-deliver-to-party-input,
.st-modal-dropdown--error .st-modal-attention-to-deliver-input,
.st-modal-dropdown--error .st-modal-incoterm-input,
.st-modal-dropdown--error .st-modal-delivery-point-input,
.st-modal-dropdown--error .st-modal-shipping-point-input,
.st-modal-dropdown--error .st-modal-settlement-input,
.st-modal-dropdown--error .st-modal-sales-team-input,
.st-modal-dropdown--error .st-modal-sales-person-input,
.st-modal-dropdown--error .st-modal-delivery-priority-input,
.st-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.st-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.st-modal-date-picker-wrapper.st-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.st-modal-custom-dropdown {
  position: relative;
}

.st-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.st-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.st-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.st-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.st-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-check {
  color: #999999 !important;
}

.st-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.st-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.st-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.st-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.st-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.st-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.st-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.st-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.st-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.st-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.st-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.st-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.st-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.st-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.st-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.st-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.st-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.st-modal-setting-form-label--display {
  color: #333333;
}

.st-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.st-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-setting-dropdown--active .st-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.st-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.st-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.st-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.st-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.st-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.st-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.st-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-setting-dropdown-icon.st-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.st-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.st-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.st-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.st-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.st-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.st-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.st-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.st-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.st-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.st-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.st-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.st-modal-setting-dropdown-item-separator {
  color: #999999;
}

.st-modal-setting-dropdown-item-name {
  color: #333333;
}

.st-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.st-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.st-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.st-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.st-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.st-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.st-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.st-modal-setting-tab-content--print .st-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.st-modal-setting-tab-content--print .st-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.st-modal-setting-tab-content--print .st-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.st-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.st-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.st-modal-setting-table thead tr {
  height: 2.25rem;
}

.st-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.st-modal-setting-table tbody tr {
  height: 2.25rem;
}

.st-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.st-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.st-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.st-modal-setting-table--display thead th:nth-child(2),
.st-modal-setting-table--display thead th:nth-child(3),
.st-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.st-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.st-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.st-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.st-modal-setting-table--transfer.st-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.st-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.st-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.st-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.st-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.st-modal-setting-table--transfer:not(.st-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.st-modal-setting-table--transfer:not(.st-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.st-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.st-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.st-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.st-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.st-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.st-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.st-modal-tab-content--display .st-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.st-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.st-modal-tab-content--display .st-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.st-modal-attribute-header-section--external .st-modal-form-input:focus {
  border-color: #F5B041;
}

.st-modal-attribute-header-section--external .st-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.st-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.st-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.st-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.st-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.st-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.st-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.st-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.st-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.st-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.st-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.st-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.st-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.st-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.st-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.st-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.st-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.st-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.st-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.st-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.st-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.st-modal-available-qty-tree-level {
  position: relative;
}

.st-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.st-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.st-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.st-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.st-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.st-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.st-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.st-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.st-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.st-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.st-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.st-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.st-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.st-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.st-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.st-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.st-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.st-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.st-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.st-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.st-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.st-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.st-modal-available-qty-tree-batch-header .st-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.st-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.st-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.st-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.st-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.st-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.st-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.st-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.st-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.st-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.st-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.st-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.st-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.st-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.st-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.st-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.st-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.st-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.st-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.st-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.st-modal-activity-type--clickable.st-modal-activity-type--display:hover {
  color: #138B4C;
}

.st-modal-activity-type--clickable.st-modal-activity-type--external:hover {
  color: #E67E00;
}

.st-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.st-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.st-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.st-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.st-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.st-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.st-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.st-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to st-modal-form-label */
.st-modal-activity-detail-content .st-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.st-modal-activity-detail-modal .st-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.st-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.st-modal-activity-detail-modal .st-modal-tabs--display .st-modal-tab {
  color: #333333;
}

.st-modal-activity-detail-modal .st-modal-tabs--display .st-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.st-modal-activity-detail-modal .st-modal-tabs--external.st-modal-tabs--display .st-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.st-modal-activity-detail-tab-content--general .st-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.st-modal-activity-detail-content .st-modal-milestone-status {
  margin: 0;
}

.st-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.st-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.st-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.st-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.st-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.st-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.st-modal-activity-detail-pic-chat-wrapper:hover .st-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.st-modal-activity-detail-pic-chat-wrapper:hover .st-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.st-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.st-modal-activity-detail-pic--clickable:hover .st-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.st-modal-activity-detail-content--external .st-modal-activity-detail-pic {
  color: #E67E22;
}

.st-modal-activity-detail-content--external .st-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.st-modal-activity-detail-content--external .st-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.st-modal-activity-detail-content--external .st-modal-activity-detail-pic--clickable:hover .st-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.st-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.st-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.st-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.st-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.st-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.st-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.st-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.st-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.st-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.st-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.st-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.st-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.st-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.st-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.st-modal-activity-detail-content--external .st-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.st-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.st-modal-activity-detail-content--external .st-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.st-modal-activity-detail-content--external .st-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.st-modal-activity-detail-content--external .st-modal-activity-detail-document-name {
  color: #E67E22;
}

.st-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.st-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.st-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.st-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.st-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.st-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.st-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.st-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.st-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.st-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.st-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.st-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.st-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.st-modal-activity-detail-tab-content--general {
  padding: 0;
}

.st-modal-activity-detail-tab-content--general .st-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.st-modal-activity-detail-tab-content--general > div:not(.st-modal-item-text-info) {
  padding: 0 1.5rem;
}

.st-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.st-modal-activity-detail-tab-content--attachment,
.st-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.st-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.st-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.st-modal-activity-detail-tab-content--attachment .st-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.st-modal-activity-detail-tab-content--attachment .st-modal-batch-assignment-table-section > .st-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.st-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.st-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.st-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.st-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.st-modal-activity-detail-content--external .st-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.st-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.st-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.st-modal-activity-detail-content--external .st-modal-item-text-info {
  background-color: #FEF5E7;
}

.st-modal-activity-detail-content--external .st-modal-task-notes-section {
  background-color: #FEF5E7;
}

.st-modal-task-notes-section .st-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.st-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.st-modal-task-notes-textarea.st-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.st-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.st-modal-task-chat-section > .st-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.st-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.st-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.st-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.st-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.st-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.st-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.st-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.st-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.st-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.st-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.st-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.st-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.st-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.st-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.st-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.st-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.st-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.st-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.st-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.st-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.st-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.st-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.st-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.st-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.st-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.st-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.st-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.st-modal-activity-detail-content--external .st-modal-task-chat-avatar {
  background-color: #F5B041;
}

.st-modal-activity-detail-content--external .st-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.st-modal-activity-detail-content--external .st-modal-task-chat-reply-btn {
  color: #E67E22;
}

.st-modal-activity-detail-content--external .st-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.st-modal-dropdown--display .st-modal-dropdown-item,
.st-modal-dropdown--display [class*="-item"],
.st-modal-tags-dropdown--display .st-modal-tags-dropdown-item,
.st-modal-baseline-date-dropdown--display .st-modal-baseline-date-item,
.st-modal-reference-type-dropdown--display .st-modal-reference-type-item,
.st-modal-delivery-priority-dropdown--display .st-modal-delivery-priority-item,
.st-modal-organization-dropdown--display .st-modal-organization-item,
.st-modal-sales-structure-dropdown--display .st-modal-sales-structure-item,
.st-modal-delivery-type-dropdown--display .st-modal-delivery-type-item,
.st-modal-sales-channel-dropdown--display .st-modal-sales-channel-item,
.st-modal-sales-unit-dropdown--display .st-modal-sales-unit-item,
.st-modal-sold-to-party-dropdown--display .st-modal-sold-to-party-item,
.st-modal-deliver-to-party-dropdown--display .st-modal-deliver-to-party-item,
.st-modal-attention-to-deliver-dropdown--display .st-modal-attention-to-deliver-item,
.st-modal-incoterm-dropdown--display .st-modal-incoterm-item,
.st-modal-delivery-point-dropdown--display .st-modal-delivery-point-item,
.st-modal-shipping-point-dropdown--display .st-modal-shipping-point-item,
.st-modal-settlement-dropdown--display .st-modal-settlement-item,
.st-modal-sales-person-dropdown--display .st-modal-sales-person-item,
.st-modal-sales-team-dropdown--display .st-modal-sales-team-item,
.st-modal-territory-dropdown--display .st-modal-territory-item,
.st-modal-sales-office-dropdown--display .st-modal-sales-office-item,
.st-modal-status-dropdown--display .st-modal-status-item,
.st-modal-handling-product-dropdown--display .st-modal-handling-product-item,
.st-modal-child-uom-dropdown--display .st-modal-child-uom-item,
.st-modal-partner-type-dropdown--display .st-modal-partner-type-item,
.st-modal-partner-id-dropdown--display .st-modal-partner-id-item,
.st-modal-custom-dropdown--display .st-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.st-modal-dropdown--display .st-modal-dropdown-item:hover,
.st-modal-dropdown--display [class*="-item"]:hover,
.st-modal-tags-dropdown--display .st-modal-tags-dropdown-item:hover,
.st-modal-baseline-date-dropdown--display .st-modal-baseline-date-item:hover,
.st-modal-reference-type-dropdown--display .st-modal-reference-type-item:hover,
.st-modal-delivery-priority-dropdown--display .st-modal-delivery-priority-item:hover,
.st-modal-organization-dropdown--display .st-modal-organization-item:hover,
.st-modal-sales-structure-dropdown--display .st-modal-sales-structure-item:hover,
.st-modal-delivery-type-dropdown--display .st-modal-delivery-type-item:hover,
.st-modal-sales-channel-dropdown--display .st-modal-sales-channel-item:hover,
.st-modal-sales-unit-dropdown--display .st-modal-sales-unit-item:hover,
.st-modal-sold-to-party-dropdown--display .st-modal-sold-to-party-item:hover,
.st-modal-deliver-to-party-dropdown--display .st-modal-deliver-to-party-item:hover,
.st-modal-attention-to-deliver-dropdown--display .st-modal-attention-to-deliver-item:hover,
.st-modal-incoterm-dropdown--display .st-modal-incoterm-item:hover,
.st-modal-delivery-point-dropdown--display .st-modal-delivery-point-item:hover,
.st-modal-shipping-point-dropdown--display .st-modal-shipping-point-item:hover,
.st-modal-settlement-dropdown--display .st-modal-settlement-item:hover,
.st-modal-sales-person-dropdown--display .st-modal-sales-person-item:hover,
.st-modal-sales-team-dropdown--display .st-modal-sales-team-item:hover,
.st-modal-territory-dropdown--display .st-modal-territory-item:hover,
.st-modal-sales-office-dropdown--display .st-modal-sales-office-item:hover,
.st-modal-status-dropdown--display .st-modal-status-item:hover,
.st-modal-handling-product-dropdown--display .st-modal-handling-product-item:hover,
.st-modal-child-uom-dropdown--display .st-modal-child-uom-item:hover,
.st-modal-partner-type-dropdown--display .st-modal-partner-type-item:hover,
.st-modal-partner-id-dropdown--display .st-modal-partner-id-item:hover,
.st-modal-custom-dropdown--display .st-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.st-modal-dropdown--display [class*="-item--selected"],
.st-modal-tags-dropdown--display .st-modal-tags-dropdown-item--selected,
.st-modal-baseline-date-dropdown--display .st-modal-baseline-date-item--selected,
.st-modal-reference-type-dropdown--display .st-modal-reference-type-item--selected,
.st-modal-delivery-priority-dropdown--display .st-modal-delivery-priority-item--selected,
.st-modal-organization-dropdown--display .st-modal-organization-item--selected,
.st-modal-sales-structure-dropdown--display .st-modal-sales-structure-item--selected,
.st-modal-delivery-type-dropdown--display .st-modal-delivery-type-item--selected,
.st-modal-sales-channel-dropdown--display .st-modal-sales-channel-item--selected,
.st-modal-sales-unit-dropdown--display .st-modal-sales-unit-item--selected,
.st-modal-sold-to-party-dropdown--display .st-modal-sold-to-party-item--selected,
.st-modal-deliver-to-party-dropdown--display .st-modal-deliver-to-party-item--selected,
.st-modal-attention-to-deliver-dropdown--display .st-modal-attention-to-deliver-item--selected,
.st-modal-incoterm-dropdown--display .st-modal-incoterm-item--selected,
.st-modal-delivery-point-dropdown--display .st-modal-delivery-point-item--selected,
.st-modal-shipping-point-dropdown--display .st-modal-shipping-point-item--selected,
.st-modal-settlement-dropdown--display .st-modal-settlement-item--selected,
.st-modal-sales-person-dropdown--display .st-modal-sales-person-item--selected,
.st-modal-sales-team-dropdown--display .st-modal-sales-team-item--selected,
.st-modal-territory-dropdown--display .st-modal-territory-item--selected,
.st-modal-sales-office-dropdown--display .st-modal-sales-office-item--selected,
.st-modal-status-dropdown--display .st-modal-status-item--selected,
.st-modal-handling-product-dropdown--display .st-modal-handling-product-item--selected,
.st-modal-child-uom-dropdown--display .st-modal-child-uom-item--selected,
.st-modal-partner-type-dropdown--display .st-modal-partner-type-item--selected,
.st-modal-partner-id-dropdown--display .st-modal-partner-id-item--selected,
.st-modal-custom-dropdown--display .st-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.st-modal-dropdown--display [class*="-check"],
.st-modal-dropdown--display .st-modal-dropdown-check,
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.st-modal-dropdown--display [class*="-item-code"],
.st-modal-dropdown--display [class*="-item-name"],
.st-modal-dropdown--display [class*="-item-content"],
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-code,
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-name,
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-item,
.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.st-modal-sold-to-party-dropdown-content--display .st-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.st-modal-tags-dropdown--display .st-modal-tags-item,
.st-modal-tags-dropdown--display .st-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-tags-dropdown--display .st-modal-tags-item:hover {
  background-color: transparent !important;
}

.st-modal-tags-dropdown--display .st-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.st-modal-tags-dropdown--display .st-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item,
.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.st-modal-custom-dropdown-list--display .st-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ============================================= */
/* Cost Tab Styles                                */
/* ============================================= */

/* Cost Sub-Tab Navigation */
.st-modal-cost-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 1rem;
}

.st-modal-cost-sub-tab {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 200ms ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.st-modal-cost-sub-tab:hover {
  color: #333;
  background-color: #f9f9f9;
}

.st-modal-cost-sub-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
  font-weight: 600;
}

/* Cost Breakdown Cards */
.st-modal-cost-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.st-modal-cost-summary-card {
  background-color: #F9F9F9;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.st-modal-cost-summary-card-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.st-modal-cost-summary-card-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333;
}

.st-modal-cost-summary-card--labor {
  border-left: 3px solid #138B4C;
}

.st-modal-cost-summary-card--material {
  border-left: 3px solid #2196F3;
}

.st-modal-cost-summary-card--travel {
  border-left: 3px solid #FF9800;
}

.st-modal-cost-summary-card--other {
  border-left: 3px solid #9C27B0;
}

/* Cost Line Items Table */
.st-modal-cost-line-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.st-modal-cost-line-items th {
  background-color: #F5F5F5;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.75rem;
  white-space: nowrap;
}

.st-modal-cost-line-items td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333;
}

.st-modal-cost-line-items tr:hover td {
  background-color: #f9f9f9;
}

.st-modal-cost-line-items td.st-modal-cost-amount {
  text-align: right;
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Settlement Rule Sub-Tab */
.st-modal-settlement-rule-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st-modal-settlement-rule-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.st-modal-settlement-rule-label {
  width: 10rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
  text-align: right;
  flex-shrink: 0;
}

.st-modal-settlement-rule-value {
  flex: 1 1;
  font-size: 0.8125rem;
  color: #333;
}

.st-modal-settlement-rule-dropdown {
  flex: 1 1;
  max-width: 17.5rem;
  position: relative;
}

.st-modal-settlement-rule-dropdown-trigger {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: #333;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 200ms ease;
}

.st-modal-settlement-rule-dropdown-trigger:hover {
  border-color: #A5D6A7;
}

.st-modal-settlement-rule-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1001;
  overflow: hidden;
}

.st-modal-settlement-rule-dropdown-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.st-modal-settlement-rule-dropdown-item:hover {
  background-color: #f0f8e8;
}

.st-modal-settlement-rule-dropdown-item--active {
  background-color: #f0f8e8;
  font-weight: 600;
}

.st-modal-settlement-rule-input {
  flex: 1 1;
  max-width: 17.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: #333;
  background-color: #fff;
  transition: border-color 200ms ease;
}

.st-modal-settlement-rule-input:focus {
  outline: none;
  border-color: #138B4C;
}

.st-modal-settlement-rule-input:disabled {
  background-color: #FAFAFA;
  color: #999;
  cursor: not-allowed;
}

.st-modal-settlement-rule-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0.5rem 0;
}

.st-modal-settlement-rule-amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: #F9F9F9;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.st-modal-settlement-rule-amount-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-modal-settlement-rule-amount-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.st-modal-settlement-rule-amount-value {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ===== from pages/Sales/Task/Task.css ===== */
/* Sales Order Wrapper - prevent page scroll */
.task-tracker-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Sales Order Container */
.task-tracker-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.task-tracker-header {
  margin-bottom: 0;
}

.task-tracker-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Sales Order Control - Exact copy of third-nav-control */
.task-tracker-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.task-tracker-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.task-tracker-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.task-tracker-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.task-tracker-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.task-tracker-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.task-tracker-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.task-tracker-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.task-tracker-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.task-tracker-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.task-tracker-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.task-tracker-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.task-tracker-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.task-tracker-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.task-tracker-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.task-tracker-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.task-tracker-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.task-tracker-layout-dropdown-item:last-child {
  border-bottom: none;
}

.task-tracker-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.task-tracker-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.task-tracker-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.task-tracker-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.task-tracker-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.task-tracker-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.task-tracker-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.task-tracker-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-tracker-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.task-tracker-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.task-tracker-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.task-tracker-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.task-tracker-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.task-tracker-filter-parameter-wrapper {
  position: relative;
}

.task-tracker-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.task-tracker-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.task-tracker-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.task-tracker-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.task-tracker-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.task-tracker-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.task-tracker-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.task-tracker-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.task-tracker-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.task-tracker-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.task-tracker-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.task-tracker-filter-close:hover {
  background-color: #f0f0f0;
}

.task-tracker-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.task-tracker-filter-group {
  margin-bottom: 1rem;
}

.task-tracker-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.task-tracker-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.task-tracker-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.task-tracker-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.task-tracker-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.task-tracker-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.task-tracker-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.task-tracker-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.task-tracker-filter-org-container {
  flex: 1 1;
  position: relative;
}

.task-tracker-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.task-tracker-filter-org-input:hover {
  border-color: #C2DE54;
}

.task-tracker-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.task-tracker-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.task-tracker-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.task-tracker-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.task-tracker-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.task-tracker-filter-tag-remove:hover {
  color: #000;
}

.task-tracker-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.task-tracker-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.task-tracker-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.task-tracker-filter-org-item:hover {
  background-color: #f5f5f5;
}

.task-tracker-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.task-tracker-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.task-tracker-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.task-tracker-filter-org-code {
  font-weight: 600;
  color: #333;
}

.task-tracker-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.task-tracker-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.task-tracker-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.task-tracker-type-dropdown-item:last-child {
  border-bottom: none;
}

.task-tracker-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.task-tracker-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.task-tracker-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.task-tracker-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Sales Order Table */
.task-tracker-table {
  animation: taskTrackerFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes taskTrackerFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .task-tracker-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .task-tracker-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .task-tracker-type-dropdown {
    min-width: 11.25rem;
  }

  .task-tracker-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Task/TaskModal.css ===== */
/* Delivery Order Modal Specific Styles */
.task-tracker-modal {
  overscroll-behavior: contain;
}

.task-tracker-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.tk-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.tk-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.tk-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.tk-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.tk-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.tk-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.tk-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.tk-modal-pov-button--external.tk-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.tk-modal-pov-button--external .tk-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-pov-button--external .tk-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.tk-modal-pov-caret--open {
  transform: rotate(180deg);
}

.tk-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.tk-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.tk-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.tk-modal-pov-dropdown-item span {
  flex: 1 1;
}

.tk-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.tk-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.tk-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.tk-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.tk-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.tk-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.tk-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tk-modal-tabs--display .tk-modal-tab {
  color: #666666;
}

.tk-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.tk-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.tk-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.tk-modal-tabs--display .tk-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.tk-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.tk-modal-tabs--external .tk-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.tk-modal-tabs--external.tk-modal-tabs--display .tk-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.tk-modal-tabs--external .tk-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.tk-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.tk-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.tk-modal-action-button span {
  white-space: nowrap;
}

.tk-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.tk-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.tk-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.tk-modal-action-button--disabled .tk-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.tk-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.tk-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.tk-modal-left-area--full .tk-modal-back-button {
  transition: width 300ms ease;
}

.tk-modal-left-area--full .tk-modal-back-button:hover {
  width: 3.5rem;
}

.tk-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.tk-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.tk-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tk-modal-content--item {
  padding-bottom: 1rem;
}

.tk-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.tk-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.tk-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.tk-modal-attachment-table-container .tk-modal-detail-table thead,
.tk-modal-attachment-table-container .tk-modal-attachment-table thead {
  box-shadow: none !important;
}

.tk-modal-attachment-table-container .tk-modal-detail-table tr,
.tk-modal-attachment-table-container .tk-modal-attachment-table tr {
  box-shadow: none !important;
}

.tk-modal-attachment-table-container .tk-modal-detail-table tbody tr:last-child,
.tk-modal-attachment-table-container .tk-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.tk-modal-attachment-table-container .tk-modal-detail-table tbody tr:last-child td,
.tk-modal-attachment-table-container .tk-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.tk-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.tk-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.tk-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.tk-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.tk-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.tk-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.tk-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.tk-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.tk-modal-attachment-filename--external {
  color: #E67E22;
}

.tk-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.tk-modal-tab-content--display .tk-modal-attachment-filename--external {
  color: #E67E22;
}

.tk-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.tk-modal-attachment-size {
  color: #666666;
}

.tk-modal-attachment-date {
  color: #666666;
}

.tk-modal-attachment-uploadedby {
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.tk-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.tk-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.tk-modal-attachment-browse-btn:focus {
  outline: none;
}

.tk-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.tk-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.tk-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-attachment-browse-btn--disabled .tk-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.tk-modal-tab-content--display .tk-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.tk-modal-tab-content--display .tk-modal-attachment-filename.tk-modal-attachment-filename--external {
  color: #E67E22;
}

.tk-modal-tab-content--display .tk-modal-attachment-type {
  color: #666666;
}

.tk-modal-tab-content--display .tk-modal-attachment-size {
  color: #666666;
}

.tk-modal-tab-content--display .tk-modal-attachment-date {
  color: #666666;
}

.tk-modal-tab-content--display .tk-modal-attachment-uploadedby {
  color: #333333;
}

.tk-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.tk-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.tk-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.tk-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.tk-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.tk-modal-tab-content--display .tk-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.tk-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.tk-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.tk-modal-tab-content--display .tk-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.tk-modal-basic-section--external .tk-modal-form-input:focus {
  border-color: #F5B041;
}

.tk-modal-basic-section--external .tk-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.tk-modal-tab-content--external .tk-modal-form-input:focus,
.tk-modal-tab-content--external .tk-modal-form-textarea:focus,
.tk-modal-tab-content--external .tk-modal-custom-dropdown-input:focus,
.tk-modal-tab-content--external .tk-modal-date-input:focus,
.tk-modal-tab-content--external .tk-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.tk-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.tk-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.tk-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.tk-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.tk-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.tk-modal-tab-content--display .tk-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.tk-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.tk-modal-tab-content--display .tk-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.tk-modal-partner-header-section--external .tk-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.tk-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.tk-modal-tab-content--display .tk-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.tk-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.tk-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.tk-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.tk-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tk-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.tk-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.tk-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.tk-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.tk-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.tk-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.tk-modal-chat-section {
  padding: 1.5rem 0;
}

.tk-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tk-modal-chat-header h3 {
  margin: 0;
}

.tk-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.tk-modal-chat-new-thread .tk-modal-form-textarea {
  min-height: 5rem;
}

.tk-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.tk-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tk-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.tk-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.tk-modal-chat-message--main {
  background-color: #FAFAFA;
}

.tk-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.tk-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.tk-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.tk-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.tk-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.tk-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.tk-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.tk-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.tk-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.tk-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-chat-user-name {
  color: #333333 !important;
}

.tk-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.tk-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.tk-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.tk-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.tk-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.tk-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.tk-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.tk-modal-chat-reply-btn:hover .tk-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.tk-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.tk-modal-chat-replies .tk-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.tk-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.tk-modal-chat-reply-input .tk-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.tk-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.tk-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.tk-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.tk-modal-tab-content--display .tk-modal-chat-thread {
  border-color: #E5E5E5;
}

.tk-modal-tab-content--display .tk-modal-chat-message--main {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display .tk-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-chat-user-position {
  background-color: #E8F5E9;
}

.tk-modal-tab-content--display .tk-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.tk-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.tk-modal-tab-content--display .tk-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.tk-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.tk-modal-notes-header-section--external .tk-modal-form-textarea:focus {
  border-color: #F5B041;
}

.tk-modal-chat-section--external .tk-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.tk-modal-chat-avatar--external {
  background-color: #F5B041;
}

.tk-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.tk-modal-tab-content--display .tk-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-thread {
  border-color: #E5E5E5;
}

.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-message--main {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-user-name {
  color: #333333 !important;
}

.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-user-position {
  background-color: #FDE8D0;
}

.tk-modal-tab-content--display.tk-modal-tab-content--external .tk-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.tk-modal-chat-reply-btn--external {
  color: #E67E22;
}

.tk-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.tk-modal-chat-reply-btn--external .tk-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.tk-modal-chat-reply-btn--external:hover .tk-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.tk-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.tk-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.tk-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.tk-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.tk-modal-chat-textarea-wrapper {
  position: relative;
}

.tk-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.tk-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tk-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.tk-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.tk-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.tk-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.tk-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tk-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.tk-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.tk-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.tk-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.tk-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.tk-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.tk-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.tk-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.tk-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.tk-modal-tab-content--display .tk-modal-table-empty-state-title {
  color: #666666;
}

.tk-modal-tab-content--display .tk-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.tk-modal-partner-header-section + .tk-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.tk-modal-partner-header-section + .tk-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.tk-modal-partner-header-section + .tk-modal-item-content-section .tk-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.tk-modal-partner-header-section + .tk-modal-item-content-section .tk-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.tk-modal-partner-header-section + .tk-modal-item-content-section .tk-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.tk-modal-partner-header-section + .tk-modal-item-content-section .tk-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.tk-modal-partner-header-section + .tk-modal-item-content-section .tk-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.tk-modal-partner-table-container .tk-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.tk-modal-partner-table-container .tk-modal-partner-table th:last-child,
.tk-modal-partner-table-container .tk-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.tk-modal-detail-table-container--external.tk-modal-partner-table-container .tk-modal-partner-table th:last-child,
.tk-modal-detail-table-container--external.tk-modal-partner-table-container .tk-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.tk-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.tk-modal-item-header-section .tk-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-tab-content--display .tk-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.tk-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.tk-modal-tab-content--display .tk-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.tk-modal-item-header-section--external .tk-modal-form-input:focus {
  border-color: #F5B041;
}

.tk-modal-item-header-section--external .tk-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.tk-modal-detail-subtabs--external .tk-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.tk-modal-detail-subtabs--external .tk-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.tk-modal-detail-subtabs--external .tk-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.tk-modal-tab-content--display .tk-modal-detail-subtabs--external .tk-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.tk-modal-tab-content--display .tk-modal-detail-subtabs--external .tk-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.tk-modal-tab-content.tk-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.tk-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.tk-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.tk-modal-item-table-wrapper .tk-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.tk-modal-item-table-wrapper .tk-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.tk-modal-item-table-wrapper--terms .tk-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.tk-modal-tab-content--external.tk-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.tk-modal-tab-content--external .tk-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-tab-content--external .tk-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-tab-content--external .tk-modal-item-table-wrapper--terms .tk-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.tk-modal-tab-content--external .tk-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.tk-modal-item-table-wrapper--terms .tk-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.tk-modal-item-table-wrapper--terms .tk-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-modal-item-table-wrapper--terms .tk-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.tk-modal-item-table-wrapper--terms .tk-modal-detail-table tr {
  height: auto;
}

.tk-modal-item-table-wrapper--terms .tk-modal-detail-table-container .tk-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.tk-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.tk-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.tk-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.tk-modal-volume-input-group .tk-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.tk-modal-volume-input-group .tk-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.tk-modal-volume-input-group .tk-modal-sla-input-wrapper .tk-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.tk-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.tk-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.tk-modal-volume-uom-list--display .tk-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-volume-uom-list--display .tk-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.tk-modal-volume-uom-list--display .tk-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-volume-uom-list--display .tk-modal-volume-uom-check {
  color: #999999 !important;
}

.tk-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.tk-modal-volume-uom-dropdown--display .tk-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.tk-modal-volume-uom-dropdown--display .tk-modal-volume-uom-item:hover {
  background-color: transparent;
}

.tk-modal-volume-uom-dropdown--display .tk-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.tk-modal-volume-uom-dropdown--display .tk-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.tk-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.tk-modal-weight-input-group .tk-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.tk-modal-weight-input-group .tk-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.tk-modal-weight-input-group .tk-modal-sla-input-wrapper .tk-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.tk-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.tk-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-weight-uom-input::placeholder {
  color: #999999;
}

.tk-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.tk-modal-weight-uom-dropdown--display .tk-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.tk-modal-weight-uom-dropdown--display .tk-modal-weight-uom-item:hover {
  background-color: transparent;
}

.tk-modal-weight-uom-dropdown--display .tk-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.tk-modal-weight-uom-dropdown--display .tk-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.tk-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.tk-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.tk-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.tk-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.tk-modal-form-input--display ~ .tk-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.tk-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.tk-modal-form-input--display {
  cursor: default;
}

.tk-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.tk-modal-form-label--display {
  color: #333333 !important;
}

.tk-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.tk-modal-form-label--display .tk-modal-required {
  color: #FF4D4F;
}

.tk-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.tk-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.tk-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.tk-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.tk-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.tk-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.tk-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tk-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.tk-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.tk-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.tk-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.tk-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.tk-modal-sla-spinner-btn:disabled .tk-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.tk-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sla-spinner-btn:hover .tk-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.tk-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.tk-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.tk-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.tk-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.tk-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.tk-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.tk-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.tk-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.tk-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.tk-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.tk-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.tk-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.tk-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.tk-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.tk-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.tk-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.tk-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.tk-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.tk-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.tk-modal-stage-dropdown-input--display .tk-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.tk-modal-stage-dropdown-input--display .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.tk-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.tk-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.tk-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.tk-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.tk-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.tk-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.tk-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.tk-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.tk-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.tk-modal-accordion-header--display {
  color: #333333;
}

.tk-modal-accordion-header--display.tk-modal-accordion-header--active {
  color: #333333;
}

.tk-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.tk-modal-accordion-header--display .tk-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.tk-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.tk-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.tk-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.tk-modal-stage-main-title--display {
  color: #138B4C;
}

.tk-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-stage-title--display {
  color: #333333;
}

.tk-modal-stage-current {
  margin-bottom: 1.875rem;
}

.tk-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.tk-modal-stage-label--display {
  color: #666666;
}

.tk-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-stage-subtitle--display {
  color: #333333;
}

.tk-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.tk-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.tk-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.tk-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.tk-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.tk-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tk-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.tk-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.tk-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tk-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.tk-modal-download-button:active {
  background-color: #E0E0E0;
}

.tk-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-download-button--display .tk-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.tk-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.tk-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.tk-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.tk-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.tk-modal-timeline-item--display .tk-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.tk-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.tk-modal-timeline-badge--inactive .tk-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.tk-modal-timeline-item--display .tk-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.tk-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.tk-modal-timeline-item--display .tk-modal-timeline-line {
  background-color: #138B4C;
}

.tk-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tk-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.tk-modal-timeline-status--display {
  color: #333333;
}

.tk-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.tk-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.tk-modal-timeline-date--display {
  color: #666666;
}

.tk-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.tk-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.tk-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.tk-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.tk-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.tk-modal-timeline-document--display {
  color: #138B4C;
}

.tk-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.tk-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.tk-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.tk-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.tk-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.tk-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.tk-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.tk-modal-activity-item--display .tk-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.tk-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.tk-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.tk-modal-activity-item--display .tk-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.tk-modal-activity-item--display .tk-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.tk-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.tk-modal-activity-item--display .tk-modal-activity-line {
  background-color: #138B4C;
}

.tk-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.tk-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.tk-modal-activity-type--display {
  color: #333333;
}

.tk-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.tk-modal-activity-header--display {
  color: #666666;
}

.tk-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.tk-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.tk-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.tk-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.tk-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.tk-modal-activity-change--display .tk-modal-activity-field {
  color: #333333;
}

.tk-modal-activity-change--display .tk-modal-activity-new {
  color: #138B4C;
}

.tk-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.tk-modal-activity-date--display {
  color: #666666;
}

.tk-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.tk-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.tk-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.tk-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.tk-modal-activity-more--display {
  color: #138B4C;
}

.tk-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-activity-more--display .tk-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.tk-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.tk-modal-reference-table thead {
  background-color: #F9F9F9;
}

.tk-modal-tab-content--display .tk-modal-reference-table thead {
  background-color: #FAFAFA;
}

.tk-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.tk-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.tk-modal-tab-content--display .tk-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.tk-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.tk-modal-tab-content--display .tk-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.tk-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.tk-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.tk-modal-detail-subtab:hover {
  color: #138B4C;
}

.tk-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.tk-modal-tab-content--display .tk-modal-detail-subtab {
  color: #666666;
}

.tk-modal-tab-content--display .tk-modal-detail-subtab:hover {
  color: #138B4C;
}

.tk-modal-tab-content--display .tk-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.tk-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.tk-modal-tab-content.tk-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.tk-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-detail-delivery-wrapper .tk-modal-form-label {
  flex-shrink: 0;
}

.tk-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.tk-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.tk-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.tk-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.tk-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.tk-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.tk-modal-detail-table-container .tk-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tk-modal-detail-table-container .tk-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-modal-detail-table-container .tk-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.tk-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.tk-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.tk-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.tk-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.tk-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.tk-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.tk-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-detail-table th,
.tk-modal-tab-content--display .tk-modal-packaging-table th,
.tk-modal-tab-content--display .tk-modal-partner-table th,
.tk-modal-tab-content--display .tk-modal-attachment-table th {
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-detail-table td,
.tk-modal-tab-content--display .tk-modal-packaging-table td,
.tk-modal-tab-content--display .tk-modal-partner-table td,
.tk-modal-tab-content--display .tk-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-description,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-text,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-available-qty,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-batch,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-serial,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-sales-order,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-so-item,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-pr-item,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-package-no,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-product-type,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-product-group,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-product-category,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .detail-table-product-variant,
.tk-modal-tab-content--display .tk-modal-detail-table tbody tr:hover .tk-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-description,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-text,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-available-qty,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-batch,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-serial,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-sales-order,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-so-item,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-pr-item,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-package-no,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-type,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-group,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-category,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-variant,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .tk-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.tk-modal-detail-table-container .tk-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.tk-modal-detail-table-container .tk-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.tk-modal-detail-table-container--external .tk-modal-detail-table td {
  color: #555555 !important;
}

.tk-modal-detail-table-container .tk-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.tk-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.tk-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.tk-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.tk-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.tk-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.tk-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.tk-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.tk-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.tk-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.tk-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.tk-modal-detail-table tbody tr:hover .detail-table-description,
.tk-modal-detail-table tbody tr:hover .detail-table-text,
.tk-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.tk-modal-detail-table tbody tr:hover .detail-table-available-qty,
.tk-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.tk-modal-detail-table tbody tr:hover .detail-table-batch,
.tk-modal-detail-table tbody tr:hover .detail-table-serial,
.tk-modal-detail-table tbody tr:hover .detail-table-sales-order,
.tk-modal-detail-table tbody tr:hover .detail-table-so-item,
.tk-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.tk-modal-detail-table tbody tr:hover .detail-table-pr-item,
.tk-modal-detail-table tbody tr:hover .detail-table-package-no,
.tk-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.tk-modal-detail-table tbody tr:hover .detail-table-product-type,
.tk-modal-detail-table tbody tr:hover .detail-table-product-group,
.tk-modal-detail-table tbody tr:hover .detail-table-product-category,
.tk-modal-detail-table tbody tr:hover .detail-table-product-variant,
.tk-modal-detail-table tbody tr:hover .tk-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-description,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-text,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-available-qty,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-batch,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-serial,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-sales-order,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-so-item,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-pr-item,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-package-no,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-type,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-group,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-category,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .detail-table-product-variant,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .tk-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.tk-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.tk-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.tk-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.tk-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.tk-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.tk-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.tk-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.tk-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.tk-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.tk-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.tk-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.tk-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.tk-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.tk-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.tk-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.tk-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.tk-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.tk-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.tk-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.tk-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.tk-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.tk-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.tk-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.tk-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tk-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.tk-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.tk-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.tk-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.tk-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.tk-modal-add-item-btn--disabled .tk-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.tk-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.tk-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.tk-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.tk-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.tk-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.tk-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.tk-modal-sales-order-table-container .tk-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.tk-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.tk-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.tk-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.tk-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.tk-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.tk-modal-table-input:focus {
  outline: none;
}

.tk-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.tk-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.tk-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.tk-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.tk-modal-tags-container {
  position: relative;
  width: 100%;
}

.tk-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.tk-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.tk-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.tk-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.tk-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.tk-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.tk-modal-tags-input--display .tk-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.tk-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.tk-modal-tag-remove:hover {
  color: #333333;
}

.tk-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.tk-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.tk-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.tk-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.tk-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.tk-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.tk-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.tk-modal-status-container {
  position: relative;
  width: 100%;
}

.tk-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.tk-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.tk-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.tk-modal-status-placeholder {
  color: #999999;
}

.tk-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.tk-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.tk-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.tk-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-status-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-status-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.tk-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.tk-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.tk-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.tk-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.tk-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.tk-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.tk-modal-status-input--display .tk-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.tk-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.tk-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.tk-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.tk-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.tk-modal-stage-dropdown-placeholder {
  color: #999999;
}

.tk-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.tk-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.tk-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.tk-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.tk-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.tk-modal-stage--created .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.tk-modal-stage--approved .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.tk-modal-stage--processed .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.tk-modal-stage--picked .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.tk-modal-stage--packed .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.tk-modal-stage--planned .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.tk-modal-stage--loaded .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.tk-modal-stage--issued .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.tk-modal-stage--departed .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.tk-modal-stage--arrived .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.tk-modal-stage--unloaded .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.tk-modal-stage--delivered .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.tk-modal-stage--confirmed .tk-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.tk-modal-stage--billed .tk-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.tk-modal-stage-dropdown-input .tk-modal-stage,
.tk-modal-stage-dropdown-item .tk-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.tk-modal-baseline-date-dropdown {
  position: relative;
}

.tk-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.tk-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.tk-modal-reference-type-dropdown {
  position: relative;
}

.tk-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.tk-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.tk-modal-delivery-priority-dropdown {
  position: relative;
}

.tk-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.tk-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.tk-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.tk-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.tk-modal-delivery-priority-separator {
  color: #666666;
}

.tk-modal-delivery-priority-name {
  color: #333333;
}

.tk-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.tk-modal-organization-dropdown {
  position: relative;
}

.tk-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.tk-modal-organization-dropdown-content--display .tk-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-organization-dropdown-content--display .tk-modal-organization-item:hover {
  background-color: transparent !important;
}

.tk-modal-organization-dropdown-content--display .tk-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-organization-dropdown-content--display .tk-modal-organization-code,
.tk-modal-organization-dropdown-content--display .tk-modal-organization-name,
.tk-modal-organization-dropdown-content--display .tk-modal-organization-separator {
  color: #999999 !important;
}

.tk-modal-organization-dropdown-content--display .tk-modal-organization-check {
  color: #999999 !important;
}

.tk-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-organization-separator {
  color: #999999;
}

.tk-modal-organization-name {
  color: #333333;
}

.tk-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.tk-modal-sales-structure-dropdown {
  position: relative;
}

.tk-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.tk-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.tk-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-sales-structure-separator {
  color: #999999;
}

.tk-modal-sales-structure-name {
  color: #333333;
}

.tk-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.tk-modal-delivery-type-dropdown {
  position: relative;
}

.tk-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.tk-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.tk-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.tk-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.tk-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.tk-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.tk-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.tk-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-delivery-type-separator {
  color: #999999;
}

.tk-modal-delivery-type-description {
  color: #333333;
}

.tk-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.tk-modal-content::-webkit-scrollbar,
.tk-modal-stage-content::-webkit-scrollbar,


.tk-modal-content::-webkit-scrollbar-track,
.tk-modal-stage-content::-webkit-scrollbar-track,


.tk-modal-content::-webkit-scrollbar-thumb,
.tk-modal-stage-content::-webkit-scrollbar-thumb,


.tk-modal-content::-webkit-scrollbar-thumb:hover,
.tk-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.tk-modal-sales-channel-dropdown {
  position: relative;
}

.tk-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tk-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-sales-channel-separator {
  color: #999999;
}

.tk-modal-sales-channel-name {
  color: #333333;
}

.tk-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.tk-modal-sales-unit-dropdown {
  position: relative;
}

.tk-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tk-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-sales-unit-separator {
  color: #999999;
}

.tk-modal-sales-unit-name {
  color: #333333;
}

.tk-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.tk-modal-organization-item--placeholder,
.tk-modal-sales-structure-item--placeholder,
.tk-modal-sales-channel-item--placeholder,
.tk-modal-sales-unit-item--placeholder,
.tk-modal-territory-item--placeholder,
.tk-modal-sales-office-item--placeholder,
.tk-modal-sold-to-party-item--placeholder,
.tk-modal-deliver-to-party-item--placeholder,
.tk-modal-attention-to-deliver-item--placeholder,
.tk-modal-incoterm-item--placeholder,
.tk-modal-delivery-point-item--placeholder,
.tk-modal-shipping-point-item--placeholder,
.tk-modal-sales-order-item--placeholder,
.tk-modal-sales-team-item--placeholder,
.tk-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.tk-modal-organization-item--placeholder:hover,
.tk-modal-sales-structure-item--placeholder:hover,
.tk-modal-sales-channel-item--placeholder:hover,
.tk-modal-sales-unit-item--placeholder:hover,
.tk-modal-territory-item--placeholder:hover,
.tk-modal-sales-office-item--placeholder:hover,
.tk-modal-sold-to-party-item--placeholder:hover,
.tk-modal-deliver-to-party-item--placeholder:hover,
.tk-modal-attention-to-deliver-item--placeholder:hover,
.tk-modal-incoterm-item--placeholder:hover,
.tk-modal-delivery-point-item--placeholder:hover,
.tk-modal-shipping-point-item--placeholder:hover,
.tk-modal-sales-order-item--placeholder:hover,
.tk-modal-sales-team-item--placeholder:hover,
.tk-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.tk-modal-sold-to-party-dropdown {
  position: relative;
}

.tk-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-sold-to-party-input:focus,
.tk-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.tk-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.tk-modal-sold-to-party-separator {
  color: #999999;
}

.tk-modal-sold-to-party-name {
  color: #333333;
}

.tk-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.tk-modal-deliver-to-party-dropdown {
  position: relative;
}

.tk-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tk-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.tk-modal-deliver-to-party-separator {
  color: #999999;
}

.tk-modal-deliver-to-party-name {
  color: #333333;
}

.tk-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.tk-modal-attention-to-deliver-dropdown {
  position: relative;
}
.tk-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.tk-modal-attention-to-deliver-separator {
  color: #999999;
}
.tk-modal-attention-to-deliver-name {
  color: #333333;
}
.tk-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.tk-modal-incoterm-dropdown {
  position: relative;
}
.tk-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.tk-modal-incoterm-separator {
  color: #999999;
}
.tk-modal-incoterm-name {
  color: #333333;
}
.tk-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.tk-modal-delivery-point-dropdown {
  position: relative;
}
.tk-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.tk-modal-delivery-point-separator {
  color: #999999;
}
.tk-modal-delivery-point-name {
  color: #333333;
}
.tk-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.tk-modal-shipping-point-dropdown {
  position: relative;
}
.tk-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.tk-modal-shipping-point-separator {
  color: #999999;
}
.tk-modal-shipping-point-name {
  color: #333333;
}
.tk-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.tk-modal-sales-order-dropdown {
  position: relative;
}
.tk-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.tk-modal-sales-order-separator {
  color: #999999;
}
.tk-modal-sales-order-name {
  color: #333333;
}
.tk-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.tk-modal-date-picker {
  position: relative;
}
.tk-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.tk-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.tk-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.tk-modal-date-input::-webkit-datetime-edit-text,
.tk-modal-date-input::-webkit-datetime-edit-month-field,
.tk-modal-date-input::-webkit-datetime-edit-day-field,
.tk-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.tk-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.tk-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.tk-modal-sales-person-dropdown {
  position: relative;
}
.tk-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.tk-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.tk-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.tk-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.tk-modal-sales-person-separator {
  color: #999999;
}
.tk-modal-sales-person-name {
  color: #333333;
}
.tk-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.tk-modal-sales-team-dropdown {
  position: relative;
}
.tk-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.tk-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.tk-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.tk-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.tk-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tk-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tk-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.tk-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.tk-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.tk-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.tk-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.tk-modal-sales-team-separator {
  color: #999999;
}
.tk-modal-sales-team-name {
  color: #333333;
}
.tk-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.tk-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.tk-modal-territory-dropdown {
  position: relative;
}

.tk-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tk-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-territory-separator {
  color: #999999;
}

.tk-modal-territory-name {
  color: #333333;
}

.tk-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.tk-modal-sales-office-dropdown {
  position: relative;
}

.tk-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tk-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.tk-modal-sales-office-separator {
  color: #999999;
}

.tk-modal-sales-office-name {
  color: #333333;
}

.tk-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.tk-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.tk-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.tk-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.tk-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.tk-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.tk-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.tk-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-table-dropdown-input:focus {
  outline: none;
}

.tk-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.tk-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.tk-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.tk-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.tk-modal-delivery-type-list::-webkit-scrollbar,
.tk-modal-stage-dropdown-list::-webkit-scrollbar,
.tk-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.tk-modal-delivery-type-list::-webkit-scrollbar-track,
.tk-modal-stage-dropdown-list::-webkit-scrollbar-track,
.tk-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-delivery-type-list::-webkit-scrollbar-thumb,
.tk-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.tk-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.tk-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.tk-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.tk-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.tk-modal-wrapper,
.tk-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.task-tracker-modal,
.tk-modal-wrapper,
.tk-modal-wrapper *,
.tk-modal-content,
.tk-modal-data-flow-2-container,
.tk-modal-data-flow-container,
.tk-modal-calendar-container,
.tk-modal-calendar-milestones-list,
.tk-modal-calendar-view,
.tk-modal-calendar-yearly,
.tk-modal-calendar-monthly,
.tk-modal-calendar-weekly,
.tk-modal-calendar-weekly-body,
.tk-modal-calendar-daily,
.tk-modal-calendar-daily-timeline,
.tk-modal-calendar-grid,
.tk-modal-calendar-grid-body,
.tk-modal-detail-table-container,
.tk-modal-item-table-wrapper,
.tk-modal-attachment-table-container,
.tk-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.tk-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.tk-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.tk-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.tk-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.tk-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.tk-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.tk-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.tk-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.tk-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-tab-content--display .tk-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.tk-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-tab-content--display .tk-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.tk-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.tk-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.tk-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) {
  font-weight: 600;
}

.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) .tk-modal-packaging-input,
.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) .tk-modal-packaging-input--display,
.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) .tk-modal-handling-product-input,
.tk-modal-packaging-row--unassigned:not(.tk-modal-packaging-row--expanded) .tk-modal-handling-product-input--display {
  font-weight: 600;
}

.tk-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.tk-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row td.tk-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row td.tk-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row td.tk-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td.tk-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded td.tk-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row--expanded:hover td.tk-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display,
.tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display,
.tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.tk-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.tk-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-tab-content--display .tk-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.tk-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-tab-content--display .tk-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.tk-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.tk-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.tk-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.tk-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.tk-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.tk-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.tk-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.tk-modal-packaging-detail-table th:first-child,
.tk-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.tk-modal-packaging-detail-table th:nth-child(2),
.tk-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.tk-modal-packaging-detail-table th:nth-child(3),
.tk-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.tk-modal-packaging-detail-table td:nth-child(4),
.tk-modal-packaging-detail-table td:nth-child(6),
.tk-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.tk-modal-packaging-detail-table td:nth-child(5),
.tk-modal-packaging-detail-table td:nth-child(7),
.tk-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.tk-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.tk-modal-tab-content--display .tk-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display .tk-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.tk-modal-tab-content--display .tk-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.tk-modal-tab-content--display .tk-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.tk-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.tk-modal-packaging-table td:last-child,
.tk-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.tk-modal-packaging-table td:last-child .tk-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.tk-modal-detail-table-container--external .tk-modal-packaging-table th:last-child,
.tk-modal-detail-table-container--external .tk-modal-packaging-table td.tk-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.tk-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.tk-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.tk-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.tk-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.tk-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.tk-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.tk-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.tk-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.tk-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.tk-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.tk-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.tk-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.tk-modal-packaging-child-table tr {
  border: none !important;
}

.tk-modal-packaging-child-table thead,
.tk-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.tk-modal-packaging-child-table th:first-child,
.tk-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.tk-modal-packaging-child-table th:nth-child(2),
.tk-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.tk-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.tk-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.tk-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.tk-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.tk-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.tk-modal-packaging-child-table th:nth-child(3),
.tk-modal-packaging-child-table td:nth-child(3),
.tk-modal-packaging-child-table th:nth-child(4),
.tk-modal-packaging-child-table td:nth-child(4),
.tk-modal-packaging-child-table th:nth-child(5),
.tk-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.tk-modal-packaging-child-table th:nth-child(6),
.tk-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.tk-modal-packaging-child-table th:nth-child(7),
.tk-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.tk-modal-detail-table-container--external .tk-modal-packaging-child-table th:last-child,
.tk-modal-detail-table-container--external .tk-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.tk-modal-packaging-child-table td:last-child .tk-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.tk-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.tk-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.tk-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.tk-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.tk-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row {
  transition: none !important;
}

.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display,
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display:focus,
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display,
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display:focus,
.tk-modal-tab-content--display .tk-modal-detail-table-container .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display:focus,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display:focus,
.tk-modal-tab-content--display .tk-modal-detail-table-container--external .tk-modal-packaging-table tbody tr.tk-modal-packaging-row:hover td .tk-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.tk-modal-detail-table-container--external .tk-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.tk-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tk-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.tk-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.tk-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.tk-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.tk-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.tk-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.tk-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.tk-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.tk-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.tk-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.tk-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.tk-modal-detail-table-container--external .tk-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.tk-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-item--display {
  color: #999999 !important;
}

.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-code,
.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-name,
.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-separator {
  color: #999999 !important;
}

.tk-modal-handling-product-dropdown-content--display .tk-modal-handling-product-check {
  color: #999999 !important;
}

.tk-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.tk-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.tk-modal-handling-product-dropdown-content--narrow .tk-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.tk-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.tk-modal-packaging-detail-table .tk-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.tk-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.tk-modal-detail-table-container--dropdown-open .tk-modal-detail-table {
  overflow: visible;
}

.tk-modal-detail-table-container--dropdown-open .tk-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.tk-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tk-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.tk-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.tk-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.tk-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.tk-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.tk-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.tk-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.tk-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.tk-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.tk-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.tk-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.tk-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.tk-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.tk-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.tk-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.tk-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.tk-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tk-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.tk-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.tk-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-item:hover {
  background-color: transparent;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-item--placeholder {
  display: none;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-code,
.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-name,
.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-separator {
  color: #555555;
}

.tk-modal-handling-product-dropdown-content--view-only .tk-modal-handling-product-check {
  color: #888888;
}

.tk-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.tk-modal-handling-product-separator {
  color: #999999;
}

.tk-modal-handling-product-name {
  color: #333333;
}

.tk-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.tk-modal-handling-product-item--placeholder {
  cursor: default;
}

.tk-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.tk-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.tk-modal-detail-table td:has(.tk-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.tk-modal-detail-table td .tk-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.tk-modal-detail-table td .tk-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.tk-modal-detail-table td .tk-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.tk-modal-detail-table td .tk-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.tk-modal-detail-table td .tk-modal-handling-product-input--display,
.tk-modal-detail-table td .tk-modal-handling-product-input--display:focus,
.tk-modal-detail-table td .tk-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display,
.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display:focus,
.tk-modal-detail-table-container .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display:focus,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover td .tk-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.tk-modal-detail-table td .tk-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.tk-modal-detail-table td .tk-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.tk-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.tk-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.tk-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.tk-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-table-text-icon-btn--filled:not(.tk-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.tk-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.tk-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.tk-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.tk-modal-table-text-icon-btn--display.tk-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.tk-modal-table-text-icon-btn--display.tk-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-table-text-icon-btn--display.tk-modal-table-text-icon-btn--external.tk-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.tk-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.tk-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.tk-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.tk-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.tk-modal-serial-assignment-btn {
  width: 10.625rem;
}

.tk-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.tk-modal-batch-assignment-btn--filled .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.tk-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.tk-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.tk-modal-batch-assignment-btn--display .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-batch-assignment-btn--display.tk-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.tk-modal-batch-assignment-btn--display.tk-modal-batch-assignment-btn--filled .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.tk-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.tk-modal-secured-qty-btn.tk-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.tk-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.tk-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.tk-modal-secured-qty-btn--grey .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.tk-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.tk-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.tk-modal-batch-assignment-btn--partial .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.tk-modal-batch-assignment-btn--display.tk-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.tk-modal-batch-assignment-btn--display.tk-modal-batch-assignment-btn--partial .tk-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.tk-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.tk-modal-secured-qty-modal .tk-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.tk-modal-secured-qty-modal .tk-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.tk-modal-secured-qty-modal.tk-modal-batch-assignment-modal--display .tk-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.tk-modal-secured-qty-modal .tk-modal-item-text-content {
  overflow-x: hidden;
}

.tk-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.tk-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.tk-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.tk-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.tk-modal-batch-assignment-modal--display .tk-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.tk-modal-batch-assignment-modal--display .tk-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.tk-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.tk-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.tk-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.tk-modal-secured-qty-lock-btn--open .tk-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.tk-modal-secured-qty-lock-btn--locked .tk-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.tk-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.tk-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.tk-modal-batch-assignment-modal .tk-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.tk-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.tk-modal-batch-assignment-modal .tk-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.tk-modal-batch-assignment-modal .tk-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.tk-modal-batch-assignment-modal.tk-modal-batch-assignment-modal--display .tk-modal-item-text-info {
  background-color: #F2F8EA;
}

.tk-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.tk-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.tk-modal-batch-assignment-info-group {
  flex: 1 1;
}

.tk-modal-batch-assignment-info-group .tk-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.tk-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.tk-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tk-modal-batch-assignment-table-section .tk-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.tk-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.tk-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.tk-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.tk-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.tk-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.tk-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.tk-modal-batch-assignment-table th,
.tk-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.tk-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.tk-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.tk-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.tk-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.tk-modal-batch-assignment-table tbody td:has(.tk-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.tk-modal-batch-assignment-table tbody td:has(.tk-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.tk-modal-batch-assignment-table tbody td:nth-child(2),
.tk-modal-batch-assignment-table tbody td:nth-child(3),
.tk-modal-batch-assignment-table tbody td:nth-child(4),
.tk-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.tk-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.tk-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.tk-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tk-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.tk-modal-batch-assignment-modal--display .tk-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.tk-modal-batch-assignment-modal--display .tk-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.tk-modal-batch-assignment-modal--display .tk-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-batch-assignment-modal--display .tk-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.tk-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.tk-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.tk-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.tk-modal-batch-assignment-table .tk-modal-placeholder-text {
  color: #CCCCCC;
}

.tk-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.tk-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.tk-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.tk-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.tk-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.tk-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.tk-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.tk-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.tk-modal-batch-assignment-table th.batch-table-frozen-batch,
table.tk-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.tk-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.tk-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.tk-modal-batch-assignment-table td.batch-table-frozen-batch,
table.tk-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.tk-modal-batch-assignment-table th.batch-table-frozen-batch,
table.tk-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.tk-modal-batch-assignment-table th.batch-table-frozen-assign,
table.tk-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.tk-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.tk-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.tk-modal-item-text-info {
  margin-bottom: 1rem;
}

.tk-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.tk-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.tk-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.tk-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.tk-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.tk-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.tk-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.tk-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-item-text-modal .modal-header .modal-title,
.tk-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.tk-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.tk-modal-item-text-label--display {
  color: #333333;
}

.tk-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.tk-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.tk-modal-item-text-modal .tk-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.tk-modal-item-text-modal .tk-modal-item-text-textarea-wrapper .tk-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.tk-modal-item-text-textarea {
  overflow-y: auto !important;
}

.tk-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.tk-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.tk-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.tk-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.tk-modal-add-do-item-modal .tk-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.tk-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.tk-modal-add-do-item-dropdown-section .tk-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.tk-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tk-modal-add-do-item-table-section .tk-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.tk-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.tk-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.tk-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.tk-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.tk-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.tk-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.tk-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.tk-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.tk-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.tk-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.tk-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.tk-modal-detail-table td:first-child .tk-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.tk-modal-detail-table td:first-child .tk-modal-partner-type-input {
  padding-left: 0.625rem;
}

.tk-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.tk-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.tk-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.tk-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.tk-modal-partner-type-dropdown--display .tk-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.tk-modal-partner-type-dropdown-content--display .tk-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-partner-type-dropdown-content--display .tk-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.tk-modal-partner-type-dropdown-content--display .tk-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-partner-type-dropdown-content--display .tk-modal-partner-type-check {
  color: #999999 !important;
}

.tk-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.tk-modal-partner-type-dropdown--display .tk-modal-partner-type-value {
  color: #555555;
}

.tk-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.tk-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.tk-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.tk-modal-partner-type-item--placeholder {
  cursor: default;
}

.tk-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.tk-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.tk-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.tk-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.tk-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.tk-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.tk-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.tk-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.tk-modal-partner-id-dropdown--display .tk-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-code,
.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-name,
.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-separator {
  color: #999999 !important;
}

.tk-modal-partner-id-dropdown-content--display .tk-modal-partner-id-check {
  color: #999999 !important;
}

.tk-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.tk-modal-partner-id-dropdown--display .tk-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.tk-modal-detail-table tbody tr:hover .tk-modal-partner-type-dropdown--display .tk-modal-partner-type-input-wrapper,
.tk-modal-detail-table tbody tr:hover .tk-modal-partner-id-dropdown--display .tk-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .tk-modal-partner-type-dropdown--display .tk-modal-partner-type-input-wrapper,
.tk-modal-detail-table-container--external .tk-modal-detail-table tbody tr:hover .tk-modal-partner-id-dropdown--display .tk-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.tk-modal-partner-type-arrow--external {
  visibility: hidden;
}

.tk-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.tk-modal-partner-type-dropdown--external .tk-modal-partner-type-value {
  color: #555555;
}

.tk-modal-partner-id-dropdown--external .tk-modal-partner-id-value {
  color: #555555;
}

.tk-modal-detail-table-container--external .tk-modal-detail-table td.tk-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.tk-modal-partner-header-section--external .tk-modal-form-input--display {
  color: #555555;
}

.tk-modal-detail-table td.tk-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.tk-modal-tab-content--display .tk-modal-detail-table td.tk-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.tk-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.tk-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.tk-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.tk-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.tk-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.tk-modal-partner-id-item--placeholder {
  cursor: default;
}

.tk-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.tk-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.tk-modal-partner-id-separator {
  color: #999999;
}

.tk-modal-partner-id-name {
  color: #666666;
}

.tk-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.tk-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.tk-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.tk-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.tk-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.tk-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.tk-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.tk-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.tk-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.tk-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.tk-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.tk-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.tk-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.tk-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.tk-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.tk-modal-data-flow-stage--completed .tk-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.tk-modal-data-flow-stage--active .tk-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.tk-modal-data-flow-stage--completed .tk-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-data-flow-stage--active .tk-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.tk-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.tk-modal-data-flow-stage--completed .tk-modal-data-flow-stage-label {
  color: #138B4C;
}

.tk-modal-data-flow-stage--active .tk-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.tk-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.tk-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.tk-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.tk-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.tk-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.tk-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.tk-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.tk-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.tk-modal-data-flow-document--active .tk-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.tk-modal-data-flow-document-fold {
  display: none;
}

.tk-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.tk-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.tk-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.tk-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.tk-modal-data-flow-document-icon-wrapper--active .tk-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.tk-modal-data-flow-document--active .tk-modal-data-flow-document-title {
  color: #138B4C;
}

.tk-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.tk-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.tk-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.tk-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.tk-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.tk-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.tk-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.tk-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.tk-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tk-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.tk-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.tk-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.tk-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.tk-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.tk-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.tk-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.tk-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.tk-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.tk-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.tk-modal-terms-area-button .tk-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.tk-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.tk-modal-tab-content--display .tk-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.tk-modal-tab-content--display .tk-modal-terms-area-button .tk-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.tk-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.tk-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.tk-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.tk-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.tk-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.tk-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.tk-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.tk-modal-data-flow-2-row {
  display: flex;
}

.tk-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.tk-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.tk-modal-data-flow-2-row--content .tk-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.tk-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.tk-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.tk-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.tk-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-label {
  color: #333333;
}

.tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage-label {
  color: #999999;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--completed .tk-modal-data-flow-2-stage-label {
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--active .tk-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.tk-modal-tab-content--display .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.tk-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.tk-modal-data-flow-2-row--content .tk-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.tk-modal-data-flow-2-row--content .tk-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tk-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tk-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.tk-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.tk-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.tk-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.tk-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.tk-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.tk-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.tk-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-title,
.tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-title {
  color: #333333;
}

.tk-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.tk-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.tk-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.tk-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-title {
  color: #888888;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-title,
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-title {
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--completed .tk-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--active .tk-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-date {
  color: #333333;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.tk-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.tk-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.tk-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.tk-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.tk-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.tk-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.tk-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.tk-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.tk-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.tk-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.tk-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.tk-modal-data-flow-2-grid--external .tk-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.tk-modal-data-flow-2-grid--external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell {
  border-bottom: none;
}

.tk-modal-data-flow-2-grid--external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.tk-modal-data-flow-2-grid--external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell--label::after {
  display: none;
}

.tk-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.tk-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.tk-modal-data-flow-2-row--content-top .tk-modal-data-flow-2-document--buyer.tk-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.tk-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.tk-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tk-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.tk-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.tk-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.tk-modal-data-flow-2-stage--external-completed .tk-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.tk-modal-data-flow-2-stage--external-active .tk-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.tk-modal-data-flow-2-stage--external-completed .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.tk-modal-data-flow-2-stage--external-active .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.tk-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.tk-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.tk-modal-data-flow-2-document--external .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.tk-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.tk-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.tk-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.tk-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.tk-modal-data-flow-2-document--external .tk-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.tk-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.tk-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.tk-modal-data-flow-2-document--supplier .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.tk-modal-data-flow-2-document--supplier .tk-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.tk-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.tk-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.tk-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.tk-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier .tk-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier .tk-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-completed .tk-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--supplier-active .tk-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.tk-modal-tab-content--data-flow-2-external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.tk-modal-tab-content--data-flow-2-external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external .tk-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external .tk-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.tk-modal-tab-content--display.tk-modal-tab-content--data-flow-2-external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.tk-modal-tab-content--display.tk-modal-tab-content--data-flow-2-external .tk-modal-data-flow-2-row--header .tk-modal-data-flow-2-cell:has(.tk-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-circle,
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external-completed .tk-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external-active .tk-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-icon,
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external-completed .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external-active .tk-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-stage--external .tk-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-completed .tk-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.tk-modal-tab-content--display .tk-modal-data-flow-2-document--external-active .tk-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.tk-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.tk-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.tk-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.tk-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.tk-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.tk-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.tk-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.tk-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tk-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.tk-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.tk-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.tk-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.tk-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.tk-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.tk-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.tk-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.tk-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.tk-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.tk-modal-milestone-date-value {
  color: #666666;
}

.tk-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.tk-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.tk-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.tk-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.tk-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.tk-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.tk-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.tk-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.tk-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.tk-modal-activity-item--display .tk-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.tk-modal-calendar-milestones .tk-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.tk-modal-calendar-milestones .tk-modal-activity-user:hover {
  text-decoration: none;
}

.tk-modal-calendar-milestones .tk-modal-activity-item--display .tk-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.tk-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.tk-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tk-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tk-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.tk-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-calendar-nav-btn:hover .tk-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.tk-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.tk-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.tk-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tk-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.tk-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.tk-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.tk-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.tk-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.tk-modal-calendar-view-mode-btn--active + .tk-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.tk-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tk-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.tk-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.tk-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.tk-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.tk-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.tk-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.tk-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.tk-modal-calendar-grid-cell:nth-child(7n-1),
.tk-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.tk-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.tk-modal-calendar-grid-day-name:nth-child(6),
.tk-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.tk-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.tk-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.tk-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.tk-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.tk-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.tk-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.tk-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tk-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.tk-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tk-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.tk-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tk-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.tk-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.tk-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.tk-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tk-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.tk-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.tk-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.tk-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.tk-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.tk-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.tk-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.tk-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.tk-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.tk-modal-calendar-weekly-day-column:nth-child(6),
.tk-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.tk-modal-calendar-weekly-day-header:nth-child(6),
.tk-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.tk-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.tk-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.tk-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.tk-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.tk-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.tk-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.tk-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.tk-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.tk-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tk-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.tk-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.tk-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.tk-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.tk-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.tk-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.tk-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.tk-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.tk-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.tk-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.tk-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.tk-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.tk-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.tk-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.tk-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.tk-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-view {
  border-color: #D0D0D0;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-view-mode-btn--active + .tk-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-milestones-header {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-view-title {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-grid-day-name {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-grid-cell-day {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-weekly-day-name {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-weekly-day-date {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-weekly-event-title {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-daily-header {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-daily-hour-label {
  color: #666666;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-daily-event-title {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar .tk-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.tk-modal-calendar-milestones-header--external {
  color: #333333;
}

.tk-modal-calendar-nav-btn--external .tk-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.tk-modal-calendar-nav-btn--external:hover .tk-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.tk-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.tk-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.tk-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.tk-modal-calendar-view-mode-btn--active-external + .tk-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.tk-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.tk-modal-tab-content--calendar-external .tk-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.tk-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.tk-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.tk-modal-activity-type--external {
  color: #333333;
}

.tk-modal-activity-user--external {
  color: #E67E22;
}

.tk-modal-activity-user--external:hover {
  color: #D35400;
}

.tk-modal-calendar-milestones .tk-modal-activity-user--external {
  color: #E67E22;
}

.tk-modal-calendar-milestones .tk-modal-activity-user--external:hover {
  color: #D35400;
}

.tk-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.tk-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.tk-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.tk-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.tk-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.tk-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.tk-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.tk-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.tk-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.tk-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.tk-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.tk-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.tk-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-milestones-header--external {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-view-mode-btn--active-external + .tk-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-calendar-nav-btn--external .tk-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-activity-type--external {
  color: #333333;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-activity-user--external {
  color: #E67E22;
}

.tk-modal-tab-content--display.tk-modal-tab-content--calendar-external .tk-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.tk-modal-input--error,
.tk-modal-form-input.tk-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.tk-modal-dropdown--error .tk-modal-delivery-type-input,
.tk-modal-dropdown--error .tk-modal-organization-input,
.tk-modal-dropdown--error .tk-modal-sales-structure-input,
.tk-modal-dropdown--error .tk-modal-sales-channel-input,
.tk-modal-dropdown--error .tk-modal-sales-unit-input,
.tk-modal-dropdown--error .tk-modal-territory-input,
.tk-modal-dropdown--error .tk-modal-sales-office-input,
.tk-modal-dropdown--error .tk-modal-sold-to-party-input,
.tk-modal-dropdown--error .tk-modal-deliver-to-party-input,
.tk-modal-dropdown--error .tk-modal-attention-to-deliver-input,
.tk-modal-dropdown--error .tk-modal-incoterm-input,
.tk-modal-dropdown--error .tk-modal-delivery-point-input,
.tk-modal-dropdown--error .tk-modal-shipping-point-input,
.tk-modal-dropdown--error .tk-modal-sales-order-input,
.tk-modal-dropdown--error .tk-modal-sales-team-input,
.tk-modal-dropdown--error .tk-modal-sales-person-input,
.tk-modal-dropdown--error .tk-modal-delivery-priority-input,
.tk-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.tk-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.tk-modal-date-picker-wrapper.tk-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.tk-modal-custom-dropdown {
  position: relative;
}

.tk-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tk-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.tk-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.tk-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.tk-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-check {
  color: #999999 !important;
}

.tk-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.tk-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tk-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.tk-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.tk-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tk-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.tk-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.tk-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.tk-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.tk-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.tk-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.tk-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.tk-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tk-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.tk-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.tk-modal-setting-form-label--display {
  color: #333333;
}

.tk-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.tk-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-setting-dropdown--active .tk-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.tk-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.tk-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.tk-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.tk-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.tk-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.tk-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.tk-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-setting-dropdown-icon.tk-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.tk-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.tk-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.tk-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.tk-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.tk-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.tk-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.tk-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.tk-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.tk-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.tk-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.tk-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.tk-modal-setting-dropdown-item-separator {
  color: #999999;
}

.tk-modal-setting-dropdown-item-name {
  color: #333333;
}

.tk-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.tk-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.tk-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.tk-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.tk-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.tk-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.tk-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.tk-modal-setting-tab-content--print .tk-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.tk-modal-setting-tab-content--print .tk-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-modal-setting-tab-content--print .tk-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.tk-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.tk-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.tk-modal-setting-table thead tr {
  height: 2.25rem;
}

.tk-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.tk-modal-setting-table tbody tr {
  height: 2.25rem;
}

.tk-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.tk-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.tk-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.tk-modal-setting-table--display thead th:nth-child(2),
.tk-modal-setting-table--display thead th:nth-child(3),
.tk-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.tk-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.tk-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.tk-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.tk-modal-setting-table--transfer.tk-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.tk-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.tk-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.tk-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.tk-modal-setting-table--transfer:not(.tk-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.tk-modal-setting-table--transfer:not(.tk-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.tk-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.tk-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.tk-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.tk-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.tk-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.tk-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.tk-modal-tab-content--display .tk-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.tk-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.tk-modal-tab-content--display .tk-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.tk-modal-attribute-header-section--external .tk-modal-form-input:focus {
  border-color: #F5B041;
}

.tk-modal-attribute-header-section--external .tk-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.tk-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.tk-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.tk-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.tk-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.tk-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.tk-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.tk-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.tk-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.tk-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.tk-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.tk-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.tk-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.tk-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.tk-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.tk-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.tk-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.tk-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.tk-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.tk-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.tk-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.tk-modal-available-qty-tree-level {
  position: relative;
}

.tk-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.tk-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.tk-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.tk-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.tk-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.tk-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.tk-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.tk-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.tk-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.tk-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.tk-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.tk-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.tk-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.tk-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.tk-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.tk-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.tk-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.tk-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.tk-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.tk-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.tk-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.tk-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.tk-modal-available-qty-tree-batch-header .tk-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.tk-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.tk-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.tk-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tk-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.tk-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.tk-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.tk-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.tk-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.tk-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.tk-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.tk-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.tk-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.tk-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.tk-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.tk-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.tk-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.tk-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.tk-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.tk-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.tk-modal-activity-type--clickable.tk-modal-activity-type--display:hover {
  color: #138B4C;
}

.tk-modal-activity-type--clickable.tk-modal-activity-type--external:hover {
  color: #E67E00;
}

.tk-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tk-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.tk-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tk-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.tk-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tk-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.tk-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tk-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to tk-modal-form-label */
.tk-modal-activity-detail-content .tk-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.tk-modal-activity-detail-modal .tk-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.tk-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.tk-modal-activity-detail-modal .tk-modal-tabs--display .tk-modal-tab {
  color: #333333;
}

.tk-modal-activity-detail-modal .tk-modal-tabs--display .tk-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.tk-modal-activity-detail-modal .tk-modal-tabs--external.tk-modal-tabs--display .tk-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.tk-modal-activity-detail-tab-content--general .tk-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.tk-modal-activity-detail-content .tk-modal-milestone-status {
  margin: 0;
}

.tk-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.tk-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.tk-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.tk-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.tk-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.tk-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.tk-modal-activity-detail-pic-chat-wrapper:hover .tk-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.tk-modal-activity-detail-pic-chat-wrapper:hover .tk-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.tk-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.tk-modal-activity-detail-pic--clickable:hover .tk-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.tk-modal-activity-detail-content--external .tk-modal-activity-detail-pic {
  color: #E67E22;
}

.tk-modal-activity-detail-content--external .tk-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.tk-modal-activity-detail-content--external .tk-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.tk-modal-activity-detail-content--external .tk-modal-activity-detail-pic--clickable:hover .tk-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.tk-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.tk-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.tk-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.tk-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.tk-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.tk-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.tk-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.tk-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.tk-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.tk-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.tk-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tk-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.tk-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.tk-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.tk-modal-activity-detail-content--external .tk-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.tk-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.tk-modal-activity-detail-content--external .tk-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.tk-modal-activity-detail-content--external .tk-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.tk-modal-activity-detail-content--external .tk-modal-activity-detail-document-name {
  color: #E67E22;
}

.tk-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.tk-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.tk-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.tk-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.tk-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.tk-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.tk-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.tk-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.tk-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.tk-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.tk-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.tk-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.tk-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.tk-modal-activity-detail-tab-content--general {
  padding: 0;
}

.tk-modal-activity-detail-tab-content--general .tk-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.tk-modal-activity-detail-tab-content--general > div:not(.tk-modal-item-text-info) {
  padding: 0 1.5rem;
}

.tk-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.tk-modal-activity-detail-tab-content--attachment,
.tk-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.tk-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.tk-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.tk-modal-activity-detail-tab-content--attachment .tk-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.tk-modal-activity-detail-tab-content--attachment .tk-modal-batch-assignment-table-section > .tk-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.tk-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.tk-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.tk-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.tk-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.tk-modal-activity-detail-content--external .tk-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.tk-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.tk-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.tk-modal-activity-detail-content--external .tk-modal-item-text-info {
  background-color: #FEF5E7;
}

.tk-modal-activity-detail-content--external .tk-modal-task-notes-section {
  background-color: #FEF5E7;
}

.tk-modal-task-notes-section .tk-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.tk-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.tk-modal-task-notes-textarea.tk-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.tk-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.tk-modal-task-chat-section > .tk-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.tk-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.tk-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.tk-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tk-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tk-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.tk-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.tk-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.tk-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.tk-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.tk-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.tk-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.tk-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.tk-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.tk-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.tk-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.tk-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.tk-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.tk-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.tk-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.tk-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.tk-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.tk-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.tk-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.tk-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.tk-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.tk-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.tk-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.tk-modal-activity-detail-content--external .tk-modal-task-chat-avatar {
  background-color: #F5B041;
}

.tk-modal-activity-detail-content--external .tk-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.tk-modal-activity-detail-content--external .tk-modal-task-chat-reply-btn {
  color: #E67E22;
}

.tk-modal-activity-detail-content--external .tk-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.tk-modal-dropdown--display .tk-modal-dropdown-item,
.tk-modal-dropdown--display [class*="-item"],
.tk-modal-tags-dropdown--display .tk-modal-tags-dropdown-item,
.tk-modal-baseline-date-dropdown--display .tk-modal-baseline-date-item,
.tk-modal-reference-type-dropdown--display .tk-modal-reference-type-item,
.tk-modal-delivery-priority-dropdown--display .tk-modal-delivery-priority-item,
.tk-modal-organization-dropdown--display .tk-modal-organization-item,
.tk-modal-sales-structure-dropdown--display .tk-modal-sales-structure-item,
.tk-modal-delivery-type-dropdown--display .tk-modal-delivery-type-item,
.tk-modal-sales-channel-dropdown--display .tk-modal-sales-channel-item,
.tk-modal-sales-unit-dropdown--display .tk-modal-sales-unit-item,
.tk-modal-sold-to-party-dropdown--display .tk-modal-sold-to-party-item,
.tk-modal-deliver-to-party-dropdown--display .tk-modal-deliver-to-party-item,
.tk-modal-attention-to-deliver-dropdown--display .tk-modal-attention-to-deliver-item,
.tk-modal-incoterm-dropdown--display .tk-modal-incoterm-item,
.tk-modal-delivery-point-dropdown--display .tk-modal-delivery-point-item,
.tk-modal-shipping-point-dropdown--display .tk-modal-shipping-point-item,
.tk-modal-sales-order-dropdown--display .tk-modal-sales-order-item,
.tk-modal-sales-person-dropdown--display .tk-modal-sales-person-item,
.tk-modal-sales-team-dropdown--display .tk-modal-sales-team-item,
.tk-modal-territory-dropdown--display .tk-modal-territory-item,
.tk-modal-sales-office-dropdown--display .tk-modal-sales-office-item,
.tk-modal-status-dropdown--display .tk-modal-status-item,
.tk-modal-handling-product-dropdown--display .tk-modal-handling-product-item,
.tk-modal-child-uom-dropdown--display .tk-modal-child-uom-item,
.tk-modal-partner-type-dropdown--display .tk-modal-partner-type-item,
.tk-modal-partner-id-dropdown--display .tk-modal-partner-id-item,
.tk-modal-custom-dropdown--display .tk-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.tk-modal-dropdown--display .tk-modal-dropdown-item:hover,
.tk-modal-dropdown--display [class*="-item"]:hover,
.tk-modal-tags-dropdown--display .tk-modal-tags-dropdown-item:hover,
.tk-modal-baseline-date-dropdown--display .tk-modal-baseline-date-item:hover,
.tk-modal-reference-type-dropdown--display .tk-modal-reference-type-item:hover,
.tk-modal-delivery-priority-dropdown--display .tk-modal-delivery-priority-item:hover,
.tk-modal-organization-dropdown--display .tk-modal-organization-item:hover,
.tk-modal-sales-structure-dropdown--display .tk-modal-sales-structure-item:hover,
.tk-modal-delivery-type-dropdown--display .tk-modal-delivery-type-item:hover,
.tk-modal-sales-channel-dropdown--display .tk-modal-sales-channel-item:hover,
.tk-modal-sales-unit-dropdown--display .tk-modal-sales-unit-item:hover,
.tk-modal-sold-to-party-dropdown--display .tk-modal-sold-to-party-item:hover,
.tk-modal-deliver-to-party-dropdown--display .tk-modal-deliver-to-party-item:hover,
.tk-modal-attention-to-deliver-dropdown--display .tk-modal-attention-to-deliver-item:hover,
.tk-modal-incoterm-dropdown--display .tk-modal-incoterm-item:hover,
.tk-modal-delivery-point-dropdown--display .tk-modal-delivery-point-item:hover,
.tk-modal-shipping-point-dropdown--display .tk-modal-shipping-point-item:hover,
.tk-modal-sales-order-dropdown--display .tk-modal-sales-order-item:hover,
.tk-modal-sales-person-dropdown--display .tk-modal-sales-person-item:hover,
.tk-modal-sales-team-dropdown--display .tk-modal-sales-team-item:hover,
.tk-modal-territory-dropdown--display .tk-modal-territory-item:hover,
.tk-modal-sales-office-dropdown--display .tk-modal-sales-office-item:hover,
.tk-modal-status-dropdown--display .tk-modal-status-item:hover,
.tk-modal-handling-product-dropdown--display .tk-modal-handling-product-item:hover,
.tk-modal-child-uom-dropdown--display .tk-modal-child-uom-item:hover,
.tk-modal-partner-type-dropdown--display .tk-modal-partner-type-item:hover,
.tk-modal-partner-id-dropdown--display .tk-modal-partner-id-item:hover,
.tk-modal-custom-dropdown--display .tk-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.tk-modal-dropdown--display [class*="-item--selected"],
.tk-modal-tags-dropdown--display .tk-modal-tags-dropdown-item--selected,
.tk-modal-baseline-date-dropdown--display .tk-modal-baseline-date-item--selected,
.tk-modal-reference-type-dropdown--display .tk-modal-reference-type-item--selected,
.tk-modal-delivery-priority-dropdown--display .tk-modal-delivery-priority-item--selected,
.tk-modal-organization-dropdown--display .tk-modal-organization-item--selected,
.tk-modal-sales-structure-dropdown--display .tk-modal-sales-structure-item--selected,
.tk-modal-delivery-type-dropdown--display .tk-modal-delivery-type-item--selected,
.tk-modal-sales-channel-dropdown--display .tk-modal-sales-channel-item--selected,
.tk-modal-sales-unit-dropdown--display .tk-modal-sales-unit-item--selected,
.tk-modal-sold-to-party-dropdown--display .tk-modal-sold-to-party-item--selected,
.tk-modal-deliver-to-party-dropdown--display .tk-modal-deliver-to-party-item--selected,
.tk-modal-attention-to-deliver-dropdown--display .tk-modal-attention-to-deliver-item--selected,
.tk-modal-incoterm-dropdown--display .tk-modal-incoterm-item--selected,
.tk-modal-delivery-point-dropdown--display .tk-modal-delivery-point-item--selected,
.tk-modal-shipping-point-dropdown--display .tk-modal-shipping-point-item--selected,
.tk-modal-sales-order-dropdown--display .tk-modal-sales-order-item--selected,
.tk-modal-sales-person-dropdown--display .tk-modal-sales-person-item--selected,
.tk-modal-sales-team-dropdown--display .tk-modal-sales-team-item--selected,
.tk-modal-territory-dropdown--display .tk-modal-territory-item--selected,
.tk-modal-sales-office-dropdown--display .tk-modal-sales-office-item--selected,
.tk-modal-status-dropdown--display .tk-modal-status-item--selected,
.tk-modal-handling-product-dropdown--display .tk-modal-handling-product-item--selected,
.tk-modal-child-uom-dropdown--display .tk-modal-child-uom-item--selected,
.tk-modal-partner-type-dropdown--display .tk-modal-partner-type-item--selected,
.tk-modal-partner-id-dropdown--display .tk-modal-partner-id-item--selected,
.tk-modal-custom-dropdown--display .tk-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.tk-modal-dropdown--display [class*="-check"],
.tk-modal-dropdown--display .tk-modal-dropdown-check,
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.tk-modal-dropdown--display [class*="-item-code"],
.tk-modal-dropdown--display [class*="-item-name"],
.tk-modal-dropdown--display [class*="-item-content"],
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-code,
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-name,
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-item,
.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.tk-modal-sold-to-party-dropdown-content--display .tk-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.tk-modal-tags-dropdown--display .tk-modal-tags-item,
.tk-modal-tags-dropdown--display .tk-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-tags-dropdown--display .tk-modal-tags-item:hover {
  background-color: transparent !important;
}

.tk-modal-tags-dropdown--display .tk-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.tk-modal-tags-dropdown--display .tk-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item,
.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.tk-modal-custom-dropdown-list--display .tk-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* ========================================
   Progress Tab - Checklist & Timeline
   ======================================== */
.tk-modal-progress-container { padding: 1rem; }
.tk-modal-checklist-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.tk-modal-checklist-table th { background-color: #fafafa; padding: 0.5rem 0.75rem; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
.tk-modal-checklist-table td { padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; }
.tk-modal-checklist-checkbox { width: 1rem; height: 1rem; cursor: pointer; }
.tk-modal-checklist-item--checked { text-decoration: line-through; color: #999; }
.tk-modal-timeline-container { padding: 0 1rem; }
.tk-modal-timeline-entry { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.tk-modal-timeline-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; margin-top: 0.25rem; flex-shrink: 0; }
.tk-modal-timeline-content { flex: 1 1; }
.tk-modal-timeline-action { font-size: 0.8125rem; font-weight: 500; color: #333; }
.tk-modal-timeline-details { font-size: 0.75rem; color: #666; margin-top: 2px; }
.tk-modal-timeline-date { font-size: 0.6875rem; color: #999; margin-top: 2px; }
.tk-modal-completion-bar { height: 0.5rem; background-color: #e0e0e0; border-radius: 0.25rem; overflow: hidden; }
.tk-modal-completion-fill { height: 100%; border-radius: 0.25rem; background-color: #4caf50; transition: width 0.3s; }
.tk-modal-completion-text { font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; }

/* ===== from pages/Sales/Tender/Tender.css ===== */
/* Quotation Wrapper - prevent page scroll */
.tender-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Quotation Container */
.tender-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.tender-header {
  margin-bottom: 0;
}

.tender-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Quotation Control - Exact copy of third-nav-control */
.tender-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.tender-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.tender-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tender-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tender-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.tender-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.tender-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.tender-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.tender-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.tender-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.tender-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.tender-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.tender-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.tender-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.tender-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.tender-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.tender-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.tender-layout-dropdown-item:last-child {
  border-bottom: none;
}

.tender-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.tender-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.tender-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.tender-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.tender-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.tender-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.tender-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.tender-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tender-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tender-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.tender-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.tender-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.tender-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.tender-filter-parameter-wrapper {
  position: relative;
}

.tender-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.tender-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tender-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.tender-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tender-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.tender-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.tender-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.tender-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.tender-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.tender-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.tender-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.tender-filter-close:hover {
  background-color: #f0f0f0;
}

.tender-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.tender-filter-group {
  margin-bottom: 1rem;
}

.tender-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.tender-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tender-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.tender-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.tender-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.tender-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.tender-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.tender-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tender-filter-org-container {
  flex: 1 1;
  position: relative;
}

.tender-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tender-filter-org-input:hover {
  border-color: #C2DE54;
}

.tender-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.tender-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.tender-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.tender-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.tender-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.tender-filter-tag-remove:hover {
  color: #000;
}

.tender-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.tender-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.tender-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.tender-filter-org-item:hover {
  background-color: #f5f5f5;
}

.tender-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.tender-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.tender-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.tender-filter-org-code {
  font-weight: 600;
  color: #333;
}

.tender-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.tender-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.tender-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.tender-type-dropdown-item:last-child {
  border-bottom: none;
}

.tender-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.tender-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.tender-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.tender-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Quotation Table */
.tender-table {
  animation: quotationFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes quotationFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tender-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .tender-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .tender-type-dropdown {
    min-width: 11.25rem;
  }

  .tender-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/Tender/TenderModal.css ===== */
/* Delivery Order Modal Specific Styles */
.sales-order-modal {
  overscroll-behavior: contain;
}

.sales-order-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.td-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.td-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.td-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.td-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.td-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.td-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.td-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.td-modal-pov-button--external.td-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.td-modal-pov-button--external .td-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-pov-button--external .td-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.td-modal-pov-caret--open {
  transform: rotate(180deg);
}

.td-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.td-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.td-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.td-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.td-modal-pov-dropdown-item span {
  flex: 1 1;
}

.td-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.td-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.td-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.td-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.td-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.td-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.td-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.td-modal-tabs--display .td-modal-tab {
  color: #666666;
}

.td-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.td-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.td-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.td-modal-tabs--display .td-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.td-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.td-modal-tabs--external .td-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.td-modal-tabs--external.td-modal-tabs--display .td-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.td-modal-tabs--external .td-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.td-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.td-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.td-modal-action-button span {
  white-space: nowrap;
}

.td-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.td-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.td-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.td-modal-action-button--disabled .td-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.td-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.td-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.td-modal-left-area--full .td-modal-back-button {
  transition: width 300ms ease;
}

.td-modal-left-area--full .td-modal-back-button:hover {
  width: 3.5rem;
}

.td-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.td-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.td-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.td-modal-content--item {
  padding-bottom: 1rem;
}

.td-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.td-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.td-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.td-modal-attachment-table-container .td-modal-detail-table thead,
.td-modal-attachment-table-container .td-modal-attachment-table thead {
  box-shadow: none !important;
}

.td-modal-attachment-table-container .td-modal-detail-table tr,
.td-modal-attachment-table-container .td-modal-attachment-table tr {
  box-shadow: none !important;
}

.td-modal-attachment-table-container .td-modal-detail-table tbody tr:last-child,
.td-modal-attachment-table-container .td-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.td-modal-attachment-table-container .td-modal-detail-table tbody tr:last-child td,
.td-modal-attachment-table-container .td-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.td-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.td-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.td-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.td-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.td-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.td-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.td-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.td-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.td-modal-attachment-filename--external {
  color: #E67E22;
}

.td-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.td-modal-tab-content--display .td-modal-attachment-filename--external {
  color: #E67E22;
}

.td-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.td-modal-attachment-size {
  color: #666666;
}

.td-modal-attachment-date {
  color: #666666;
}

.td-modal-attachment-uploadedby {
  color: #333333;
}

.td-modal-tab-content--display .td-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.td-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.td-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.td-modal-attachment-browse-btn:focus {
  outline: none;
}

.td-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.td-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.td-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-attachment-browse-btn--disabled .td-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.td-modal-tab-content--display .td-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.td-modal-tab-content--display .td-modal-attachment-filename.td-modal-attachment-filename--external {
  color: #E67E22;
}

.td-modal-tab-content--display .td-modal-attachment-type {
  color: #666666;
}

.td-modal-tab-content--display .td-modal-attachment-size {
  color: #666666;
}

.td-modal-tab-content--display .td-modal-attachment-date {
  color: #666666;
}

.td-modal-tab-content--display .td-modal-attachment-uploadedby {
  color: #333333;
}

.td-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.td-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.td-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.td-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.td-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.td-modal-tab-content--display .td-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.td-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.td-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.td-modal-tab-content--display .td-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.td-modal-basic-section--external .td-modal-form-input:focus {
  border-color: #F5B041;
}

.td-modal-basic-section--external .td-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.td-modal-tab-content--external .td-modal-form-input:focus,
.td-modal-tab-content--external .td-modal-form-textarea:focus,
.td-modal-tab-content--external .td-modal-custom-dropdown-input:focus,
.td-modal-tab-content--external .td-modal-date-input:focus,
.td-modal-tab-content--external .td-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.td-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.td-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.td-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.td-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.td-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.td-modal-tab-content--display .td-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.td-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.td-modal-tab-content--display .td-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.td-modal-partner-header-section--external .td-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.td-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.td-modal-tab-content--display .td-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.td-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.td-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.td-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.td-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.td-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.td-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.td-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.td-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.td-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.td-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.td-modal-chat-section {
  padding: 1.5rem 0;
}

.td-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.td-modal-chat-header h3 {
  margin: 0;
}

.td-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.td-modal-chat-new-thread .td-modal-form-textarea {
  min-height: 5rem;
}

.td-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.td-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.td-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.td-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.td-modal-chat-message--main {
  background-color: #FAFAFA;
}

.td-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.td-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.td-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.td-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.td-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.td-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.td-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.td-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.td-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.td-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-tab-content--display .td-modal-chat-user-name {
  color: #333333 !important;
}

.td-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.td-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.td-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.td-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.td-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.td-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.td-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.td-modal-chat-reply-btn:hover .td-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.td-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.td-modal-chat-replies .td-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.td-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.td-modal-chat-reply-input .td-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.td-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.td-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.td-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.td-modal-tab-content--display .td-modal-chat-thread {
  border-color: #E5E5E5;
}

.td-modal-tab-content--display .td-modal-chat-message--main {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display .td-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.td-modal-tab-content--display .td-modal-chat-user-position {
  background-color: #E8F5E9;
}

.td-modal-tab-content--display .td-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.td-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.td-modal-tab-content--display .td-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.td-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.td-modal-notes-header-section--external .td-modal-form-textarea:focus {
  border-color: #F5B041;
}

.td-modal-chat-section--external .td-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.td-modal-chat-avatar--external {
  background-color: #F5B041;
}

.td-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.td-modal-tab-content--display .td-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-thread {
  border-color: #E5E5E5;
}

.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-message--main {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-user-name {
  color: #333333 !important;
}

.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-user-position {
  background-color: #FDE8D0;
}

.td-modal-tab-content--display.td-modal-tab-content--external .td-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.td-modal-chat-reply-btn--external {
  color: #E67E22;
}

.td-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.td-modal-chat-reply-btn--external .td-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.td-modal-chat-reply-btn--external:hover .td-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.td-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.td-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.td-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.td-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.td-modal-chat-textarea-wrapper {
  position: relative;
}

.td-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.td-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.td-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.td-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.td-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.td-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.td-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.td-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.td-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.td-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.td-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.td-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.td-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.td-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.td-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.td-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.td-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.td-modal-tab-content--display .td-modal-table-empty-state-title {
  color: #666666;
}

.td-modal-tab-content--display .td-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.td-modal-partner-header-section + .td-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.td-modal-partner-header-section + .td-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.td-modal-partner-header-section + .td-modal-item-content-section .td-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.td-modal-partner-header-section + .td-modal-item-content-section .td-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.td-modal-partner-header-section + .td-modal-item-content-section .td-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.td-modal-partner-header-section + .td-modal-item-content-section .td-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.td-modal-partner-header-section + .td-modal-item-content-section .td-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.td-modal-partner-table-container .td-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.td-modal-partner-table-container .td-modal-partner-table th:last-child,
.td-modal-partner-table-container .td-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.td-modal-detail-table-container--external.td-modal-partner-table-container .td-modal-partner-table th:last-child,
.td-modal-detail-table-container--external.td-modal-partner-table-container .td-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.td-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.td-modal-item-header-section .td-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-tab-content--display .td-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.td-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.td-modal-tab-content--display .td-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.td-modal-item-header-section--external .td-modal-form-input:focus {
  border-color: #F5B041;
}

.td-modal-item-header-section--external .td-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.td-modal-detail-subtabs--external .td-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.td-modal-detail-subtabs--external .td-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.td-modal-detail-subtabs--external .td-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.td-modal-tab-content--display .td-modal-detail-subtabs--external .td-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.td-modal-tab-content--display .td-modal-detail-subtabs--external .td-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.td-modal-tab-content.td-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.td-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.td-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.td-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.td-modal-item-table-wrapper .td-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.td-modal-item-table-wrapper .td-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.td-modal-item-table-wrapper--terms .td-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.td-modal-tab-content--external.td-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.td-modal-tab-content--external .td-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.td-modal-tab-content--external .td-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.td-modal-tab-content--external .td-modal-item-table-wrapper--terms .td-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.td-modal-tab-content--external .td-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.td-modal-item-table-wrapper--terms .td-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.td-modal-item-table-wrapper--terms .td-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.td-modal-item-table-wrapper--terms .td-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.td-modal-item-table-wrapper--terms .td-modal-detail-table tr {
  height: auto;
}

.td-modal-item-table-wrapper--terms .td-modal-detail-table-container .td-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.td-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.td-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.td-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.td-modal-volume-input-group .td-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.td-modal-volume-input-group .td-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.td-modal-volume-input-group .td-modal-sla-input-wrapper .td-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.td-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.td-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.td-modal-volume-uom-list--display .td-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-volume-uom-list--display .td-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.td-modal-volume-uom-list--display .td-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-volume-uom-list--display .td-modal-volume-uom-check {
  color: #999999 !important;
}

.td-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.td-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.td-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.td-modal-volume-uom-dropdown--display .td-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.td-modal-volume-uom-dropdown--display .td-modal-volume-uom-item:hover {
  background-color: transparent;
}

.td-modal-volume-uom-dropdown--display .td-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.td-modal-volume-uom-dropdown--display .td-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.td-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.td-modal-weight-input-group .td-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.td-modal-weight-input-group .td-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.td-modal-weight-input-group .td-modal-sla-input-wrapper .td-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.td-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.td-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-weight-uom-input::placeholder {
  color: #999999;
}

.td-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.td-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.td-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.td-modal-weight-uom-dropdown--display .td-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.td-modal-weight-uom-dropdown--display .td-modal-weight-uom-item:hover {
  background-color: transparent;
}

.td-modal-weight-uom-dropdown--display .td-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.td-modal-weight-uom-dropdown--display .td-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.td-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.td-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.td-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.td-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.td-modal-form-input--display ~ .td-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.td-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.td-modal-form-input--display {
  cursor: default;
}

.td-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.td-modal-form-label--display {
  color: #333333 !important;
}

.td-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.td-modal-form-label--display .td-modal-required {
  color: #FF4D4F;
}

.td-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.td-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.td-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.td-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.td-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.td-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.td-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.td-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.td-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.td-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.td-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.td-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.td-modal-sla-spinner-btn:disabled .td-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.td-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sla-spinner-btn:hover .td-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.td-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.td-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.td-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.td-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.td-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.td-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.td-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.td-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.td-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.td-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.td-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.td-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.td-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.td-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.td-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.td-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.td-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.td-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.td-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.td-modal-stage-dropdown-input--display .td-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.td-modal-stage-dropdown-input--display .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.td-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.td-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.td-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.td-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.td-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.td-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.td-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.td-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.td-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.td-modal-accordion-header--display {
  color: #333333;
}

.td-modal-accordion-header--display.td-modal-accordion-header--active {
  color: #333333;
}

.td-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.td-modal-accordion-header--display .td-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.td-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.td-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.td-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.td-modal-stage-main-title--display {
  color: #138B4C;
}

.td-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-stage-title--display {
  color: #333333;
}

.td-modal-stage-current {
  margin-bottom: 1.875rem;
}

.td-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.td-modal-stage-label--display {
  color: #666666;
}

.td-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-stage-subtitle--display {
  color: #333333;
}

.td-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.td-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.td-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.td-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.td-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.td-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.td-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.td-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.td-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.td-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.td-modal-download-button:active {
  background-color: #E0E0E0;
}

.td-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-download-button--display .td-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.td-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.td-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.td-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.td-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.td-modal-timeline-item--display .td-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.td-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.td-modal-timeline-badge--inactive .td-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.td-modal-timeline-item--display .td-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.td-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.td-modal-timeline-item--display .td-modal-timeline-line {
  background-color: #138B4C;
}

.td-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.td-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.td-modal-timeline-status--display {
  color: #333333;
}

.td-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.td-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.td-modal-timeline-date--display {
  color: #666666;
}

.td-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.td-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.td-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.td-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.td-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.td-modal-timeline-document--display {
  color: #138B4C;
}

.td-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.td-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.td-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.td-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.td-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.td-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.td-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.td-modal-activity-item--display .td-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.td-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.td-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.td-modal-activity-item--display .td-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.td-modal-activity-item--display .td-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.td-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.td-modal-activity-item--display .td-modal-activity-line {
  background-color: #138B4C;
}

.td-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.td-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.td-modal-activity-type--display {
  color: #333333;
}

.td-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.td-modal-activity-header--display {
  color: #666666;
}

.td-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.td-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.td-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.td-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.td-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.td-modal-activity-change--display .td-modal-activity-field {
  color: #333333;
}

.td-modal-activity-change--display .td-modal-activity-new {
  color: #138B4C;
}

.td-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.td-modal-activity-date--display {
  color: #666666;
}

.td-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.td-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.td-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.td-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.td-modal-activity-more--display {
  color: #138B4C;
}

.td-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-activity-more--display .td-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.td-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.td-modal-reference-table thead {
  background-color: #F9F9F9;
}

.td-modal-tab-content--display .td-modal-reference-table thead {
  background-color: #FAFAFA;
}

.td-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.td-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.td-modal-tab-content--display .td-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.td-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.td-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.td-modal-tab-content--display .td-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.td-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.td-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.td-modal-detail-subtab:hover {
  color: #138B4C;
}

.td-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.td-modal-tab-content--display .td-modal-detail-subtab {
  color: #666666;
}

.td-modal-tab-content--display .td-modal-detail-subtab:hover {
  color: #138B4C;
}

.td-modal-tab-content--display .td-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.td-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.td-modal-tab-content.td-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.td-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.td-modal-detail-delivery-wrapper .td-modal-form-label {
  flex-shrink: 0;
}

.td-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.td-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.td-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.td-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.td-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.td-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.td-modal-detail-table-container .td-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.td-modal-detail-table-container .td-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.td-modal-detail-table-container .td-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.td-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.td-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.td-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.td-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.td-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.td-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.td-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-detail-table th,
.td-modal-tab-content--display .td-modal-packaging-table th,
.td-modal-tab-content--display .td-modal-partner-table th,
.td-modal-tab-content--display .td-modal-attachment-table th {
  color: #333333;
}

.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-detail-table td,
.td-modal-tab-content--display .td-modal-packaging-table td,
.td-modal-tab-content--display .td-modal-partner-table td,
.td-modal-tab-content--display .td-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-description,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-text,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-available-qty,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-batch,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-serial,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-sales-order,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-so-item,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-pr-item,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-package-no,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-product-type,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-product-group,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-product-category,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .detail-table-product-variant,
.td-modal-tab-content--display .td-modal-detail-table tbody tr:hover .td-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-description,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-text,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-available-qty,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-batch,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-serial,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-sales-order,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-so-item,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-pr-item,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-package-no,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-type,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-group,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-category,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-variant,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .td-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.td-modal-detail-table-container .td-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.td-modal-detail-table-container .td-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.td-modal-detail-table-container .td-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.td-modal-detail-table-container .td-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.td-modal-detail-table-container .td-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.td-modal-detail-table-container--external .td-modal-detail-table td {
  color: #555555 !important;
}

.td-modal-detail-table-container .td-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.td-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.td-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.td-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.td-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.td-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.td-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.td-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.td-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.td-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.td-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Sales Order No. column - non-editable style */
.td-modal-detail-table tbody td.detail-table-sales-order {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.td-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.td-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.td-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.td-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.td-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.td-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.td-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.td-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.td-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.td-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.td-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.td-modal-detail-table tbody tr:hover .detail-table-description,
.td-modal-detail-table tbody tr:hover .detail-table-text,
.td-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.td-modal-detail-table tbody tr:hover .detail-table-available-qty,
.td-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.td-modal-detail-table tbody tr:hover .detail-table-batch,
.td-modal-detail-table tbody tr:hover .detail-table-serial,
.td-modal-detail-table tbody tr:hover .detail-table-sales-order,
.td-modal-detail-table tbody tr:hover .detail-table-so-item,
.td-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.td-modal-detail-table tbody tr:hover .detail-table-pr-item,
.td-modal-detail-table tbody tr:hover .detail-table-package-no,
.td-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.td-modal-detail-table tbody tr:hover .detail-table-product-type,
.td-modal-detail-table tbody tr:hover .detail-table-product-group,
.td-modal-detail-table tbody tr:hover .detail-table-product-category,
.td-modal-detail-table tbody tr:hover .detail-table-product-variant,
.td-modal-detail-table tbody tr:hover .td-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-description,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-text,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-available-qty,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-batch,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-serial,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-sales-order,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-so-item,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-pr-item,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-package-no,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-type,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-group,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-category,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .detail-table-product-variant,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .td-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.td-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.td-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.td-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.td-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.td-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.td-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.td-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.td-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.td-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.td-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.td-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.td-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.td-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.td-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.td-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.td-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.td-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.td-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.td-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.td-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.td-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.td-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.td-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.td-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.td-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.td-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.td-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.td-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.td-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.td-modal-add-item-btn--disabled .td-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.td-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sales Order Table - Same style as Detail Delivery Table */
.td-modal-sales-order-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for sales order table */
.td-modal-sales-order-table-container::-webkit-scrollbar {
  height: 2px;
}

.td-modal-sales-order-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.td-modal-sales-order-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.td-modal-sales-order-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table tbody {
  background-color: #FFFFFF;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table tbody tr:last-child {
  border-bottom: none;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table tbody tr:hover {
  background-color: #F4FAF3;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.td-modal-sales-order-table-container .td-modal-sales-order-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for sales order table */
.td-modal-sales-order-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.td-modal-sales-order-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.td-modal-sales-order-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.td-modal-sales-order-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.td-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.td-modal-table-input:focus {
  outline: none;
}

.td-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.td-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.td-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.td-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.td-modal-tags-container {
  position: relative;
  width: 100%;
}

.td-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.td-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.td-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.td-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.td-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.td-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.td-modal-tags-input--display .td-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.td-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.td-modal-tag-remove:hover {
  color: #333333;
}

.td-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.td-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.td-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.td-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.td-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.td-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.td-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.td-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.td-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.td-modal-status-container {
  position: relative;
  width: 100%;
}

.td-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.td-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.td-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.td-modal-status-placeholder {
  color: #999999;
}

.td-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.td-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.td-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.td-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-status-item:hover {
  background-color: #F5F5F5;
}

.td-modal-status-item--selected {
  background-color: #E8F5E9;
}

.td-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.td-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.td-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.td-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.td-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.td-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.td-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.td-modal-status-input--display .td-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.td-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.td-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.td-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.td-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.td-modal-stage-dropdown-placeholder {
  color: #999999;
}

.td-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.td-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.td-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.td-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.td-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.td-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.td-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.td-modal-stage--created .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.td-modal-stage--approved .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.td-modal-stage--processed .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.td-modal-stage--picked .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.td-modal-stage--packed .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.td-modal-stage--planned .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.td-modal-stage--loaded .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.td-modal-stage--issued .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.td-modal-stage--departed .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.td-modal-stage--arrived .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.td-modal-stage--unloaded .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.td-modal-stage--delivered .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.td-modal-stage--confirmed .td-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.td-modal-stage--billed .td-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.td-modal-stage-dropdown-input .td-modal-stage,
.td-modal-stage-dropdown-item .td-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.td-modal-baseline-date-dropdown {
  position: relative;
}

.td-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.td-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.td-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.td-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.td-modal-reference-type-dropdown {
  position: relative;
}

.td-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.td-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.td-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.td-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.td-modal-delivery-priority-dropdown {
  position: relative;
}

.td-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.td-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.td-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.td-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.td-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.td-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.td-modal-delivery-priority-separator {
  color: #666666;
}

.td-modal-delivery-priority-name {
  color: #333333;
}

.td-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.td-modal-organization-dropdown {
  position: relative;
}

.td-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.td-modal-organization-dropdown-content--display .td-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-organization-dropdown-content--display .td-modal-organization-item:hover {
  background-color: transparent !important;
}

.td-modal-organization-dropdown-content--display .td-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-organization-dropdown-content--display .td-modal-organization-code,
.td-modal-organization-dropdown-content--display .td-modal-organization-name,
.td-modal-organization-dropdown-content--display .td-modal-organization-separator {
  color: #999999 !important;
}

.td-modal-organization-dropdown-content--display .td-modal-organization-check {
  color: #999999 !important;
}

.td-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.td-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.td-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-organization-separator {
  color: #999999;
}

.td-modal-organization-name {
  color: #333333;
}

.td-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.td-modal-sales-structure-dropdown {
  position: relative;
}

.td-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.td-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.td-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.td-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.td-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-sales-structure-separator {
  color: #999999;
}

.td-modal-sales-structure-name {
  color: #333333;
}

.td-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.td-modal-delivery-type-dropdown {
  position: relative;
}

.td-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.td-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.td-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.td-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.td-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.td-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.td-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.td-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.td-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.td-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-delivery-type-separator {
  color: #999999;
}

.td-modal-delivery-type-description {
  color: #333333;
}

.td-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.td-modal-content::-webkit-scrollbar,
.td-modal-stage-content::-webkit-scrollbar,


.td-modal-content::-webkit-scrollbar-track,
.td-modal-stage-content::-webkit-scrollbar-track,


.td-modal-content::-webkit-scrollbar-thumb,
.td-modal-stage-content::-webkit-scrollbar-thumb,


.td-modal-content::-webkit-scrollbar-thumb:hover,
.td-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.td-modal-sales-channel-dropdown {
  position: relative;
}

.td-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.td-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.td-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.td-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-sales-channel-separator {
  color: #999999;
}

.td-modal-sales-channel-name {
  color: #333333;
}

.td-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.td-modal-sales-unit-dropdown {
  position: relative;
}

.td-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.td-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.td-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.td-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-sales-unit-separator {
  color: #999999;
}

.td-modal-sales-unit-name {
  color: #333333;
}

.td-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.td-modal-organization-item--placeholder,
.td-modal-sales-structure-item--placeholder,
.td-modal-sales-channel-item--placeholder,
.td-modal-sales-unit-item--placeholder,
.td-modal-territory-item--placeholder,
.td-modal-sales-office-item--placeholder,
.td-modal-sold-to-party-item--placeholder,
.td-modal-deliver-to-party-item--placeholder,
.td-modal-attention-to-deliver-item--placeholder,
.td-modal-incoterm-item--placeholder,
.td-modal-delivery-point-item--placeholder,
.td-modal-shipping-point-item--placeholder,
.td-modal-sales-order-item--placeholder,
.td-modal-sales-team-item--placeholder,
.td-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.td-modal-organization-item--placeholder:hover,
.td-modal-sales-structure-item--placeholder:hover,
.td-modal-sales-channel-item--placeholder:hover,
.td-modal-sales-unit-item--placeholder:hover,
.td-modal-territory-item--placeholder:hover,
.td-modal-sales-office-item--placeholder:hover,
.td-modal-sold-to-party-item--placeholder:hover,
.td-modal-deliver-to-party-item--placeholder:hover,
.td-modal-attention-to-deliver-item--placeholder:hover,
.td-modal-incoterm-item--placeholder:hover,
.td-modal-delivery-point-item--placeholder:hover,
.td-modal-shipping-point-item--placeholder:hover,
.td-modal-sales-order-item--placeholder:hover,
.td-modal-sales-team-item--placeholder:hover,
.td-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.td-modal-sold-to-party-dropdown {
  position: relative;
}

.td-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-sold-to-party-input:focus,
.td-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.td-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.td-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.td-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.td-modal-sold-to-party-separator {
  color: #999999;
}

.td-modal-sold-to-party-name {
  color: #333333;
}

.td-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.td-modal-deliver-to-party-dropdown {
  position: relative;
}

.td-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.td-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.td-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.td-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.td-modal-deliver-to-party-separator {
  color: #999999;
}

.td-modal-deliver-to-party-name {
  color: #333333;
}

.td-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.td-modal-attention-to-deliver-dropdown {
  position: relative;
}
.td-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.td-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.td-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.td-modal-attention-to-deliver-separator {
  color: #999999;
}
.td-modal-attention-to-deliver-name {
  color: #333333;
}
.td-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.td-modal-incoterm-dropdown {
  position: relative;
}
.td-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.td-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.td-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.td-modal-incoterm-separator {
  color: #999999;
}
.td-modal-incoterm-name {
  color: #333333;
}
.td-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.td-modal-delivery-point-dropdown {
  position: relative;
}
.td-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.td-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.td-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.td-modal-delivery-point-separator {
  color: #999999;
}
.td-modal-delivery-point-name {
  color: #333333;
}
.td-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.td-modal-shipping-point-dropdown {
  position: relative;
}
.td-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.td-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.td-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.td-modal-shipping-point-separator {
  color: #999999;
}
.td-modal-shipping-point-name {
  color: #333333;
}
.td-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Sales Order Dropdown Styles */
.td-modal-sales-order-dropdown {
  position: relative;
}
.td-modal-sales-order-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-sales-order-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-sales-order-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-sales-order-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-order-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-order-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-sales-order-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-sales-order-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-sales-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-sales-order-item:hover {
  background-color: #F5F5F5;
}
.td-modal-sales-order-item--selected {
  background-color: #E8F5E9;
}
.td-modal-sales-order-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-sales-order-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-sales-order-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.td-modal-sales-order-separator {
  color: #999999;
}
.td-modal-sales-order-name {
  color: #333333;
}
.td-modal-sales-order-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-sales-order-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.td-modal-date-picker {
  position: relative;
}
.td-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.td-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.td-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.td-modal-date-input::-webkit-datetime-edit-text,
.td-modal-date-input::-webkit-datetime-edit-month-field,
.td-modal-date-input::-webkit-datetime-edit-day-field,
.td-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.td-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.td-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.td-modal-sales-person-dropdown {
  position: relative;
}
.td-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.td-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.td-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.td-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.td-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.td-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.td-modal-sales-person-separator {
  color: #999999;
}
.td-modal-sales-person-name {
  color: #333333;
}
.td-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.td-modal-sales-team-dropdown {
  position: relative;
}
.td-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.td-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.td-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.td-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.td-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.td-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.td-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.td-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.td-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.td-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.td-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.td-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.td-modal-sales-team-separator {
  color: #999999;
}
.td-modal-sales-team-name {
  color: #333333;
}
.td-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.td-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.td-modal-territory-dropdown {
  position: relative;
}

.td-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.td-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.td-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.td-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-territory-separator {
  color: #999999;
}

.td-modal-territory-name {
  color: #333333;
}

.td-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.td-modal-sales-office-dropdown {
  position: relative;
}

.td-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.td-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.td-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.td-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.td-modal-sales-office-separator {
  color: #999999;
}

.td-modal-sales-office-name {
  color: #333333;
}

.td-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Sales Order Section */
.td-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.td-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.td-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.td-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.td-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.td-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.td-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-table-dropdown-input:focus {
  outline: none;
}

.td-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.td-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.td-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.td-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.td-modal-delivery-type-list::-webkit-scrollbar,
.td-modal-stage-dropdown-list::-webkit-scrollbar,
.td-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.td-modal-delivery-type-list::-webkit-scrollbar-track,
.td-modal-stage-dropdown-list::-webkit-scrollbar-track,
.td-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-delivery-type-list::-webkit-scrollbar-thumb,
.td-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.td-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.td-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.td-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.td-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.td-modal-wrapper,
.td-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.sales-order-modal,
.td-modal-wrapper,
.td-modal-wrapper *,
.td-modal-content,
.td-modal-data-flow-2-container,
.td-modal-data-flow-container,
.td-modal-calendar-container,
.td-modal-calendar-milestones-list,
.td-modal-calendar-view,
.td-modal-calendar-yearly,
.td-modal-calendar-monthly,
.td-modal-calendar-weekly,
.td-modal-calendar-weekly-body,
.td-modal-calendar-daily,
.td-modal-calendar-daily-timeline,
.td-modal-calendar-grid,
.td-modal-calendar-grid-body,
.td-modal-detail-table-container,
.td-modal-item-table-wrapper,
.td-modal-attachment-table-container,
.td-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.td-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.td-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.td-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.td-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.td-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.td-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.td-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.td-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.td-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-tab-content--display .td-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.td-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-tab-content--display .td-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.td-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.td-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.td-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) {
  font-weight: 600;
}

.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) .td-modal-packaging-input,
.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) .td-modal-packaging-input--display,
.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) .td-modal-handling-product-input,
.td-modal-packaging-row--unassigned:not(.td-modal-packaging-row--expanded) .td-modal-handling-product-input--display {
  font-weight: 600;
}

.td-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.td-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row td.td-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row td.td-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row td.td-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td.td-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded td.td-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row--expanded:hover td.td-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display,
.td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display,
.td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.td-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.td-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-tab-content--display .td-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.td-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-tab-content--display .td-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.td-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.td-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.td-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.td-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.td-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.td-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.td-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.td-modal-packaging-detail-table th:first-child,
.td-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.td-modal-packaging-detail-table th:nth-child(2),
.td-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.td-modal-packaging-detail-table th:nth-child(3),
.td-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.td-modal-packaging-detail-table td:nth-child(4),
.td-modal-packaging-detail-table td:nth-child(6),
.td-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.td-modal-packaging-detail-table td:nth-child(5),
.td-modal-packaging-detail-table td:nth-child(7),
.td-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.td-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.td-modal-tab-content--display .td-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display .td-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.td-modal-tab-content--display .td-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.td-modal-tab-content--display .td-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.td-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.td-modal-packaging-table td:last-child,
.td-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.td-modal-packaging-table td:last-child .td-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.td-modal-detail-table-container--external .td-modal-packaging-table th:last-child,
.td-modal-detail-table-container--external .td-modal-packaging-table td.td-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.td-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.td-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.td-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.td-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.td-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.td-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.td-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.td-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.td-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.td-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.td-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.td-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.td-modal-packaging-child-table tr {
  border: none !important;
}

.td-modal-packaging-child-table thead,
.td-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.td-modal-packaging-child-table th:first-child,
.td-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.td-modal-packaging-child-table th:nth-child(2),
.td-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.td-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.td-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.td-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.td-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.td-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.td-modal-packaging-child-table th:nth-child(3),
.td-modal-packaging-child-table td:nth-child(3),
.td-modal-packaging-child-table th:nth-child(4),
.td-modal-packaging-child-table td:nth-child(4),
.td-modal-packaging-child-table th:nth-child(5),
.td-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.td-modal-packaging-child-table th:nth-child(6),
.td-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.td-modal-packaging-child-table th:nth-child(7),
.td-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.td-modal-detail-table-container--external .td-modal-packaging-child-table th:last-child,
.td-modal-detail-table-container--external .td-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.td-modal-packaging-child-table td:last-child .td-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.td-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.td-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.td-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.td-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.td-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row {
  transition: none !important;
}

.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display,
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display:focus,
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display,
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display:focus,
.td-modal-tab-content--display .td-modal-detail-table-container .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display:focus,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display:focus,
.td-modal-tab-content--display .td-modal-detail-table-container--external .td-modal-packaging-table tbody tr.td-modal-packaging-row:hover td .td-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.td-modal-detail-table-container--external .td-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.td-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.td-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.td-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.td-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.td-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.td-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.td-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.td-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.td-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.td-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.td-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.td-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.td-modal-detail-table-container--external .td-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.td-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-item--display {
  color: #999999 !important;
}

.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-code,
.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-name,
.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-separator {
  color: #999999 !important;
}

.td-modal-handling-product-dropdown-content--display .td-modal-handling-product-check {
  color: #999999 !important;
}

.td-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.td-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.td-modal-handling-product-dropdown-content--narrow .td-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.td-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.td-modal-packaging-detail-table .td-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.td-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.td-modal-detail-table-container--dropdown-open .td-modal-detail-table {
  overflow: visible;
}

.td-modal-detail-table-container--dropdown-open .td-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.td-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.td-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.td-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.td-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.td-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.td-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.td-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.td-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.td-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.td-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.td-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.td-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.td-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.td-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.td-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.td-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.td-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.td-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.td-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.td-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.td-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.td-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.td-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-item:hover {
  background-color: transparent;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-item--placeholder {
  display: none;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-code,
.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-name,
.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-separator {
  color: #555555;
}

.td-modal-handling-product-dropdown-content--view-only .td-modal-handling-product-check {
  color: #888888;
}

.td-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.td-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.td-modal-handling-product-separator {
  color: #999999;
}

.td-modal-handling-product-name {
  color: #333333;
}

.td-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.td-modal-handling-product-item--placeholder {
  cursor: default;
}

.td-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.td-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.td-modal-detail-table td:has(.td-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.td-modal-detail-table td .td-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.td-modal-detail-table td .td-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.td-modal-detail-table td .td-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.td-modal-detail-table td .td-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.td-modal-detail-table td .td-modal-handling-product-input--display,
.td-modal-detail-table td .td-modal-handling-product-input--display:focus,
.td-modal-detail-table td .td-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.td-modal-detail-table-container .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display,
.td-modal-detail-table-container .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display:focus,
.td-modal-detail-table-container .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display:focus,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover td .td-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.td-modal-detail-table td .td-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.td-modal-detail-table td .td-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.td-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.td-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.td-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.td-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-table-text-icon-btn--filled:not(.td-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.td-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.td-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.td-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.td-modal-table-text-icon-btn--display.td-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.td-modal-table-text-icon-btn--display.td-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-table-text-icon-btn--display.td-modal-table-text-icon-btn--external.td-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.td-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.td-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.td-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.td-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.td-modal-serial-assignment-btn {
  width: 10.625rem;
}

.td-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.td-modal-batch-assignment-btn--filled .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.td-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.td-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.td-modal-batch-assignment-btn--display .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-batch-assignment-btn--display.td-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.td-modal-batch-assignment-btn--display.td-modal-batch-assignment-btn--filled .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.td-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.td-modal-secured-qty-btn.td-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.td-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.td-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.td-modal-secured-qty-btn--grey .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.td-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.td-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.td-modal-batch-assignment-btn--partial .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.td-modal-batch-assignment-btn--display.td-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.td-modal-batch-assignment-btn--display.td-modal-batch-assignment-btn--partial .td-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.td-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.td-modal-secured-qty-modal .td-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.td-modal-secured-qty-modal .td-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.td-modal-secured-qty-modal.td-modal-batch-assignment-modal--display .td-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.td-modal-secured-qty-modal .td-modal-item-text-content {
  overflow-x: hidden;
}

.td-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.td-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.td-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.td-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.td-modal-batch-assignment-modal--display .td-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.td-modal-batch-assignment-modal--display .td-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.td-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.td-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.td-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.td-modal-secured-qty-lock-btn--open .td-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.td-modal-secured-qty-lock-btn--locked .td-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.td-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.td-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.td-modal-batch-assignment-modal .td-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.td-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.td-modal-batch-assignment-modal .td-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.td-modal-batch-assignment-modal .td-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.td-modal-batch-assignment-modal.td-modal-batch-assignment-modal--display .td-modal-item-text-info {
  background-color: #F2F8EA;
}

.td-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.td-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.td-modal-batch-assignment-info-group {
  flex: 1 1;
}

.td-modal-batch-assignment-info-group .td-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.td-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.td-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.td-modal-batch-assignment-table-section .td-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.td-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.td-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.td-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.td-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.td-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.td-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.td-modal-batch-assignment-table th,
.td-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.td-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.td-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.td-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.td-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.td-modal-batch-assignment-table tbody td:has(.td-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.td-modal-batch-assignment-table tbody td:has(.td-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.td-modal-batch-assignment-table tbody td:nth-child(2),
.td-modal-batch-assignment-table tbody td:nth-child(3),
.td-modal-batch-assignment-table tbody td:nth-child(4),
.td-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.td-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.td-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.td-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.td-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.td-modal-batch-assignment-modal--display .td-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.td-modal-batch-assignment-modal--display .td-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.td-modal-batch-assignment-modal--display .td-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-batch-assignment-modal--display .td-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.td-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.td-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.td-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.td-modal-batch-assignment-table .td-modal-placeholder-text {
  color: #CCCCCC;
}

.td-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.td-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.td-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.td-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.td-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.td-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.td-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.td-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.td-modal-batch-assignment-table th.batch-table-frozen-batch,
table.td-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.td-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.td-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.td-modal-batch-assignment-table td.batch-table-frozen-batch,
table.td-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.td-modal-batch-assignment-table th.batch-table-frozen-batch,
table.td-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.td-modal-batch-assignment-table th.batch-table-frozen-assign,
table.td-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.td-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.td-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.td-modal-item-text-info {
  margin-bottom: 1rem;
}

.td-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.td-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.td-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.td-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.td-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.td-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.td-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.td-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-item-text-modal .modal-header .modal-title,
.td-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.td-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.td-modal-item-text-label--display {
  color: #333333;
}

.td-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.td-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.td-modal-item-text-modal .td-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.td-modal-item-text-modal .td-modal-item-text-textarea-wrapper .td-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.td-modal-item-text-textarea {
  overflow-y: auto !important;
}

.td-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.td-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.td-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.td-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.td-modal-add-do-item-modal .td-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.td-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.td-modal-add-do-item-dropdown-section .td-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.td-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.td-modal-add-do-item-table-section .td-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.td-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.td-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.td-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.td-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.td-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.td-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.td-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.td-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.td-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.td-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.td-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.td-modal-detail-table td:first-child .td-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.td-modal-detail-table td:first-child .td-modal-partner-type-input {
  padding-left: 0.625rem;
}

.td-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.td-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.td-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.td-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.td-modal-partner-type-dropdown--display .td-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.td-modal-partner-type-dropdown-content--display .td-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-partner-type-dropdown-content--display .td-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.td-modal-partner-type-dropdown-content--display .td-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-partner-type-dropdown-content--display .td-modal-partner-type-check {
  color: #999999 !important;
}

.td-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.td-modal-partner-type-dropdown--display .td-modal-partner-type-value {
  color: #555555;
}

.td-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.td-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.td-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.td-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.td-modal-partner-type-item--placeholder {
  cursor: default;
}

.td-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.td-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.td-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.td-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.td-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.td-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.td-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.td-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.td-modal-partner-id-dropdown--display .td-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-code,
.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-name,
.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-separator {
  color: #999999 !important;
}

.td-modal-partner-id-dropdown-content--display .td-modal-partner-id-check {
  color: #999999 !important;
}

.td-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.td-modal-partner-id-dropdown--display .td-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.td-modal-detail-table tbody tr:hover .td-modal-partner-type-dropdown--display .td-modal-partner-type-input-wrapper,
.td-modal-detail-table tbody tr:hover .td-modal-partner-id-dropdown--display .td-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .td-modal-partner-type-dropdown--display .td-modal-partner-type-input-wrapper,
.td-modal-detail-table-container--external .td-modal-detail-table tbody tr:hover .td-modal-partner-id-dropdown--display .td-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.td-modal-partner-type-arrow--external {
  visibility: hidden;
}

.td-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.td-modal-partner-type-dropdown--external .td-modal-partner-type-value {
  color: #555555;
}

.td-modal-partner-id-dropdown--external .td-modal-partner-id-value {
  color: #555555;
}

.td-modal-detail-table-container--external .td-modal-detail-table td.td-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.td-modal-partner-header-section--external .td-modal-form-input--display {
  color: #555555;
}

.td-modal-detail-table td.td-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.td-modal-tab-content--display .td-modal-detail-table td.td-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.td-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.td-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.td-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.td-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.td-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.td-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.td-modal-partner-id-item--placeholder {
  cursor: default;
}

.td-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.td-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.td-modal-partner-id-separator {
  color: #999999;
}

.td-modal-partner-id-name {
  color: #666666;
}

.td-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.td-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.td-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.td-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.td-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.td-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.td-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.td-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.td-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.td-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.td-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.td-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.td-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.td-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.td-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.td-modal-data-flow-stage--completed .td-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.td-modal-data-flow-stage--active .td-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.td-modal-data-flow-stage--completed .td-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-data-flow-stage--active .td-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.td-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.td-modal-data-flow-stage--completed .td-modal-data-flow-stage-label {
  color: #138B4C;
}

.td-modal-data-flow-stage--active .td-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.td-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.td-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.td-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.td-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.td-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.td-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.td-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.td-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.td-modal-data-flow-document--active .td-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.td-modal-data-flow-document-fold {
  display: none;
}

.td-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.td-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.td-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.td-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.td-modal-data-flow-document-icon-wrapper--active .td-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.td-modal-data-flow-document--active .td-modal-data-flow-document-title {
  color: #138B4C;
}

.td-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.td-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.td-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.td-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.td-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.td-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.td-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.td-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.td-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.td-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.td-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.td-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.td-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.td-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.td-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.td-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.td-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.td-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.td-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.td-modal-terms-area-button .td-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.td-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.td-modal-tab-content--display .td-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.td-modal-tab-content--display .td-modal-terms-area-button .td-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.td-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.td-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.td-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.td-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.td-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.td-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.td-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.td-modal-data-flow-2-row {
  display: flex;
}

.td-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.td-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.td-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.td-modal-data-flow-2-row--content .td-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.td-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.td-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.td-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.td-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-label {
  color: #333333;
}

.td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.td-modal-tab-content--display .td-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage-label {
  color: #999999;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--completed .td-modal-data-flow-2-stage-label {
  color: #333333;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--active .td-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.td-modal-tab-content--display .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.td-modal-tab-content--display .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.td-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.td-modal-data-flow-2-row--content .td-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.td-modal-data-flow-2-row--content .td-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.td-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.td-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.td-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.td-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.td-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.td-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.td-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.td-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.td-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-title,
.td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-title {
  color: #333333;
}

.td-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.td-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.td-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.td-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.td-modal-tab-content--display .td-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-title {
  color: #888888;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-title,
.td-modal-tab-content--display .td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-title {
  color: #333333;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--completed .td-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--active .td-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-date {
  color: #333333;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.td-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.td-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.td-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.td-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.td-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.td-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.td-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.td-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.td-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.td-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.td-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.td-modal-data-flow-2-grid--external .td-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.td-modal-data-flow-2-grid--external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell {
  border-bottom: none;
}

.td-modal-data-flow-2-grid--external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.td-modal-data-flow-2-grid--external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell--label::after {
  display: none;
}

.td-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.td-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.td-modal-data-flow-2-row--content-top .td-modal-data-flow-2-document--buyer.td-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.td-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.td-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.td-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.td-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.td-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.td-modal-data-flow-2-stage--external-completed .td-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.td-modal-data-flow-2-stage--external-active .td-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.td-modal-data-flow-2-stage--external-completed .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.td-modal-data-flow-2-stage--external-active .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.td-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.td-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.td-modal-data-flow-2-document--external .td-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.td-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.td-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.td-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.td-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.td-modal-data-flow-2-document--external .td-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.td-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.td-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.td-modal-data-flow-2-document--supplier .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.td-modal-data-flow-2-document--supplier .td-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.td-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.td-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.td-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.td-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier .td-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier .td-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-completed .td-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--supplier-active .td-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.td-modal-tab-content--data-flow-2-external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.td-modal-tab-content--data-flow-2-external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external .td-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external .td-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external .td-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.td-modal-tab-content--display.td-modal-tab-content--data-flow-2-external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.td-modal-tab-content--display.td-modal-tab-content--data-flow-2-external .td-modal-data-flow-2-row--header .td-modal-data-flow-2-cell:has(.td-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-circle,
.td-modal-tab-content--display .td-modal-data-flow-2-stage--external-completed .td-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--external-active .td-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-icon,
.td-modal-tab-content--display .td-modal-data-flow-2-stage--external-completed .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-stage--external-active .td-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-stage--external .td-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.td-modal-tab-content--display .td-modal-data-flow-2-document--external-completed .td-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.td-modal-tab-content--display .td-modal-data-flow-2-document--external-active .td-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.td-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.td-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.td-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.td-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.td-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.td-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.td-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.td-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.td-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.td-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.td-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.td-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.td-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.td-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.td-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.td-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.td-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.td-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.td-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.td-modal-milestone-date-value {
  color: #666666;
}

.td-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.td-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.td-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.td-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.td-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.td-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.td-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.td-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.td-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.td-modal-activity-item--display .td-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.td-modal-calendar-milestones .td-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.td-modal-calendar-milestones .td-modal-activity-user:hover {
  text-decoration: none;
}

.td-modal-calendar-milestones .td-modal-activity-item--display .td-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.td-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.td-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.td-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.td-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.td-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-calendar-nav-btn:hover .td-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.td-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.td-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.td-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.td-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.td-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.td-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.td-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.td-modal-calendar-view-mode-btn--active + .td-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.td-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.td-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.td-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.td-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.td-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.td-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.td-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.td-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.td-modal-calendar-grid-cell:nth-child(7n-1),
.td-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.td-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.td-modal-calendar-grid-day-name:nth-child(6),
.td-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.td-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.td-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.td-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.td-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.td-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.td-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.td-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.td-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.td-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.td-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.td-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.td-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.td-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.td-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.td-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.td-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.td-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.td-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.td-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.td-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.td-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.td-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.td-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.td-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.td-modal-calendar-weekly-day-column:nth-child(6),
.td-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.td-modal-calendar-weekly-day-header:nth-child(6),
.td-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.td-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.td-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.td-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.td-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.td-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.td-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.td-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.td-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.td-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.td-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.td-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.td-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.td-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.td-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.td-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.td-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.td-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.td-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.td-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.td-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.td-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.td-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.td-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.td-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.td-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-view {
  border-color: #D0D0D0;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-view-mode-btn--active + .td-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-milestones-header {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-view-title {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-grid-day-name {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-grid-cell-day {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-weekly-day-name {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-weekly-day-date {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-weekly-event-title {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-daily-header {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-daily-hour-label {
  color: #666666;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-daily-event-title {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar .td-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.td-modal-calendar-milestones-header--external {
  color: #333333;
}

.td-modal-calendar-nav-btn--external .td-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.td-modal-calendar-nav-btn--external:hover .td-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.td-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.td-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.td-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.td-modal-calendar-view-mode-btn--active-external + .td-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.td-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.td-modal-tab-content--calendar-external .td-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.td-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.td-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.td-modal-activity-type--external {
  color: #333333;
}

.td-modal-activity-user--external {
  color: #E67E22;
}

.td-modal-activity-user--external:hover {
  color: #D35400;
}

.td-modal-calendar-milestones .td-modal-activity-user--external {
  color: #E67E22;
}

.td-modal-calendar-milestones .td-modal-activity-user--external:hover {
  color: #D35400;
}

.td-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.td-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.td-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.td-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.td-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.td-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.td-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.td-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.td-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.td-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.td-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.td-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.td-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-milestones-header--external {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-view-mode-btn--active-external + .td-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-calendar-nav-btn--external .td-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-activity-type--external {
  color: #333333;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-activity-user--external {
  color: #E67E22;
}

.td-modal-tab-content--display.td-modal-tab-content--calendar-external .td-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.td-modal-input--error,
.td-modal-form-input.td-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.td-modal-dropdown--error .td-modal-delivery-type-input,
.td-modal-dropdown--error .td-modal-organization-input,
.td-modal-dropdown--error .td-modal-sales-structure-input,
.td-modal-dropdown--error .td-modal-sales-channel-input,
.td-modal-dropdown--error .td-modal-sales-unit-input,
.td-modal-dropdown--error .td-modal-territory-input,
.td-modal-dropdown--error .td-modal-sales-office-input,
.td-modal-dropdown--error .td-modal-sold-to-party-input,
.td-modal-dropdown--error .td-modal-deliver-to-party-input,
.td-modal-dropdown--error .td-modal-attention-to-deliver-input,
.td-modal-dropdown--error .td-modal-incoterm-input,
.td-modal-dropdown--error .td-modal-delivery-point-input,
.td-modal-dropdown--error .td-modal-shipping-point-input,
.td-modal-dropdown--error .td-modal-sales-order-input,
.td-modal-dropdown--error .td-modal-sales-team-input,
.td-modal-dropdown--error .td-modal-sales-person-input,
.td-modal-dropdown--error .td-modal-delivery-priority-input,
.td-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.td-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.td-modal-date-picker-wrapper.td-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.td-modal-custom-dropdown {
  position: relative;
}

.td-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.td-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.td-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.td-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.td-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-check {
  color: #999999 !important;
}

.td-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.td-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.td-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.td-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.td-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.td-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.td-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.td-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.td-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.td-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.td-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.td-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.td-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.td-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.td-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.td-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.td-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.td-modal-setting-form-label--display {
  color: #333333;
}

.td-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.td-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-setting-dropdown--active .td-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.td-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.td-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.td-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.td-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.td-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.td-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.td-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-setting-dropdown-icon.td-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.td-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.td-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.td-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.td-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.td-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.td-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.td-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.td-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.td-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.td-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.td-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.td-modal-setting-dropdown-item-separator {
  color: #999999;
}

.td-modal-setting-dropdown-item-name {
  color: #333333;
}

.td-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.td-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.td-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.td-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.td-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.td-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.td-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.td-modal-setting-tab-content--print .td-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.td-modal-setting-tab-content--print .td-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.td-modal-setting-tab-content--print .td-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.td-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.td-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.td-modal-setting-table thead tr {
  height: 2.25rem;
}

.td-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.td-modal-setting-table tbody tr {
  height: 2.25rem;
}

.td-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.td-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.td-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.td-modal-setting-table--display thead th:nth-child(2),
.td-modal-setting-table--display thead th:nth-child(3),
.td-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.td-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.td-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.td-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.td-modal-setting-table--transfer.td-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.td-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.td-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.td-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.td-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.td-modal-setting-table--transfer:not(.td-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.td-modal-setting-table--transfer:not(.td-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.td-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.td-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.td-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.td-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.td-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.td-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.td-modal-tab-content--display .td-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.td-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.td-modal-tab-content--display .td-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.td-modal-attribute-header-section--external .td-modal-form-input:focus {
  border-color: #F5B041;
}

.td-modal-attribute-header-section--external .td-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.td-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.td-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.td-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.td-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.td-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.td-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.td-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.td-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.td-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.td-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.td-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.td-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.td-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.td-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.td-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.td-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.td-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.td-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.td-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.td-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.td-modal-available-qty-tree-level {
  position: relative;
}

.td-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.td-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.td-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.td-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.td-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.td-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.td-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.td-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.td-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.td-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.td-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.td-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.td-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.td-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.td-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.td-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.td-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.td-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.td-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.td-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.td-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.td-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.td-modal-available-qty-tree-batch-header .td-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.td-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.td-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.td-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.td-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.td-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.td-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.td-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.td-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.td-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.td-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.td-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.td-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.td-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.td-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.td-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.td-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.td-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.td-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.td-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.td-modal-activity-type--clickable.td-modal-activity-type--display:hover {
  color: #138B4C;
}

.td-modal-activity-type--clickable.td-modal-activity-type--external:hover {
  color: #E67E00;
}

.td-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.td-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.td-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.td-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.td-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.td-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.td-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.td-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to so-modal-form-label */
.td-modal-activity-detail-content .td-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.td-modal-activity-detail-modal .td-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.td-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.td-modal-activity-detail-modal .td-modal-tabs--display .td-modal-tab {
  color: #333333;
}

.td-modal-activity-detail-modal .td-modal-tabs--display .td-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.td-modal-activity-detail-modal .td-modal-tabs--external.td-modal-tabs--display .td-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.td-modal-activity-detail-tab-content--general .td-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.td-modal-activity-detail-content .td-modal-milestone-status {
  margin: 0;
}

.td-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.td-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.td-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.td-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.td-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.td-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.td-modal-activity-detail-pic-chat-wrapper:hover .td-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.td-modal-activity-detail-pic-chat-wrapper:hover .td-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.td-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.td-modal-activity-detail-pic--clickable:hover .td-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.td-modal-activity-detail-content--external .td-modal-activity-detail-pic {
  color: #E67E22;
}

.td-modal-activity-detail-content--external .td-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.td-modal-activity-detail-content--external .td-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.td-modal-activity-detail-content--external .td-modal-activity-detail-pic--clickable:hover .td-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.td-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.td-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.td-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.td-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.td-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.td-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.td-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.td-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.td-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.td-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.td-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.td-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.td-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.td-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.td-modal-activity-detail-content--external .td-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.td-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.td-modal-activity-detail-content--external .td-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.td-modal-activity-detail-content--external .td-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.td-modal-activity-detail-content--external .td-modal-activity-detail-document-name {
  color: #E67E22;
}

.td-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.td-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.td-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.td-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.td-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.td-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.td-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.td-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.td-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.td-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.td-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.td-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.td-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.td-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.td-modal-activity-detail-tab-content--general {
  padding: 0;
}

.td-modal-activity-detail-tab-content--general .td-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.td-modal-activity-detail-tab-content--general > div:not(.td-modal-item-text-info) {
  padding: 0 1.5rem;
}

.td-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.td-modal-activity-detail-tab-content--attachment,
.td-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.td-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.td-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.td-modal-activity-detail-tab-content--attachment .td-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.td-modal-activity-detail-tab-content--attachment .td-modal-batch-assignment-table-section > .td-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.td-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.td-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.td-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.td-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.td-modal-activity-detail-content--external .td-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.td-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.td-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.td-modal-activity-detail-content--external .td-modal-item-text-info {
  background-color: #FEF5E7;
}

.td-modal-activity-detail-content--external .td-modal-task-notes-section {
  background-color: #FEF5E7;
}

.td-modal-task-notes-section .td-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.td-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.td-modal-task-notes-textarea.td-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.td-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.td-modal-task-chat-section > .td-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.td-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.td-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.td-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.td-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.td-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.td-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.td-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.td-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.td-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.td-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.td-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.td-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.td-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.td-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.td-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.td-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.td-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.td-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.td-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.td-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.td-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.td-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.td-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.td-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.td-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.td-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.td-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.td-modal-activity-detail-content--external .td-modal-task-chat-avatar {
  background-color: #F5B041;
}

.td-modal-activity-detail-content--external .td-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.td-modal-activity-detail-content--external .td-modal-task-chat-reply-btn {
  color: #E67E22;
}

.td-modal-activity-detail-content--external .td-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.td-modal-dropdown--display .td-modal-dropdown-item,
.td-modal-dropdown--display [class*="-item"],
.td-modal-tags-dropdown--display .td-modal-tags-dropdown-item,
.td-modal-baseline-date-dropdown--display .td-modal-baseline-date-item,
.td-modal-reference-type-dropdown--display .td-modal-reference-type-item,
.td-modal-delivery-priority-dropdown--display .td-modal-delivery-priority-item,
.td-modal-organization-dropdown--display .td-modal-organization-item,
.td-modal-sales-structure-dropdown--display .td-modal-sales-structure-item,
.td-modal-delivery-type-dropdown--display .td-modal-delivery-type-item,
.td-modal-sales-channel-dropdown--display .td-modal-sales-channel-item,
.td-modal-sales-unit-dropdown--display .td-modal-sales-unit-item,
.td-modal-sold-to-party-dropdown--display .td-modal-sold-to-party-item,
.td-modal-deliver-to-party-dropdown--display .td-modal-deliver-to-party-item,
.td-modal-attention-to-deliver-dropdown--display .td-modal-attention-to-deliver-item,
.td-modal-incoterm-dropdown--display .td-modal-incoterm-item,
.td-modal-delivery-point-dropdown--display .td-modal-delivery-point-item,
.td-modal-shipping-point-dropdown--display .td-modal-shipping-point-item,
.td-modal-sales-order-dropdown--display .td-modal-sales-order-item,
.td-modal-sales-person-dropdown--display .td-modal-sales-person-item,
.td-modal-sales-team-dropdown--display .td-modal-sales-team-item,
.td-modal-territory-dropdown--display .td-modal-territory-item,
.td-modal-sales-office-dropdown--display .td-modal-sales-office-item,
.td-modal-status-dropdown--display .td-modal-status-item,
.td-modal-handling-product-dropdown--display .td-modal-handling-product-item,
.td-modal-child-uom-dropdown--display .td-modal-child-uom-item,
.td-modal-partner-type-dropdown--display .td-modal-partner-type-item,
.td-modal-partner-id-dropdown--display .td-modal-partner-id-item,
.td-modal-custom-dropdown--display .td-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.td-modal-dropdown--display .td-modal-dropdown-item:hover,
.td-modal-dropdown--display [class*="-item"]:hover,
.td-modal-tags-dropdown--display .td-modal-tags-dropdown-item:hover,
.td-modal-baseline-date-dropdown--display .td-modal-baseline-date-item:hover,
.td-modal-reference-type-dropdown--display .td-modal-reference-type-item:hover,
.td-modal-delivery-priority-dropdown--display .td-modal-delivery-priority-item:hover,
.td-modal-organization-dropdown--display .td-modal-organization-item:hover,
.td-modal-sales-structure-dropdown--display .td-modal-sales-structure-item:hover,
.td-modal-delivery-type-dropdown--display .td-modal-delivery-type-item:hover,
.td-modal-sales-channel-dropdown--display .td-modal-sales-channel-item:hover,
.td-modal-sales-unit-dropdown--display .td-modal-sales-unit-item:hover,
.td-modal-sold-to-party-dropdown--display .td-modal-sold-to-party-item:hover,
.td-modal-deliver-to-party-dropdown--display .td-modal-deliver-to-party-item:hover,
.td-modal-attention-to-deliver-dropdown--display .td-modal-attention-to-deliver-item:hover,
.td-modal-incoterm-dropdown--display .td-modal-incoterm-item:hover,
.td-modal-delivery-point-dropdown--display .td-modal-delivery-point-item:hover,
.td-modal-shipping-point-dropdown--display .td-modal-shipping-point-item:hover,
.td-modal-sales-order-dropdown--display .td-modal-sales-order-item:hover,
.td-modal-sales-person-dropdown--display .td-modal-sales-person-item:hover,
.td-modal-sales-team-dropdown--display .td-modal-sales-team-item:hover,
.td-modal-territory-dropdown--display .td-modal-territory-item:hover,
.td-modal-sales-office-dropdown--display .td-modal-sales-office-item:hover,
.td-modal-status-dropdown--display .td-modal-status-item:hover,
.td-modal-handling-product-dropdown--display .td-modal-handling-product-item:hover,
.td-modal-child-uom-dropdown--display .td-modal-child-uom-item:hover,
.td-modal-partner-type-dropdown--display .td-modal-partner-type-item:hover,
.td-modal-partner-id-dropdown--display .td-modal-partner-id-item:hover,
.td-modal-custom-dropdown--display .td-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.td-modal-dropdown--display [class*="-item--selected"],
.td-modal-tags-dropdown--display .td-modal-tags-dropdown-item--selected,
.td-modal-baseline-date-dropdown--display .td-modal-baseline-date-item--selected,
.td-modal-reference-type-dropdown--display .td-modal-reference-type-item--selected,
.td-modal-delivery-priority-dropdown--display .td-modal-delivery-priority-item--selected,
.td-modal-organization-dropdown--display .td-modal-organization-item--selected,
.td-modal-sales-structure-dropdown--display .td-modal-sales-structure-item--selected,
.td-modal-delivery-type-dropdown--display .td-modal-delivery-type-item--selected,
.td-modal-sales-channel-dropdown--display .td-modal-sales-channel-item--selected,
.td-modal-sales-unit-dropdown--display .td-modal-sales-unit-item--selected,
.td-modal-sold-to-party-dropdown--display .td-modal-sold-to-party-item--selected,
.td-modal-deliver-to-party-dropdown--display .td-modal-deliver-to-party-item--selected,
.td-modal-attention-to-deliver-dropdown--display .td-modal-attention-to-deliver-item--selected,
.td-modal-incoterm-dropdown--display .td-modal-incoterm-item--selected,
.td-modal-delivery-point-dropdown--display .td-modal-delivery-point-item--selected,
.td-modal-shipping-point-dropdown--display .td-modal-shipping-point-item--selected,
.td-modal-sales-order-dropdown--display .td-modal-sales-order-item--selected,
.td-modal-sales-person-dropdown--display .td-modal-sales-person-item--selected,
.td-modal-sales-team-dropdown--display .td-modal-sales-team-item--selected,
.td-modal-territory-dropdown--display .td-modal-territory-item--selected,
.td-modal-sales-office-dropdown--display .td-modal-sales-office-item--selected,
.td-modal-status-dropdown--display .td-modal-status-item--selected,
.td-modal-handling-product-dropdown--display .td-modal-handling-product-item--selected,
.td-modal-child-uom-dropdown--display .td-modal-child-uom-item--selected,
.td-modal-partner-type-dropdown--display .td-modal-partner-type-item--selected,
.td-modal-partner-id-dropdown--display .td-modal-partner-id-item--selected,
.td-modal-custom-dropdown--display .td-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.td-modal-dropdown--display [class*="-check"],
.td-modal-dropdown--display .td-modal-dropdown-check,
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.td-modal-dropdown--display [class*="-item-code"],
.td-modal-dropdown--display [class*="-item-name"],
.td-modal-dropdown--display [class*="-item-content"],
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-code,
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-name,
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-item,
.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.td-modal-sold-to-party-dropdown-content--display .td-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.td-modal-tags-dropdown--display .td-modal-tags-item,
.td-modal-tags-dropdown--display .td-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-tags-dropdown--display .td-modal-tags-item:hover {
  background-color: transparent !important;
}

.td-modal-tags-dropdown--display .td-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.td-modal-tags-dropdown--display .td-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item,
.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.td-modal-custom-dropdown-list--display .td-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */








/* Scoring Tab Styles */
.td-modal-scoring-container {
  padding: 1rem;
}

.td-modal-scoring-section {
  margin-bottom: 1.5rem;
}

.td-modal-scoring-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem 0.25rem 0 0;
  font-weight: 600;
  font-size: 0.8125rem;
}

.td-modal-scoring-section-weight {
  font-size: 0.75rem;
  color: #666;
}

.td-modal-scoring-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.td-modal-scoring-table th {
  background-color: #fafafa;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid #e0e0e0;
  font-weight: 600;
  color: #333;
}

.td-modal-scoring-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

.td-modal-scoring-table tr:hover {
  background-color: #f9f9f9;
}

.td-modal-scoring-input {
  width: 3.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  text-align: center;
}

.td-modal-scoring-input:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

.td-modal-scoring-progress-bar {
  width: 100%;
  height: 0.375rem;
  background-color: #e0e0e0;
  border-radius: 0.1875rem;
  overflow: hidden;
}

.td-modal-scoring-progress-fill {
  height: 100%;
  border-radius: 0.1875rem;
  transition: width 0.3s ease;
}

.td-modal-scoring-summary {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.td-modal-scoring-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}

.td-modal-scoring-summary-label {
  font-size: 0.6875rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.td-modal-scoring-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.td-modal-scoring-badge {
  display: inline-block;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.td-modal-scoring-remarks {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  resize: none;
}

.td-modal-scoring-remarks:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

/* Evaluation Tab Styles */
.td-modal-evaluation-container {
  padding: 1rem;
}

.td-modal-evaluation-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.td-modal-evaluation-comparison-table th {
  background-color: #f0f4f8;
  padding: 0.625rem 0.75rem;
  text-align: left;
  border: 1px solid #d0d5dd;
  font-weight: 600;
  color: #344054;
  white-space: nowrap;
}

.td-modal-evaluation-comparison-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

.td-modal-evaluation-comparison-table tr:hover {
  background-color: #f9fafb;
}

.td-modal-evaluation-comparison-table tr.td-modal-evaluation-winner {
  background-color: #ecfdf3;
}

.td-modal-evaluation-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}

.td-modal-evaluation-rank-1 {
  background-color: #f59e0b;
}

.td-modal-evaluation-rank-2 {
  background-color: #94a3b8;
}

.td-modal-evaluation-rank-3 {
  background-color: #b45309;
}

.td-modal-evaluation-recommendation {
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.td-modal-evaluation-recommendation-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
}

.td-modal-evaluation-recommendation-field {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.td-modal-evaluation-recommendation-label {
  font-size: 0.75rem;
  color: #666;
  min-width: 8.75rem;
}

.td-modal-evaluation-recommendation-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333;
}

.td-modal-bid-status-badge {
  display: inline-block;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.td-modal-award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #ecfdf3;
  color: #027a48;
  border: 1px solid #a6f4c5;
}

/* ===== from pages/Sales/WarrantyClaim/WarrantyClaim.css ===== */
/* Warranty Claim Wrapper - prevent page scroll */
.warranty-claim-wrapper {
  height: 100%;
  overflow: hidden; /* Prevent page scroll */
  overscroll-behavior: none; /* Prevent swipe navigation */
}

/* Warranty Claim Container */
.warranty-claim-container {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem 0 1.5rem; /* Reduced top padding, no bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap */
  overflow: hidden;
}

/* Header Section */
.warranty-claim-header {
  margin-bottom: 0;
}

.warranty-claim-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Type Warranty Claim Control - Exact copy of third-nav-control */
.warranty-claim-type-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2.25rem;
  width: 15rem;
}

.warranty-claim-type-control:hover {
  border-color: #C2DE54;
  background-color: var(--color-gray-50);
}

.warranty-claim-type-control-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.warranty-claim-type-control-label {
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  font-weight: 500;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.warranty-claim-type-control-value {
  color: #212529;
  color: var(--color-gray-900);
  font-weight: 600;
}

.warranty-claim-type-control-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

/* Refresh Button - Similar style to control */
.warranty-claim-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-refresh-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-refresh-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Sort Button - Same style as Refresh button */
.warranty-claim-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-sort-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-sort-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Group by Button - Same style as other buttons */
.warranty-claim-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-group-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-group-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Toolbar Separator */
.warranty-claim-toolbar-separator {
  width: 1px;
  height: 2.25rem;
  background-color: #E5E5E5;
  margin: 0 0.25rem;
}

/* Layout Button - Same style as other buttons */
.warranty-claim-layout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-layout-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-layout-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Filter Button - Icon only */
.warranty-claim-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-filter-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-filter-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Download Button - Same style as other buttons */
.warranty-claim-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.warranty-claim-download-button:hover {
  background-color: #f0f8e8;
  border-color: #C2DE54;
}

.warranty-claim-download-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Layout Dropdown Menu - Same style as Type dropdown */
.warranty-claim-layout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.warranty-claim-layout-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.warranty-claim-layout-dropdown-item:last-child {
  border-bottom: none;
}

.warranty-claim-layout-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.warranty-claim-layout-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.warranty-claim-layout-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

.warranty-claim-layout-dropdown-separator {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0;
}

/* Filter Dropdown Menu */
.warranty-claim-filter-menu {
  position: absolute;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  min-width: 25rem;
  z-index: 10000;
  overflow: hidden;
}

.warranty-claim-filter-header {
  padding: 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.warranty-claim-filter-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.75rem 0;
}

.warranty-claim-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.warranty-claim-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.warranty-claim-filter-menu-item:hover {
  background-color: #f0f8e8;
}

.warranty-claim-filter-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.warranty-claim-filter-menu-label {
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
}

.warranty-claim-filter-menu-separator {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
  margin: 0 0.25rem;
}

.warranty-claim-filter-parameter-wrapper {
  position: relative;
}

.warranty-claim-filter-parameter-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  z-index: 10001;
  padding: 0.5rem 0;
}

.warranty-claim-filter-parameter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.warranty-claim-filter-parameter-item:hover {
  background-color: #f5f5f5;
}

.warranty-claim-filter-parameter-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.warranty-claim-filter-parameter-item--disabled:hover {
  background-color: transparent;
}

.warranty-claim-filter-parameter-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.warranty-claim-filter-content {
  padding: 1rem;
  max-height: 25rem;
  overflow-y: auto;
}

.warranty-claim-filter-footer {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
}

.warranty-claim-filter-apply-btn {
  padding: 0.5rem 1.25rem;
  background-color: #138B4C;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.warranty-claim-filter-apply-btn:hover {
  background-color: #0f6d3a;
}

/* Close button for filter dropdown */
.warranty-claim-filter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease;
}

.warranty-claim-filter-close:hover {
  background-color: #f0f0f0;
}

.warranty-claim-filter-close-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%);
}

/* Filter Groups */
.warranty-claim-filter-group {
  margin-bottom: 1rem;
}

.warranty-claim-filter-group:last-child {
  margin-bottom: 0;
}

/* Period Row */
.warranty-claim-filter-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.warranty-claim-filter-label {
  width: 6.25rem;
  font-size: 0.8125rem;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.warranty-claim-filter-date-wrapper {
  position: relative;
  flex: 1 1;
}

.warranty-claim-filter-date-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.warranty-claim-filter-date-overlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: white;
  pointer-events: none;
  color: #333;
}

.warranty-claim-filter-to {
  font-size: 0.8125rem;
  color: #666;
  font-weight: 500;
}

/* Organization Row */
.warranty-claim-filter-organization-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.warranty-claim-filter-org-container {
  flex: 1 1;
  position: relative;
}

.warranty-claim-filter-org-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.warranty-claim-filter-org-input:hover {
  border-color: #C2DE54;
}

.warranty-claim-filter-org-placeholder {
  font-size: 0.8125rem;
  color: #999;
}

.warranty-claim-filter-org-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

/* Tags for selected items */
.warranty-claim-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.warranty-claim-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.375rem;
  background-color: #f0f8e8;
  border: 1px solid #C2DE54;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #333;
  font-weight: 500;
}

.warranty-claim-filter-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  font-weight: normal;
}

.warranty-claim-filter-tag-remove:hover {
  color: #000;
}

.warranty-claim-filter-tag--others {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
  color: #666;
}

/* Organization Dropdown */
.warranty-claim-filter-org-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 18.75rem;
  overflow-y: auto;
  z-index: 1001;
}

.warranty-claim-filter-org-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.warranty-claim-filter-org-item:hover {
  background-color: #f5f5f5;
}

.warranty-claim-filter-org-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.warranty-claim-filter-org-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 0.25rem 0;
}

.warranty-claim-filter-org-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1;
}

.warranty-claim-filter-org-code {
  font-weight: 600;
  color: #333;
}

.warranty-claim-filter-org-name {
  color: #666;
  font-size: 0.75rem;
}

/* Dropdown Menu - Exact copy of dashboard-dropdown-menu */
.warranty-claim-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 15rem;
  background-color: #ffffff;
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 0 1.25rem 0.5rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  padding: 0;
}

.warranty-claim-type-dropdown-item {
  padding: 0.625rem 1rem;
  transition: 200ms ease;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #495057;
  color: var(--color-gray-700);
  border-bottom: 1px solid #f5f5f5;
}

.warranty-claim-type-dropdown-item:last-child {
  border-bottom: none;
}

.warranty-claim-type-dropdown-item:hover {
  background-color: #f0f8e8;
  color: #212529;
  color: var(--color-gray-900);
}

.warranty-claim-type-dropdown-item--active {
  background-color: #f0f8e8;
  color: #000000;
  font-weight: 600;
}

.warranty-claim-type-dropdown-item--active:hover {
  background-color: #e8f5e8;
}

/* Content Section */
.warranty-claim-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to allow shrinking */
  overflow: hidden;
}

/* Warranty Claim Table */
.warranty-claim-table {
  animation: warrantyClaimFadeIn 0.3s ease-in;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes warrantyClaimFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .warranty-claim-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .warranty-claim-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .warranty-claim-type-dropdown {
    min-width: 11.25rem;
  }

  .warranty-claim-container {
    padding: 1rem;
  }
}

/* Action Print Dropdown (from action menu) */
.action-print-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-print-dropdown {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  min-width: 12.5rem;
  overflow: hidden;
}

.action-print-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

.action-print-dropdown-header-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.action-print-dropdown-items {
  padding: 0.5rem 0;
}

.action-print-dropdown-item {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.action-print-dropdown-item:hover {
  background-color: #f0f8e8;
}

/* Outstanding Items View */
.outstanding-items-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
}

.outstanding-items-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.outstanding-items-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.outstanding-items-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #666666;
  font-size: 0.875rem;
}

/* ===== from pages/Sales/WarrantyClaim/WarrantyClaimModal.css ===== */
/* Delivery Order Modal Specific Styles */
.warranty-claim-modal {
  overscroll-behavior: contain;
}

.warranty-claim-modal .modal-body {
  padding: 0;
  overscroll-behavior: contain;
}

/* PoV Dropdown Styles */
.wc-modal-pov-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.wc-modal-pov-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #E8F5E9;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  height: 2rem;
  width: 10.3125rem;
}

.wc-modal-pov-button span {
  text-align: left;
  padding-left: 0.25rem;
}

.wc-modal-pov-button:hover {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

.wc-modal-pov-button--active {
  background-color: #D4EED8;
  border-color: #0F6B3A;
}

/* External PoV Button Style - Orange */
.wc-modal-pov-button--external {
  background-color: #FEF3E2;
  border-color: #F5A623;
  color: #E67E00;
}

.wc-modal-pov-button--external:hover {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.wc-modal-pov-button--external.wc-modal-pov-button--active {
  background-color: #FDEBD0;
  border-color: #E09600;
}

.wc-modal-pov-button--external .wc-modal-pov-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-pov-button--external .wc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-pov-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-pov-caret {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: transform 200ms ease;
  margin-left: auto;
}

.wc-modal-pov-caret--open {
  transform: rotate(180deg);
}

.wc-modal-pov-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

.wc-modal-pov-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
  color: #333333;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.wc-modal-pov-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-pov-dropdown-item--selected {
  background-color: #F5F5F5;
  font-weight: 500;
}

.wc-modal-pov-dropdown-item span {
  flex: 1 1;
}

.wc-modal-pov-external-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Full Layout Container */
.wc-modal-layout-container {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Left Content Area */
.wc-modal-left-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.wc-modal-left-area--full {
  flex: 1 1;
}

/* Tabs Container */
.wc-modal-tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FAFAFA;
  flex-shrink: 0;
  position: relative;
}

/* Tabs Navigation */
.wc-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  flex: 1 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.wc-modal-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.wc-modal-tabs--display .wc-modal-tab {
  color: #666666;
}

.wc-modal-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666666;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.wc-modal-tab:hover {
  color: #333333;
  background-color: #F5F5F5;
}

.wc-modal-tab--active {
  color: #138B4C;
  font-weight: 600;
  border-bottom-color: #138B4C;
  background-color: #FFFFFF;
}

.wc-modal-tabs--display .wc-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.wc-modal-tab--active:hover {
  background-color: #FFFFFF;
}

/* External PoV Tab Styles - Orange color */
.wc-modal-tabs--external .wc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wc-modal-tabs--external.wc-modal-tabs--display .wc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wc-modal-tabs--external .wc-modal-tab:hover {
  color: #E67E22;
}

/* Tab Actions Container */
.wc-modal-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Action Button */
.wc-modal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  background-color: #138B4C;
  border: 1px solid #138B4C;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFFFFF;
  width: 5.3125rem;
  height: 2rem;
}

.wc-modal-action-button span {
  white-space: nowrap;
}

.wc-modal-action-button:hover {
  background-color: #0F6B3A;
  border-color: #0F6B3A;
}

.wc-modal-action-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Disabled state for Action Button */
.wc-modal-action-button--disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wc-modal-action-button--disabled .wc-modal-action-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

/* Back Button */
.wc-modal-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  cursor: pointer;
  transition: all 300ms ease;
  align-self: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.wc-modal-back-button:hover {
  /* Keep white background, no color change */
}

/* Stretch effect when stage is collapsed */
.wc-modal-left-area--full .wc-modal-back-button {
  transition: width 300ms ease;
}

.wc-modal-left-area--full .wc-modal-back-button:hover {
  width: 3.5rem;
}

.wc-modal-back-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: none;
  flex-shrink: 0;
}

/* Tab Content */
.wc-modal-content {
  flex: 1 1;
  padding: 1.5rem 2.5rem 2.75rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  overscroll-behavior: contain;
}

.wc-modal-content--no-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wc-modal-content--item {
  padding-bottom: 1rem;
}

.wc-modal-content--data-flow {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Attachment Table Styles */
.wc-modal-attachment-table-container {
  border: 1px solid #D0D0D0;
  overflow: hidden;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.wc-modal-attachment-table-container * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.wc-modal-attachment-table-container .wc-modal-detail-table thead,
.wc-modal-attachment-table-container .wc-modal-attachment-table thead {
  box-shadow: none !important;
}

.wc-modal-attachment-table-container .wc-modal-detail-table tr,
.wc-modal-attachment-table-container .wc-modal-attachment-table tr {
  box-shadow: none !important;
}

.wc-modal-attachment-table-container .wc-modal-detail-table tbody tr:last-child,
.wc-modal-attachment-table-container .wc-modal-attachment-table tbody tr:last-child {
  border-bottom: none !important;
  box-shadow: none !important;
}

.wc-modal-attachment-table-container .wc-modal-detail-table tbody tr:last-child td,
.wc-modal-attachment-table-container .wc-modal-attachment-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none !important;
}

.wc-modal-attachment-table {
  width: 100%;
  border-collapse: collapse;
}

.wc-modal-attachment-table thead {
  background-color: #E8F5E9;
}

.wc-modal-attachment-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #D0D0D0;
}

.wc-modal-attachment-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  border-bottom: 1px solid #E8E8E8;
}

.wc-modal-attachment-table tbody tr:last-child td {
  border-bottom: none;
}

.wc-modal-attachment-table tbody tr:hover {
  background-color: #F8F8F8;
}

.wc-modal-attachment-filename {
  color: #138B4C;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.wc-modal-attachment-filename:hover {
  text-decoration: none;
}

/* External PoV Attachment Filename - Orange Color */
.wc-modal-attachment-filename--external {
  color: #E67E22;
}

.wc-modal-attachment-filename--external:hover {
  color: #D35400;
}

/* External PoV Attachment Filename - keep orange in Display Mode */
.wc-modal-tab-content--display .wc-modal-attachment-filename--external {
  color: #E67E22;
}

.wc-modal-attachment-type {
  color: #666666;
  font-size: 0.75rem;
  font-weight: 500;
}

.wc-modal-attachment-size {
  color: #666666;
}

.wc-modal-attachment-date {
  color: #666666;
}

.wc-modal-attachment-uploadedby {
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-attachment-table thead {
  background-color: #FAFAFA;
}

/* Attachment Modal Browse Button - Same style as Add Item Button */
.wc-modal-attachment-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.wc-modal-attachment-browse-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wc-modal-attachment-browse-btn:focus {
  outline: none;
}

.wc-modal-attachment-browse-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.wc-modal-attachment-browse-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.wc-modal-attachment-browse-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-attachment-browse-btn--disabled .wc-modal-attachment-browse-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.wc-modal-tab-content--display .wc-modal-attachment-filename {
  color: #138B4C;
}

/* External PoV - Attachment Filename Display Mode - Orange Color */
.wc-modal-tab-content--display .wc-modal-attachment-filename.wc-modal-attachment-filename--external {
  color: #E67E22;
}

.wc-modal-tab-content--display .wc-modal-attachment-type {
  color: #666666;
}

.wc-modal-tab-content--display .wc-modal-attachment-size {
  color: #666666;
}

.wc-modal-tab-content--display .wc-modal-attachment-date {
  color: #666666;
}

.wc-modal-tab-content--display .wc-modal-attachment-uploadedby {
  color: #333333;
}

.wc-modal-tab-content h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: color 200ms ease;
}

.wc-modal-tab-content--display h3 {
  color: #333333;
}

/* Details Grid */
.wc-modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Basic Data Section with green background */
.wc-modal-basic-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.wc-modal-basic-section h3 {
  margin-top: 0;
}

/* Keep green background in display mode */
.wc-modal-tab-content--display .wc-modal-basic-section {
  background-color: #F2F8EA;
}

/* Basic Data Section with orange background for External PoV */
.wc-modal-basic-section--external {
  background-color: #FEF5E7;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.wc-modal-basic-section--external h3 {
  margin-top: 0;
}

/* Keep orange background in display mode for External PoV */
.wc-modal-tab-content--display .wc-modal-basic-section--external {
  background-color: #FEF5E7;
}

/* External PoV Form Input Orange Border on Focus */
.wc-modal-basic-section--external .wc-modal-form-input:focus {
  border-color: #F5B041;
}

.wc-modal-basic-section--external .wc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* General External PoV Form Input Orange Border on Focus - All Tabs */
.wc-modal-tab-content--external .wc-modal-form-input:focus,
.wc-modal-tab-content--external .wc-modal-form-textarea:focus,
.wc-modal-tab-content--external .wc-modal-custom-dropdown-input:focus,
.wc-modal-tab-content--external .wc-modal-date-input:focus,
.wc-modal-tab-content--external .wc-modal-volume-uom-input:focus {
  border-color: #F5B041;
}

/* Section Divider */
.wc-modal-section-divider {
  height: 1px;
  background-color: #E5E5E5;
  margin: 0 -2.5rem;
}

/* Item Tab Header Section - Green with full-width border */
.wc-modal-item-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 0 2.5rem;
  flex-shrink: 0;
}

/* Partner Tab Header Section - with padding bottom like Basic Data */
.wc-modal-partner-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
}

/* When header dropdown is open, raise z-index above the table section */
.wc-modal-partner-header-section--dropdown-open {
  z-index: 10;
}

.wc-modal-partner-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wc-modal-tab-content--display .wc-modal-partner-header-section {
  background-color: #F2F8EA;
}

/* External PoV Partner Header Section - Orange Background */
.wc-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

.wc-modal-tab-content--display .wc-modal-partner-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Partner Form Input Orange Border on Focus */
.wc-modal-partner-header-section--external .wc-modal-form-input:focus {
  border-color: #F5B041;
}

/* Notes Tab Header Section - Same style as Partner */
.wc-modal-notes-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-notes-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wc-modal-tab-content--display .wc-modal-notes-header-section {
  background-color: #F2F8EA;
}

/* Notes Checkbox Styles */
.wc-modal-notes-checkbox {
  margin-top: 0.75rem;
  color: #333333;
}

.wc-modal-notes-checkbox .form-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D0D0;
  border-radius: 0.1875rem;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.wc-modal-notes-checkbox .form-checkbox:checked {
  background-color: #C2DE54;
  background-color: var(--color-primary, #138B4C);
  border-color: #C2DE54;
  border-color: var(--color-primary, #138B4C);
}

.wc-modal-notes-checkbox .form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 2px;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wc-modal-notes-checkbox--display {
  color: #999999;
  cursor: default;
}

.wc-modal-notes-checkbox--display .form-checkbox {
  cursor: default;
  border-color: #C0C0C0;
  background-color: #FAFAFA;
}

.wc-modal-notes-checkbox--display .form-checkbox:checked {
  background-color: #999999;
  border-color: #999999;
}

/* Textarea Styles */
.wc-modal-form-textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  resize: vertical;
  min-height: 7.5rem;
}

.wc-modal-form-textarea:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-form-textarea::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-form-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
  resize: none;
}

.wc-modal-form-textarea--display:focus {
  border-color: #E0E0E0;
}

/* Chat Section Styles */
.wc-modal-chat-section {
  padding: 1.5rem 0;
}

.wc-modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.wc-modal-chat-header h3 {
  margin: 0;
}

.wc-modal-chat-new-thread {
  margin-bottom: 1.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 1rem;
}

.wc-modal-chat-new-thread .wc-modal-form-textarea {
  min-height: 5rem;
}

.wc-modal-chat-new-thread-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.wc-modal-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wc-modal-chat-thread {
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wc-modal-chat-message {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.wc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wc-modal-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.wc-modal-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.wc-modal-chat-avatar--small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  font-size: 0.75rem;
}

.wc-modal-chat-content {
  flex: 1 1;
  min-width: 0;
}

.wc-modal-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.wc-modal-chat-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1;
}

.wc-modal-chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.wc-modal-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.wc-modal-chat-delete-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.wc-modal-chat-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-chat-user-name {
  color: #333333 !important;
}

.wc-modal-chat-user-position {
  font-size: 0.75rem;
  color: #666666;
  padding: 2px 0.5rem;
  background-color: #E8F5E9;
  border-radius: 0.625rem;
}

.wc-modal-chat-timestamp {
  font-size: 0.75rem;
  color: #999999;
}

.wc-modal-chat-text {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
  word-wrap: break-word;
}

.wc-modal-chat-reply-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  color: #138B4C;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.625rem;
  transition: all 200ms ease;
}

.wc-modal-chat-reply-btn:hover {
  color: #0F6B3B;
}

.wc-modal-chat-reply-btn:hover span {
  text-decoration: none;
}

.wc-modal-chat-reply-btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.wc-modal-chat-reply-btn:hover .wc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(94%) contrast(91%);
}

.wc-modal-chat-replies {
  border-top: 1px solid #E5E5E5;
}

.wc-modal-chat-replies .wc-modal-chat-message--reply {
  padding-left: 4.25rem;
}

.wc-modal-chat-reply-input {
  padding: 1rem;
  padding-left: 4.25rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
}

.wc-modal-chat-reply-input .wc-modal-form-textarea {
  min-height: 3.75rem;
  margin-bottom: 0.75rem;
}

.wc-modal-chat-reply-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.wc-modal-chat-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: #999999;
  font-size: 0.8125rem;
  border: 1px dashed #E5E5E5;
  border-radius: 0.25rem;
}

/* Chat Mention Styles */
.wc-modal-chat-mention {
  color: #138B4C;
  font-weight: 600;
  background-color: #E8F5E9;
  padding: 1px 0.25rem;
  border-radius: 0.1875rem;
}

/* Display mode chat styles - keep colorful */
.wc-modal-tab-content--display .wc-modal-chat-thread {
  border-color: #E5E5E5;
}

.wc-modal-tab-content--display .wc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display .wc-modal-chat-avatar {
  background-color: #E8F5E9;
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-chat-user-position {
  background-color: #E8F5E9;
}

.wc-modal-tab-content--display .wc-modal-chat-mention {
  background-color: #E8F5E9;
  color: #138B4C;
}

/* External PoV Notes Section Styling */
.wc-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.wc-modal-tab-content--display .wc-modal-notes-header-section--external {
  background-color: #FEF5E7;
}

.wc-modal-notes-checkbox--external .form-checkbox:checked {
  background-color: #F5B041;
  border-color: #F5B041;
}

/* External PoV Form Input/Textarea Orange Border */
.wc-modal-notes-header-section--external .wc-modal-form-textarea:focus {
  border-color: #F5B041;
}

.wc-modal-chat-section--external .wc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Chat Section Styling */
.wc-modal-chat-avatar--external {
  background-color: #F5B041;
}

.wc-modal-chat-user-position--external {
  background-color: #FDE8D0;
}

.wc-modal-tab-content--display .wc-modal-chat-avatar--external {
  background-color: #F5B041;
  color: #333333;
}

/* External PoV Display Mode - keep same as Edit Mode */
.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-thread {
  border-color: #E5E5E5;
}

.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-message--main {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-avatar {
  background-color: #F5B041;
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-user-name {
  color: #333333 !important;
}

.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-user-position {
  background-color: #FDE8D0;
}

.wc-modal-tab-content--display.wc-modal-tab-content--external .wc-modal-chat-mention {
  background-color: #FDE8D0;
  color: #E67E22;
}

.wc-modal-chat-reply-btn--external {
  color: #E67E22;
}

.wc-modal-chat-reply-btn--external:hover {
  color: #D35400;
}

.wc-modal-chat-reply-btn--external .wc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wc-modal-chat-reply-btn--external:hover .wc-modal-chat-reply-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1300%) hue-rotate(10deg) brightness(95%) contrast(91%);
}

/* External PoV Confirm Button - Lighter Orange */
.wc-modal-btn-confirm--external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.wc-modal-btn-confirm--external:hover {
  background-color: #E9A137 !important;
  border-color: #E9A137 !important;
}

/* External PoV Cancel Button - Orange Hover Border */
.wc-modal-chat-section--external .modal-btn-cancel:hover {
  border-color: #F5B041 !important;
  color: #E67E22 !important;
}

.wc-modal-btn-confirm--external:disabled {
  background-color: #FDEBD0 !important;
  border-color: #FDEBD0 !important;
  cursor: not-allowed;
}

/* Chat Mention Autocomplete Dropdown */
.wc-modal-chat-textarea-wrapper {
  position: relative;
}

.wc-modal-chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 17.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 0.25rem;
}

.wc-modal-chat-mention-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wc-modal-chat-mention-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-chat-mention-item:first-child {
  border-radius: 0.25rem 0.25rem 0 0;
}

.wc-modal-chat-mention-item:last-child {
  border-radius: 0 0 0.25rem 0.25rem;
}

.wc-modal-chat-mention-item:only-child {
  border-radius: 0.25rem;
}

.wc-modal-chat-mention-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
}

.wc-modal-chat-mention-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wc-modal-chat-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-chat-mention-position {
  font-size: 0.6875rem;
  color: #666666;
}

/* Scrollbar for mention dropdown */
.wc-modal-chat-mention-dropdown::-webkit-scrollbar {
  width: 0.25rem;
}

.wc-modal-chat-mention-dropdown::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.wc-modal-chat-mention-dropdown::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.wc-modal-chat-mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Table Empty State */
.wc-modal-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.wc-modal-table-empty-state-image {
  width: 6.75rem;
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.wc-modal-table-empty-state-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #666666;
}

.wc-modal-table-empty-state-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #999999;
}

.wc-modal-tab-content--display .wc-modal-table-empty-state-title {
  color: #666666;
}

.wc-modal-tab-content--display .wc-modal-table-empty-state-subtitle {
  color: #999999;
}

/* Partner Tab - ensure proper flex layout for button positioning */
.wc-modal-partner-header-section + .wc-modal-item-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Allow dropdown to overflow Partner content section when open and raise z-index */
.wc-modal-partner-header-section + .wc-modal-item-content-section--dropdown-open {
  overflow: visible !important;
  z-index: 10;
}

.wc-modal-partner-header-section + .wc-modal-item-content-section .wc-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow dropdown to overflow Partner table wrapper when open */
.wc-modal-partner-header-section + .wc-modal-item-content-section .wc-modal-item-table-wrapper--dropdown-open {
  overflow: visible !important;
}

/* Partner Table - override min-height to allow shrinking */
.wc-modal-partner-header-section + .wc-modal-item-content-section .wc-modal-detail-table-container {
  flex: 1 1;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Allow dropdown to overflow Partner table container when open */
.wc-modal-partner-header-section + .wc-modal-item-content-section .wc-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

/* Partner button section - stays at bottom with 16px padding */
.wc-modal-partner-header-section + .wc-modal-item-content-section .wc-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.wc-modal-partner-table-container .wc-modal-partner-table {
  width: 100%;
  table-layout: fixed;
}

.wc-modal-partner-table-container .wc-modal-partner-table th:last-child,
.wc-modal-partner-table-container .wc-modal-partner-table td:last-child {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

/* External PoV Partner Table - Name is last column, should expand to fill remaining space */
.wc-modal-detail-table-container--external.wc-modal-partner-table-container .wc-modal-partner-table th:last-child,
.wc-modal-detail-table-container--external.wc-modal-partner-table-container .wc-modal-partner-table td:last-child {
  width: auto !important;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: none !important;
  max-width: initial !important;
}

.wc-modal-item-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wc-modal-item-header-section .wc-modal-detail-subtabs {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-tab-content--display .wc-modal-item-header-section {
  background-color: #F2F8EA;
}

/* External PoV Item Header Section - Orange Background */
.wc-modal-item-header-section--external {
  background-color: #FEF5E7;
}

.wc-modal-tab-content--display .wc-modal-item-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Item Form Input Orange Border on Focus */
.wc-modal-item-header-section--external .wc-modal-form-input:focus {
  border-color: #F5B041;
}

.wc-modal-item-header-section--external .wc-modal-form-textarea:focus {
  border-color: #F5B041;
}

/* External PoV Subtabs - Orange Style */
.wc-modal-detail-subtabs--external .wc-modal-detail-subtab--external {
  color: #666666;
  border-bottom: 2px solid transparent;
}

.wc-modal-detail-subtabs--external .wc-modal-detail-subtab--external:hover {
  color: #E67E22;
}

.wc-modal-detail-subtabs--external .wc-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* External PoV Subtabs in Display Mode - keep orange */
.wc-modal-tab-content--display .wc-modal-detail-subtabs--external .wc-modal-detail-subtab--external-active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

.wc-modal-tab-content--display .wc-modal-detail-subtabs--external .wc-modal-detail-subtab--external:hover {
  color: #E67E22;
}

/* Item Tab - Flex layout to fill available space */
.wc-modal-tab-content.wc-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

/* Item Tab Content Section - White background with flex layout */
.wc-modal-item-content-section {
  background-color: #FFFFFF;
  padding: 0.625rem 0 0 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Item Table Wrapper - Flex layout for dynamic height */
.wc-modal-item-table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-item-table-wrapper > label {
  flex-shrink: 0;
  margin-bottom: 0.3125rem;
  padding-top: 1.25rem;
}

.wc-modal-item-table-wrapper .wc-modal-detail-table-container {
  flex: 1 1;
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* Item/Packaging button section - stays at bottom, never hidden */
.wc-modal-item-table-wrapper .wc-modal-item-button-section {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Terms Tab Table - flexible height so button stays visible */
.wc-modal-item-table-wrapper--terms .wc-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Terms Tab - ensure flex and scroll behavior works */
.wc-modal-tab-content--external.wc-modal-item-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.wc-modal-tab-content--external .wc-modal-item-content-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-tab-content--external .wc-modal-item-table-wrapper--terms {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-tab-content--external .wc-modal-item-table-wrapper--terms .wc-modal-detail-table-container {
  min-height: 0;
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}

/* External PoV Tables - add padding bottom to match Internal (16px from --item + 8px from button section) */
.wc-modal-tab-content--external .wc-modal-item-table-wrapper {
  padding-bottom: 0.5rem;
}

.wc-modal-item-table-wrapper--terms .wc-modal-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 56.875rem;
}

.wc-modal-item-table-wrapper--terms .wc-modal-detail-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wc-modal-item-table-wrapper--terms .wc-modal-detail-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9F9F9;
}

.wc-modal-item-table-wrapper--terms .wc-modal-detail-table tr {
  height: auto;
}

.wc-modal-item-table-wrapper--terms .wc-modal-detail-table-container .wc-modal-detail-table td {
  height: auto;
  vertical-align: top;
  padding: 0.625rem 0.625rem;
}

.wc-modal-item-button-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Volume Content Section */
.wc-modal-volume-content {
  padding: 1.25rem 0;
}

/* Volume Input Group - side by side number and UoM */
.wc-modal-volume-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.wc-modal-volume-input-group .wc-modal-volume-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.wc-modal-volume-input-group .wc-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.wc-modal-volume-input-group .wc-modal-sla-input-wrapper .wc-modal-volume-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Volume UoM Dropdown Styles */
.wc-modal-volume-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.wc-modal-volume-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-volume-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-volume-uom-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-volume-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-volume-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-volume-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-volume-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-volume-uom-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.wc-modal-volume-uom-list--display .wc-modal-volume-uom-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-volume-uom-list--display .wc-modal-volume-uom-item:hover {
  background-color: transparent !important;
}

.wc-modal-volume-uom-list--display .wc-modal-volume-uom-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-volume-uom-list--display .wc-modal-volume-uom-check {
  color: #999999 !important;
}

.wc-modal-volume-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-volume-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-volume-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-volume-uom-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-volume-uom-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-volume-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-volume-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* ========== Display Mode Dropdown Items - Grey and Non-selectable ========== */
/* Volume UoM Display Mode Items */
.wc-modal-volume-uom-dropdown--display .wc-modal-volume-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wc-modal-volume-uom-dropdown--display .wc-modal-volume-uom-item:hover {
  background-color: transparent;
}

.wc-modal-volume-uom-dropdown--display .wc-modal-volume-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.wc-modal-volume-uom-dropdown--display .wc-modal-volume-uom-check {
  color: #999999;
}

/* Weight Input Group - side by side number and UoM */
.wc-modal-weight-input-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.wc-modal-weight-input-group .wc-modal-weight-number {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
  text-align: right;
}

.wc-modal-weight-input-group .wc-modal-sla-input-wrapper {
  width: calc(65% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(65% - 0.25rem);
}

.wc-modal-weight-input-group .wc-modal-sla-input-wrapper .wc-modal-weight-number {
  width: 100% !important;
  flex: 1 1;
  padding-right: 2rem !important;
}

/* Weight UoM Dropdown Styles */
.wc-modal-weight-uom-dropdown {
  position: relative;
  width: calc(35% - 0.25rem) !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(35% - 0.25rem);
}

.wc-modal-weight-uom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-weight-uom-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-weight-uom-input::placeholder {
  color: #999999;
}

.wc-modal-weight-uom-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-weight-uom-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-weight-uom-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-weight-uom-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-weight-uom-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-weight-uom-list--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-weight-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-weight-uom-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-weight-uom-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-weight-uom-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-weight-uom-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Weight UoM Display Mode Items */
.wc-modal-weight-uom-dropdown--display .wc-modal-weight-uom-item {
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
}

.wc-modal-weight-uom-dropdown--display .wc-modal-weight-uom-item:hover {
  background-color: transparent;
}

.wc-modal-weight-uom-dropdown--display .wc-modal-weight-uom-item--selected {
  background-color: #FAFAFA;
  color: #888888;
}

.wc-modal-weight-uom-dropdown--display .wc-modal-weight-uom-check {
  color: #999999;
}

/* Form Group Styles - matching login page */
.wc-modal-form-group {
  display: flex;
  flex-direction: column;
}

/* Form group that spans 2 columns */
.wc-modal-form-group--full {
  grid-column: span 2;
}

/* Select dropdown wrapper and styling */
.wc-modal-select-wrapper {
  position: relative;
  width: 100%;
}

.wc-modal-select-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

.wc-modal-form-input--display ~ .wc-modal-select-arrow {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

select.wc-modal-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

select.wc-modal-form-input--display {
  cursor: default;
}

.wc-modal-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}

.wc-modal-form-label--display {
  color: #333333 !important;
}

.wc-modal-required {
  color: #FF4D4F;
  margin-left: 2px;
}

.wc-modal-form-label--display .wc-modal-required {
  color: #FF4D4F;
}

.wc-modal-form-input {
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  transition: all 200ms ease;
  background-color: #FFFFFF;
  width: 100%;
  height: 2.2875rem;
  box-sizing: border-box;
  color: #333333;
}

.wc-modal-form-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-form-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  -webkit-text-fill-color: #CCCCCC;
}

.wc-modal-form-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #555555;
  cursor: default;
}

/* Date input styles (now using text inputs for consistent format) */
/* Keep same font as other inputs for consistency between edit and display modes */

.wc-modal-form-input--display:focus {
  border-color: #E0E0E0;
  box-shadow: none;
}

/* SLA Input with Spinner */
.wc-modal-sla-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sla-input {
  text-align: right;
  padding-right: 2.5rem !important;
}

.wc-modal-sla-input::placeholder {
  color: #CCCCCC;
  text-align: right;
}

.wc-modal-sla-spinner {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wc-modal-sla-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.875rem;
  background-color: rgba(19, 139, 76, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}

.wc-modal-sla-spinner-btn:hover {
  background-color: rgba(19, 139, 76, 0.25);
}

.wc-modal-sla-spinner-btn:active {
  background-color: rgba(19, 139, 76, 0.4);
}

.wc-modal-sla-spinner-btn:disabled {
  opacity: 1;
  cursor: default;
  background-color: rgba(156, 163, 175, 0.15);
}

.wc-modal-sla-spinner-btn:disabled:hover {
  background-color: rgba(156, 163, 175, 0.15);
}

.wc-modal-sla-spinner-btn:disabled .wc-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wc-modal-sla-spinner-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sla-spinner-btn:hover .wc-modal-sla-spinner-icon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(800%) hue-rotate(107deg) brightness(75%) contrast(100%);
}

/* Document Date Icon */
.wc-modal-document-date-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-document-date-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Stage Display */
.wc-modal-stage-display {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.wc-modal-stage-display--readonly {
  opacity: 0.8;
}

/* Divider */
.wc-modal-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 2rem 0;
}

/* Stage Badge */
.wc-modal-stage {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: #F5F5F5;
  color: #666666;
  white-space: nowrap;
}

.wc-modal-stage--created {
  background-color: #F3E5CA;
  color: #8B6F47;
}

.wc-modal-stage--approved {
  background-color: #CBB99E;
  color: #6B5D4F;
}

.wc-modal-stage--processed {
  background-color: #A7DAE5;
  color: #2C5F6F;
}

.wc-modal-stage--picked {
  background-color: #65D0EB;
  color: #1B5E71;
}

.wc-modal-stage--packed {
  background-color: #7CBBEC;
  color: #265A73;
}

.wc-modal-stage--planned {
  background-color: #7B98ED;
  color: #2D4A8F;
}

.wc-modal-stage--loaded {
  background-color: #B4A5DD;
  color: #5D4E8C;
}

.wc-modal-stage--issued {
  background-color: #C5C5EE;
  color: #5656A2;
}

.wc-modal-stage--departed {
  background-color: #FFC6E2;
  color: #A1537A;
}

.wc-modal-stage--arrived {
  background-color: #F3AEAB;
  color: #8B4A47;
}

.wc-modal-stage--unloaded {
  background-color: #FEC560;
  color: #8B6914;
}

.wc-modal-stage--delivered {
  background-color: #8FBF9C;
  color: #2B5C36;
}

.wc-modal-stage--confirmed {
  background-color: #80B464;
  color: #2B5C1F;
}

.wc-modal-stage--billed {
  background-color: #648455;
  color: #FFFFFF;
}

/* Display mode - make all stage badges gray */
.wc-modal-stage-dropdown-input--display .wc-modal-stage {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

.wc-modal-stage-dropdown-input--display .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Stage Section */
.wc-modal-stage-section {
  width: 32%;
  min-width: 23.75rem;
  border-left: 1px solid #E5E5E5;
  background-color: #FFFFFF !important;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  height: 100%;
}

/* White cover to seamlessly connect with back button */
.wc-modal-stage-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.625rem;
  width: 2px;
  height: 1.875rem;
  background-color: #FFFFFF;
  z-index: 200;
}

.wc-modal-stage-section--collapsed {
  width: 0;
  min-width: 0;
  border-left: 1px solid #E5E5E5;
}

.wc-modal-stage-section--display {
  /* Keep white background in display mode */
}

/* Stage Toggle Button - Removed (functionality moved to tabs button) */

/* Accordion Styles */
.wc-modal-accordion {
  margin-bottom: 1rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wc-modal-accordion:first-of-type {
  margin-top: 0.625rem;
}

.wc-modal-accordion-header {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333333;
  transition: all 200ms ease;
}

.wc-modal-accordion-header:hover {
  background-color: #F5F5F5;
}

.wc-modal-accordion-header--active {
  background-color: #FFFFFF;
  color: #333333;
}

.wc-modal-accordion-header--display {
  color: #333333;
}

.wc-modal-accordion-header--display.wc-modal-accordion-header--active {
  color: #333333;
}

.wc-modal-accordion-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 200ms ease;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-accordion-icon--open {
  transform: rotate(180deg);
}

/* Keep green icon in display mode */
.wc-modal-accordion-header--display .wc-modal-accordion-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-accordion-content {
  padding: 0.625rem 0.75rem;
  background-color: #FFFFFF;
  animation: slideDown 200ms ease;
}

.wc-modal-accordion-content--display {
  background-color: #FFFFFF;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 31.25rem;
  }
}

/* Stage Content */
.wc-modal-stage-content {
  flex: 1 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Stage Main Title */
.wc-modal-stage-main-title {
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #138B4C;
  background-color: #FFFFFF;
  height: 3rem;
  display: flex;
  align-items: center;
}

.wc-modal-stage-main-title--display {
  color: #138B4C;
}

.wc-modal-stage-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-stage-title--display {
  color: #333333;
}

.wc-modal-stage-current {
  margin-bottom: 1.875rem;
}

.wc-modal-stage-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.wc-modal-stage-label--display {
  color: #666666;
}

.wc-modal-stage-subtitle {
  margin: 0 0 0.9375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-stage-subtitle--display {
  color: #333333;
}

.wc-modal-stage-list {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  border: 1px solid #E5E5E5;
}

.wc-modal-stage-empty {
  color: #999999;
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

.wc-modal-stage-empty--display {
  color: #999999;
}

/* Stage Text Styles */
.wc-modal-stage-text {
  color: #666666;
  font-size: 0.875rem;
  margin: 0;
}

.wc-modal-stage-text--display {
  color: #666666;
}

/* Timeline Styles */
.wc-modal-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.wc-modal-timeline-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.wc-modal-timeline-title--display {
  color: #333333;
}

/* Download Button */
.wc-modal-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wc-modal-download-button:hover {
  background-color: #F0F0F0;
  border-color: #E0E0E0;
}

.wc-modal-download-button:active {
  background-color: #E0E0E0;
}

.wc-modal-download-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-download-button--display .wc-modal-download-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-bottom: 1.25rem;
}

.wc-modal-timeline-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: center;
  padding: 0;
}

.wc-modal-timeline-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
}

/* Circular Badge for Timeline - Light green for completed, grey for inactive */
.wc-modal-timeline-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
}

/* Inactive badge state - always grey regardless of mode */
.wc-modal-timeline-badge--inactive {
  background-color: #F5F5F5 !important;
  border-color: #C0C0C0 !important;
}

/* Keep colorful badge for completed stages in display mode */
.wc-modal-timeline-item--display .wc-modal-timeline-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

/* Timeline icon - green matching modal header icons */
.wc-modal-timeline-icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Grey icon for inactive stages */
.wc-modal-timeline-badge--inactive .wc-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Keep green icon for completed stages in display mode */
.wc-modal-timeline-item--display .wc-modal-timeline-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-timeline-line {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.25rem;
  background-color: #138B4C;
  z-index: 0;
}

.wc-modal-timeline-line--inactive {
  background-color: #E5E5E5 !important;
}

/* Keep green line for completed stages in display mode */
.wc-modal-timeline-item--display .wc-modal-timeline-line {
  background-color: #138B4C;
}

.wc-modal-timeline-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wc-modal-timeline-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

.wc-modal-timeline-status--display {
  color: #333333;
}

.wc-modal-timeline-status--inactive {
  color: #AAAAAA;
}

.wc-modal-timeline-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  line-height: 1.2;
}

.wc-modal-timeline-date--display {
  color: #666666;
}

.wc-modal-timeline-date--inactive {
  color: #BBBBBB;
}

.wc-modal-timeline-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 2px;
  line-height: 1.2;
}

.wc-modal-timeline-user--display {
  color: #999999;
}

/* Document link in timeline */
.wc-modal-timeline-document {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.wc-modal-timeline-document:hover {
  opacity: 0.8;
  text-decoration: none;
}

.wc-modal-timeline-document--display {
  color: #138B4C;
}

.wc-modal-timeline-document--display:hover {
  color: #0D6B3A;
}

/* Add inactive state for uncompleted stages */
.wc-modal-stage--inactive {
  background-color: #E5E5E5 !important;
  color: #999999 !important;
  opacity: 0.7;
}

/* Activity Log Styles */
.wc-modal-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0.75rem;
}

.wc-modal-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #888888;
  font-size: 0.875rem;
  font-style: italic;
}

.wc-modal-activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
  align-items: flex-start;
  padding-bottom: 1rem;
}

.wc-modal-activity-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.25rem;
  align-self: stretch;
}

/* Square Badge for Activity Log */
.wc-modal-activity-badge {
  width: 2.25rem;
  height: 2.5rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #F2F8EA;
  border: 1px solid #138B4C;
  padding: 0;
  overflow: hidden;
}

/* Keep colorful badge in display mode */
.wc-modal-activity-item--display .wc-modal-activity-badge {
  background-color: #F2F8EA;
  border-color: #138B4C;
}

.wc-modal-activity-month {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  background-color: #347833;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
}

.wc-modal-activity-day {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #138B4C;
  text-align: center;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F8EA;
}

.wc-modal-activity-item--display .wc-modal-activity-month {
  background-color: #347833;
  color: #FFFFFF;
}

.wc-modal-activity-item--display .wc-modal-activity-day {
  color: #138B4C;
  background-color: #F2F8EA;
}

.wc-modal-activity-line {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -1rem;
  background-color: #138B4C;
  z-index: 0;
}

/* Keep green line in display mode */
.wc-modal-activity-item--display .wc-modal-activity-line {
  background-color: #138B4C;
}

.wc-modal-activity-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.wc-modal-activity-type {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

.wc-modal-activity-type--display {
  color: #333333;
}

.wc-modal-activity-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
}

.wc-modal-activity-header--display {
  color: #666666;
}

.wc-modal-activity-change {
  font-size: 0.6875rem;
  color: #666666;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.3;
}

.wc-modal-activity-field {
  font-weight: 600;
  color: #333333;
  margin-right: 0.25rem;
}

.wc-modal-activity-old {
  color: #999999;
  text-decoration: line-through;
  word-break: break-word;
  cursor: help;
}

.wc-modal-activity-arrow {
  color: #666666;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.wc-modal-activity-new {
  color: #138B4C;
  font-weight: 600;
  word-break: break-word;
  cursor: help;
}

.wc-modal-activity-change--display .wc-modal-activity-field {
  color: #333333;
}

.wc-modal-activity-change--display .wc-modal-activity-new {
  color: #138B4C;
}

.wc-modal-activity-date {
  font-size: 0.75rem;
  color: #666666;
  margin-top: 0;
  padding-top: 0.25rem;
  line-height: 1.2;
}

.wc-modal-activity-date--display {
  color: #666666;
}

.wc-modal-activity-user {
  font-size: 0.6875rem;
  color: #999999;
  margin-top: 0;
  line-height: 1.2;
}

.wc-modal-activity-user--display {
  color: #138B4C;
}

/* More updates link */
.wc-modal-activity-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.wc-modal-activity-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

.wc-modal-activity-more--display {
  color: #138B4C;
}

.wc-modal-activity-more-icon {
  width: 0.625rem;
  height: 0.625rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-activity-more--display .wc-modal-activity-more-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Reference Table Styles */
.wc-modal-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  table-layout: fixed;
}

.wc-modal-reference-table thead {
  background-color: #F9F9F9;
}

.wc-modal-tab-content--display .wc-modal-reference-table thead {
  background-color: #FAFAFA;
}

.wc-modal-reference-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  border: 1px solid #E5E5E5;
}

.wc-modal-reference-table td {
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: #666666;
  border: 1px solid #E5E5E5;
  height: 2.5rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.wc-modal-tab-content--display .wc-modal-reference-table td {
  padding: 0.25rem 0.25rem;
}

/* Detail Delivery Section - Green background like Basic Data */
.wc-modal-detail-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 0 -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-detail-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.wc-modal-tab-content--display .wc-modal-detail-section {
  background-color: #F2F8EA;
}

/* Detail Delivery Sub-tabs */
.wc-modal-detail-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E5E5E5;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.wc-modal-detail-subtab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: -1px;
}

.wc-modal-detail-subtab:hover {
  color: #138B4C;
}

.wc-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* Display mode styling for sub-tabs - keep colorful */
.wc-modal-tab-content--display .wc-modal-detail-subtab {
  color: #666666;
}

.wc-modal-tab-content--display .wc-modal-detail-subtab:hover {
  color: #138B4C;
}

.wc-modal-tab-content--display .wc-modal-detail-subtab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

.wc-modal-detail-subtab-content {
  padding: 1rem 0;
  color: #666666;
  font-size: 0.8125rem;
}

/* Detail Delivery Tab Content - Flex layout to fill available space */
.wc-modal-tab-content.wc-modal-detail-delivery-tab {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* Detail Delivery Tab - Full height flex layout */
.wc-modal-detail-delivery-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-detail-delivery-wrapper .wc-modal-form-label {
  flex-shrink: 0;
}

.wc-modal-detail-delivery-wrapper > div:last-child {
  flex-shrink: 0;
}

/* Detail Table - Styled like main Delivery Table */
.wc-modal-detail-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
  margin-top: 0;
  overscroll-behavior: contain;
  flex: 1 1;
  min-height: 0;
}

/* Scrollbar styling for detail table */
.wc-modal-detail-table-container::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.wc-modal-detail-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wc-modal-detail-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wc-modal-detail-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wc-modal-detail-table-container .wc-modal-detail-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wc-modal-detail-table-container .wc-modal-detail-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wc-modal-detail-table-container .wc-modal-detail-table th {
  padding: 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

/* Sortable table header hover effect */
.wc-modal-detail-table th.detail-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.wc-modal-detail-table th.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.wc-modal-detail-table th.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

/* Ensure frozen columns also get hover effect when sortable */
.wc-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:hover,
.wc-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:hover {
  background-color: #EAEAEA !important;
}

.wc-modal-detail-table thead th.detail-table-frozen-item.detail-table-sortable:active,
.wc-modal-detail-table thead th.detail-table-frozen-product.detail-table-sortable:active {
  background-color: #E0E0E0 !important;
}

.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-detail-table th,
.wc-modal-tab-content--display .wc-modal-packaging-table th,
.wc-modal-tab-content--display .wc-modal-partner-table th,
.wc-modal-tab-content--display .wc-modal-attachment-table th {
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-detail-table td,
.wc-modal-tab-content--display .wc-modal-packaging-table td,
.wc-modal-tab-content--display .wc-modal-partner-table td,
.wc-modal-tab-content--display .wc-modal-attachment-table td {
  color: #333333;
}

/* Delivery Order Item Table Display Mode - Grey background for all columns including Delete */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-detail-table tbody td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Green hover effect (same as Item Type column #EDF5EC) */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Delivery Order Item Table Display Mode - Override specific column hover transitions */
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-description,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-text,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-batch,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-serial,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-warranty-claim,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-so-item,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-package-no,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-product-type,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-product-group,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-product-category,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wc-modal-tab-content--display .wc-modal-detail-table tbody tr:hover .wc-modal-partner-name-cell {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Orange hover effect */
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Delivery Order Item Table Display Mode - Override specific column hover transitions */
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-description,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-text,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-batch,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-serial,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-warranty-claim,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-so-item,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-package-no,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-type,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-group,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-category,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .wc-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

.wc-modal-detail-table-container .wc-modal-detail-table tbody {
  background-color: #FFFFFF;
}

.wc-modal-detail-table-container .wc-modal-detail-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.5rem;
  background-color: #FFFFFF;
}

.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover {
  background-color: #F4FAF3;
}

.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover td {
  background-color: #F4FAF3;
}

/* External PoV Table Row Hover - Orange Style */
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover {
  background-color: #FFFCF8;
}

.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover td {
  background-color: #FFFCF8;
}

/* External PoV Detail Table - match font color with Partner List table */
.wc-modal-detail-table-container--external .wc-modal-detail-table td {
  color: #555555 !important;
}

.wc-modal-detail-table-container .wc-modal-detail-table td {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.5rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen columns for detail table */
.wc-modal-detail-table .detail-table-frozen-item {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table thead .detail-table-frozen-item {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table tbody td.detail-table-frozen-item {
  background-color: #F9F9F9 !important;
  color: #555555;
}

.wc-modal-detail-table .detail-table-frozen-product {
  position: -webkit-sticky;
  position: sticky;
  left: 5rem;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.wc-modal-detail-table thead .detail-table-frozen-product {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table tbody td.detail-table-frozen-product {
  background-color: #F9F9F9 !important;
  color: #555555;
}

/* Description column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-description {
  background-color: #F9F9F9;
  color: #555555;
}

/* Text column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-text {
  background-color: #F9F9F9;
}

/* Remaining Qty column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-remaining-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Available Qty. column - non-editable style like Remaining Qty */
.wc-modal-detail-table tbody td.detail-table-available-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Secured Qty column - display mode style */
.wc-modal-detail-table tbody td.detail-table-secured-qty {
  background-color: #F9F9F9;
  color: #555555;
}

/* Batch column - display mode style */
.wc-modal-detail-table tbody td.detail-table-batch {
  background-color: #F9F9F9;
  color: #555555;
}

/* Serial Number column - display mode style */
.wc-modal-detail-table tbody td.detail-table-serial {
  background-color: #F9F9F9;
  color: #555555;
}

/* Warranty Claim No. column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-warranty-claim {
  background-color: #F9F9F9;
}

/* SO Item column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-so-item {
  background-color: #F9F9F9;
}

/* Purchase Requisition column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-purchase-requisition {
  background-color: #F9F9F9;
}

/* PR Item column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-pr-item {
  background-color: #F9F9F9;
}

/* Package No. column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-package-no {
  background-color: #F9F9F9;
}

/* Shipment No. column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-shipment-no {
  background-color: #F9F9F9;
}

/* Product Type column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-product-type {
  background-color: #F9F9F9;
}

/* Product Group column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-product-group {
  background-color: #F9F9F9;
}

/* Product Category column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-product-category {
  background-color: #F9F9F9;
}

/* Product Variant column - non-editable style */
.wc-modal-detail-table tbody td.detail-table-product-variant {
  background-color: #F9F9F9;
}

.wc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wc-modal-detail-table tbody tr:hover .detail-table-description,
.wc-modal-detail-table tbody tr:hover .detail-table-text,
.wc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wc-modal-detail-table tbody tr:hover .detail-table-batch,
.wc-modal-detail-table tbody tr:hover .detail-table-serial,
.wc-modal-detail-table tbody tr:hover .detail-table-warranty-claim,
.wc-modal-detail-table tbody tr:hover .detail-table-so-item,
.wc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wc-modal-detail-table tbody tr:hover .detail-table-package-no,
.wc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wc-modal-detail-table tbody tr:hover .detail-table-product-type,
.wc-modal-detail-table tbody tr:hover .detail-table-product-group,
.wc-modal-detail-table tbody tr:hover .detail-table-product-category,
.wc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wc-modal-detail-table tbody tr:hover .wc-modal-partner-name-cell {
  background-color: #EDF5EC !important;
}

/* External PoV Frozen Columns Hover - Orange Style */
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-frozen-item,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-frozen-product,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-description,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-text,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-remaining-qty,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-available-qty,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-secured-qty,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-batch,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-serial,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-warranty-claim,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-so-item,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-purchase-requisition,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-pr-item,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-package-no,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-shipment-no,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-type,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-group,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-category,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .detail-table-product-variant,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .wc-modal-partner-name-cell {
  background-color: #FFF8F0 !important;
}

.wc-modal-table-delete-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.wc-modal-detail-table td:last-child {
  padding: 0.25rem 1rem;
}

.wc-modal-table-delete-icon-btn:hover {
  background-color: #FFF1F1;
}

.wc-modal-table-delete-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
  transition: filter 0.2s;
}

.wc-modal-table-delete-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(348deg) brightness(85%) contrast(110%);
}

.wc-modal-table-delete-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wc-modal-table-delete-icon-btn--disabled:hover {
  background-color: transparent;
}

/* Display Mode - Keep red color for delete icon (same as Edit Mode) */
.wc-modal-table-delete-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.wc-modal-table-delete-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

/* Unassigned Package - Grey trash bin icon */
.wc-modal-table-delete-icon-btn--unassigned img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

.wc-modal-table-delete-icon-btn--unassigned:hover img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%) !important;
}

/* Packaging Table - Grey background for expand cell (display only) */
.wc-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for Item Qty cell (display only) */
.wc-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Table - Grey background for delete cell (display only) */
.wc-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Unassigned Package - Grey background for expand cell */
.wc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for Item Qty cell */
.wc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package - Grey background for delete cell */
.wc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Edit Icon Button */
.wc-modal-table-edit-icon-btn {
  background-color: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  height: 1.125rem;
  width: 1.125rem;
}

.wc-modal-table-edit-icon-btn:hover {
  background-color: #E8F5E9;
}

.wc-modal-table-edit-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.wc-modal-table-edit-icon-btn:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(1200%) hue-rotate(82deg) brightness(85%) contrast(95%);
}

.wc-modal-table-edit-icon-btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wc-modal-table-edit-icon-btn--disabled:hover {
  background-color: transparent;
}

.wc-modal-table-edit-icon-btn--disabled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-edit-icon-btn--disabled:hover img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-add-row-btn {
  background-color: #138B4C;
  color: white;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wc-modal-add-row-btn:hover {
  background-color: #0F6B3B;
}

/* Add Item Button - Action Button Style */
.wc-modal-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
  transition: all 200ms ease;
  height: 2rem;
}

.wc-modal-add-item-btn:hover:not(:disabled) {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wc-modal-add-item-btn--disabled {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
}

.wc-modal-add-item-btn--disabled:hover {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #999999;
}

.wc-modal-add-item-btn--disabled .wc-modal-add-item-btn-icon {
  filter: brightness(0) saturate(100%) invert(60%);
}

.wc-modal-add-item-btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Warranty Claim Table - Same style as Detail Delivery Table */
.wc-modal-warranty-claim-table-container {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E5E5;
  border-bottom: none;
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  overscroll-behavior-x: contain;
}

/* Scrollbar styling for warranty claim table */
.wc-modal-warranty-claim-table-container::-webkit-scrollbar {
  height: 2px;
}

.wc-modal-warranty-claim-table-container::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wc-modal-warranty-claim-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wc-modal-warranty-claim-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table thead {
  background-color: #F9F9F9;
  box-shadow: 0 1px 0 0 #E5E5E5;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  background-color: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table tbody {
  background-color: #FFFFFF;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 200ms ease;
  height: 2.25rem;
  background-color: #FFFFFF;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table tbody tr:last-child {
  border-bottom: none;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table tbody tr:hover {
  background-color: #F4FAF3;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table tbody tr:hover td {
  background-color: #F4FAF3;
}

.wc-modal-warranty-claim-table-container .wc-modal-warranty-claim-table td {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333333;
  vertical-align: middle;
  height: 2.25rem;
  background-color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* Frozen column for warranty claim table */
.wc-modal-warranty-claim-table .sales-table-frozen-order {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #F9F9F9 !important;
  box-shadow: 1px 0 0 0 #E5E5E5;
}

.wc-modal-warranty-claim-table thead .sales-table-frozen-order {
  z-index: 11;
  background-color: #F9F9F9 !important;
}

.wc-modal-warranty-claim-table tbody td.sales-table-frozen-order {
  background-color: #F9F9F9 !important;
}

.wc-modal-warranty-claim-table tbody tr:hover .sales-table-frozen-order {
  background-color: #EDF5EC !important;
}

/* Table Input Styles */
.wc-modal-table-input {
  width: 100%;
  padding: 0 0.625rem;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  background-color: transparent;
  color: #333333;
  transition: all 200ms ease;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.wc-modal-table-input:focus {
  outline: none;
}

.wc-modal-table-input::placeholder {
  color: #CCCCCC;
  font-size: 0.6875rem;
}

/* Qty Input Styles */
.wc-modal-qty-input {
  text-align: right;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: all 200ms ease;
  height: 100%;
}

.wc-modal-qty-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.wc-modal-qty-input::placeholder {
  color: #CCCCCC;
}

/* Tags Field Styles */
.wc-modal-tags-container {
  position: relative;
  width: 100%;
}

.wc-modal-tags-input {
  min-height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wc-modal-tags-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-tags-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-tags-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wc-modal-tags-input--display:hover {
  border-color: #E0E0E0;
}

.wc-modal-tags-placeholder {
  color: #999999;
  font-size: 0.8125rem;
}

.wc-modal-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.wc-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background-color: #E8F5E9;
  border: none;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  color: #2E7D32;
  font-weight: 500;
}

/* Display mode - make all tags gray */
.wc-modal-tags-input--display .wc-modal-tag {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
}

.wc-modal-tag-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: #666666;
  font-weight: normal;
}

.wc-modal-tag-remove:hover {
  color: #333333;
}

.wc-modal-tags-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-tags-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-tags-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Tags Dropdown */
.wc-modal-tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wc-modal-tags-search {
  padding: 0.5rem;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-tags-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  transition: all 200ms ease;
}

.wc-modal-tags-search-input:focus {
  outline: none;
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-tags-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-tags-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-tags-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-tags-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-tags-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-tags-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
}

.wc-modal-tags-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 200ms ease;
  border-top: 1px solid #E5E5E5;
  background-color: #F9F9F9;
}

.wc-modal-tags-create:hover {
  background-color: #E8F5E9;
}

.wc-modal-tags-create-text {
  font-size: 0.8125rem;
  color: #138B4C;
  font-weight: 500;
}


/* Status Dropdown Styles */
.wc-modal-status-container {
  position: relative;
  width: 100%;
}

.wc-modal-status-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wc-modal-status-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-status-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-status-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wc-modal-status-input--display:hover {
  border-color: #E0E0E0;
}

.wc-modal-status-placeholder {
  color: #999999;
}

.wc-modal-status-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Status Dropdown List */
.wc-modal-status-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wc-modal-status-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.wc-modal-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-status-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-status-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-status-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-status-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Status Badge Styles - Matching Table Status Colors */
.wc-modal-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.wc-modal-status-badge--active {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.wc-modal-status-badge--locked {
  background-color: #FFF3E0;
  color: #E65100;
}

.wc-modal-status-badge--completed {
  background-color: #E3F2FD;
  color: #1976D2;
}

.wc-modal-status-badge--cancelled {
  background-color: #E0E0E0;
  color: #616161;
}

.wc-modal-status-badge--deleted {
  background-color: #E0E0E0;
  color: #616161;
}

/* Display mode - make all status badges gray */
.wc-modal-status-input--display .wc-modal-status-badge {
  background-color: #F0F0F0 !important;
  color: #666666 !important;
}

/* Stage Dropdown Styles */
.wc-modal-stage-dropdown-container {
  position: relative;
  width: 100%;
}

.wc-modal-stage-dropdown-input {
  height: 2.2875rem;
  padding: 0.375rem 1.875rem 0.375rem 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wc-modal-stage-dropdown-input:hover {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-stage-dropdown-input--open {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-stage-dropdown-input--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  cursor: default;
}

.wc-modal-stage-dropdown-input--display:hover {
  border-color: #E0E0E0;
}

.wc-modal-stage-dropdown-placeholder {
  color: #999999;
}

.wc-modal-stage-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) contrast(100%);
}

/* Stage Dropdown List */
.wc-modal-stage-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 25rem;
  overflow: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.wc-modal-stage-dropdown-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.wc-modal-stage-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-stage-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-stage-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-stage-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-stage-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Stage Badge Icon in Dropdown */
.wc-modal-stage-dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: middle;
  display: inline-block;
}

/* Icon colors matching stage label colors */
.wc-modal-stage--created .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(11%) saturate(1245%) hue-rotate(11deg) brightness(91%) contrast(91%);
}

.wc-modal-stage--approved .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(1015%) hue-rotate(351deg) brightness(91%) contrast(90%);
}

.wc-modal-stage--processed .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(347%) hue-rotate(156deg) brightness(91%) contrast(88%);
}

.wc-modal-stage--picked .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(411%) hue-rotate(145deg) brightness(94%) contrast(88%);
}

.wc-modal-stage--packed .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(49%) saturate(499%) hue-rotate(149deg) brightness(92%) contrast(88%);
}

.wc-modal-stage--planned .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1501%) hue-rotate(207deg) brightness(91%) contrast(84%);
}

.wc-modal-stage--loaded .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(2351%) hue-rotate(211deg) brightness(93%) contrast(89%);
}

.wc-modal-stage--issued .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(702%) hue-rotate(201deg) brightness(91%) contrast(95%);
}

.wc-modal-stage--departed .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1844%) hue-rotate(287deg) brightness(91%) contrast(85%);
}

.wc-modal-stage--arrived .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(1846%) hue-rotate(314deg) brightness(94%) contrast(90%);
}

.wc-modal-stage--unloaded .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(631%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.wc-modal-stage--delivered .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(10%) saturate(1946%) hue-rotate(84deg) brightness(92%) contrast(84%);
}

.wc-modal-stage--confirmed .wc-modal-stage-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(13%) saturate(2106%) hue-rotate(58deg) brightness(91%) contrast(83%);
}

.wc-modal-stage--billed .wc-modal-stage-dropdown-icon {
  filter: brightness(0) invert(100%);
}

/* Update existing stage badge styles to work with dropdown */
.wc-modal-stage-dropdown-input .wc-modal-stage,
.wc-modal-stage-dropdown-item .wc-modal-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Baseline Date Dropdown Styles */
.wc-modal-baseline-date-dropdown {
  position: relative;
}

.wc-modal-baseline-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-baseline-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-baseline-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-baseline-date-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-baseline-date-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-baseline-date-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-baseline-date-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wc-modal-baseline-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-baseline-date-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-baseline-date-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-baseline-date-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-baseline-date-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Reference Type Dropdown Styles */
.wc-modal-reference-type-dropdown {
  position: relative;
}

.wc-modal-reference-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-reference-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-reference-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-reference-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-reference-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-reference-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-reference-type-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wc-modal-reference-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-reference-type-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-reference-type-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-reference-type-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-reference-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Delivery Priority Dropdown Styles */
.wc-modal-delivery-priority-dropdown {
  position: relative;
}

.wc-modal-delivery-priority-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-delivery-priority-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-delivery-priority-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-delivery-priority-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-delivery-priority-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-delivery-priority-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-delivery-priority-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wc-modal-delivery-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-delivery-priority-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-delivery-priority-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-delivery-priority-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-delivery-priority-item--placeholder {
  color: #999;
  font-style: italic;
  cursor: pointer;
}

.wc-modal-delivery-priority-item--placeholder:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}

.wc-modal-delivery-priority-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-delivery-priority-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 1.25rem;
}

.wc-modal-delivery-priority-separator {
  color: #666666;
}

.wc-modal-delivery-priority-name {
  color: #333333;
}

.wc-modal-delivery-priority-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* Organization Dropdown Styles */
.wc-modal-organization-dropdown {
  position: relative;
}

.wc-modal-organization-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-organization-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-organization-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-organization-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-organization-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-organization-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-organization-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-organization-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.wc-modal-organization-dropdown-content--display .wc-modal-organization-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-organization-dropdown-content--display .wc-modal-organization-item:hover {
  background-color: transparent !important;
}

.wc-modal-organization-dropdown-content--display .wc-modal-organization-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-organization-dropdown-content--display .wc-modal-organization-code,
.wc-modal-organization-dropdown-content--display .wc-modal-organization-name,
.wc-modal-organization-dropdown-content--display .wc-modal-organization-separator {
  color: #999999 !important;
}

.wc-modal-organization-dropdown-content--display .wc-modal-organization-check {
  color: #999999 !important;
}

.wc-modal-organization-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-organization-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-organization-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-organization-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-organization-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-organization-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-organization-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-organization-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-organization-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-organization-separator {
  color: #999999;
}

.wc-modal-organization-name {
  color: #333333;
}

.wc-modal-organization-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-organization-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Structure Dropdown Styles */
.wc-modal-sales-structure-dropdown {
  position: relative;
}

.wc-modal-sales-structure-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sales-structure-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-sales-structure-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}


.wc-modal-sales-structure-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-structure-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-structure-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-structure-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.wc-modal-sales-structure-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-sales-structure-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-sales-structure-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-sales-structure-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-sales-structure-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-sales-structure-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-sales-structure-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-sales-structure-separator {
  color: #999999;
}

.wc-modal-sales-structure-name {
  color: #333333;
}

.wc-modal-sales-structure-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-sales-structure-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Delivery Order Type Dropdown Styles */
.wc-modal-delivery-type-dropdown {
  position: relative;
}

.wc-modal-delivery-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-delivery-type-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  color: #333333;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-delivery-type-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-delivery-type-input::placeholder {
  color: #CCCCCC !important;
  font-style: normal;
  font-weight: 400;
  opacity: 1 !important;
  -webkit-text-fill-color: #CCCCCC !important;
}

.wc-modal-delivery-type-input::-webkit-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wc-modal-delivery-type-input::-moz-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wc-modal-delivery-type-input:-ms-input-placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.wc-modal-delivery-type-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-delivery-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-delivery-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-delivery-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}


.wc-modal-delivery-type-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-delivery-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-delivery-type-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-delivery-type-item--placeholder {
  cursor: pointer;
}

.wc-modal-delivery-type-item--placeholder:hover {
  background-color: #F5F5F5;
}

.wc-modal-delivery-type-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-delivery-type-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-delivery-type-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-delivery-type-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-delivery-type-separator {
  color: #999999;
}

.wc-modal-delivery-type-description {
  color: #333333;
}

.wc-modal-delivery-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-delivery-type-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Modal Override for Tags - Ensure consistent height */
.modal-overlay .modal-container .modal-header {
  height: 4.5625rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.modal-overlay .modal-container .modal-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Keep modal title black in display mode */
.modal-title--display {
  color: #333333;
}

/* Modal Button Disabled State */
.modal-btn-confirm:disabled {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  color: #999999;
  cursor: not-allowed;
  transform: none;
}

.modal-btn-confirm:disabled:hover {
  background-color: #E5E5E5;
  border-color: #E5E5E5;
  transform: none;
}

/* Scrollbar Styling - Thin style matching dropdown lists */
.wc-modal-content::-webkit-scrollbar,
.wc-modal-stage-content::-webkit-scrollbar,


.wc-modal-content::-webkit-scrollbar-track,
.wc-modal-stage-content::-webkit-scrollbar-track,


.wc-modal-content::-webkit-scrollbar-thumb,
.wc-modal-stage-content::-webkit-scrollbar-thumb,


.wc-modal-content::-webkit-scrollbar-thumb:hover,
.wc-modal-stage-content::-webkit-scrollbar-thumb:hover,


/* Sales Channel Dropdown Styles */
.wc-modal-sales-channel-dropdown {
  position: relative;
}

.wc-modal-sales-channel-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sales-channel-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-sales-channel-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-sales-channel-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-channel-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-channel-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-channel-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wc-modal-sales-channel-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-sales-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-sales-channel-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-sales-channel-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-sales-channel-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-sales-channel-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-sales-channel-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-sales-channel-separator {
  color: #999999;
}

.wc-modal-sales-channel-name {
  color: #333333;
}

.wc-modal-sales-channel-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-sales-channel-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Unit Dropdown Styles */
.wc-modal-sales-unit-dropdown {
  position: relative;
}

.wc-modal-sales-unit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sales-unit-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-sales-unit-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-sales-unit-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-unit-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-unit-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-unit-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wc-modal-sales-unit-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-sales-unit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-sales-unit-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-sales-unit-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-sales-unit-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-sales-unit-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-sales-unit-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-sales-unit-separator {
  color: #999999;
}

.wc-modal-sales-unit-name {
  color: #333333;
}

.wc-modal-sales-unit-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-sales-unit-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Placeholder styles for all dropdowns */
.wc-modal-organization-item--placeholder,
.wc-modal-sales-structure-item--placeholder,
.wc-modal-sales-channel-item--placeholder,
.wc-modal-sales-unit-item--placeholder,
.wc-modal-territory-item--placeholder,
.wc-modal-sales-office-item--placeholder,
.wc-modal-sold-to-party-item--placeholder,
.wc-modal-deliver-to-party-item--placeholder,
.wc-modal-attention-to-deliver-item--placeholder,
.wc-modal-incoterm-item--placeholder,
.wc-modal-delivery-point-item--placeholder,
.wc-modal-shipping-point-item--placeholder,
.wc-modal-warranty-claim-item--placeholder,
.wc-modal-sales-team-item--placeholder,
.wc-modal-sales-person-item--placeholder {
  cursor: pointer;
}

.wc-modal-organization-item--placeholder:hover,
.wc-modal-sales-structure-item--placeholder:hover,
.wc-modal-sales-channel-item--placeholder:hover,
.wc-modal-sales-unit-item--placeholder:hover,
.wc-modal-territory-item--placeholder:hover,
.wc-modal-sales-office-item--placeholder:hover,
.wc-modal-sold-to-party-item--placeholder:hover,
.wc-modal-deliver-to-party-item--placeholder:hover,
.wc-modal-attention-to-deliver-item--placeholder:hover,
.wc-modal-incoterm-item--placeholder:hover,
.wc-modal-delivery-point-item--placeholder:hover,
.wc-modal-shipping-point-item--placeholder:hover,
.wc-modal-warranty-claim-item--placeholder:hover,
.wc-modal-sales-team-item--placeholder:hover,
.wc-modal-sales-person-item--placeholder:hover {
  background-color: #F5F5F5;
}

/* Buyer Dropdown Styles */
.wc-modal-sold-to-party-dropdown {
  position: relative;
}

.wc-modal-sold-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sold-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-sold-to-party-input:focus,
.wc-modal-sold-to-party-input--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
  outline: none;
}

.wc-modal-sold-to-party-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-sold-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sold-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sold-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sold-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-sold-to-party-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-sold-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-sold-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-sold-to-party-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-sold-to-party-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-sold-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-sold-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-sold-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.wc-modal-sold-to-party-separator {
  color: #999999;
}

.wc-modal-sold-to-party-name {
  color: #333333;
}

.wc-modal-sold-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-sold-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Deliver to Party Dropdown Styles */
.wc-modal-deliver-to-party-dropdown {
  position: relative;
}

.wc-modal-deliver-to-party-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-deliver-to-party-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-deliver-to-party-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-deliver-to-party-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-deliver-to-party-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-deliver-to-party-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-deliver-to-party-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wc-modal-deliver-to-party-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-deliver-to-party-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-deliver-to-party-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-deliver-to-party-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-deliver-to-party-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-deliver-to-party-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-deliver-to-party-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}

.wc-modal-deliver-to-party-separator {
  color: #999999;
}

.wc-modal-deliver-to-party-name {
  color: #333333;
}

.wc-modal-deliver-to-party-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-deliver-to-party-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Attention To Deliver Dropdown Styles */
.wc-modal-attention-to-deliver-dropdown {
  position: relative;
}
.wc-modal-attention-to-deliver-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-attention-to-deliver-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-attention-to-deliver-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-attention-to-deliver-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-attention-to-deliver-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-attention-to-deliver-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-attention-to-deliver-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-attention-to-deliver-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-attention-to-deliver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-attention-to-deliver-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-attention-to-deliver-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-attention-to-deliver-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-attention-to-deliver-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-attention-to-deliver-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.25rem;
}
.wc-modal-attention-to-deliver-separator {
  color: #999999;
}
.wc-modal-attention-to-deliver-name {
  color: #333333;
}
.wc-modal-attention-to-deliver-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-attention-to-deliver-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Incoterm Dropdown Styles */
.wc-modal-incoterm-dropdown {
  position: relative;
}
.wc-modal-incoterm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-incoterm-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-incoterm-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-incoterm-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-incoterm-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-incoterm-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-incoterm-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-incoterm-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-incoterm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-incoterm-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-incoterm-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-incoterm-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-incoterm-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-incoterm-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 3.125rem;
}
.wc-modal-incoterm-separator {
  color: #999999;
}
.wc-modal-incoterm-name {
  color: #333333;
}
.wc-modal-incoterm-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-incoterm-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Delivery Point Dropdown Styles */
.wc-modal-delivery-point-dropdown {
  position: relative;
}
.wc-modal-delivery-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-delivery-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-delivery-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-delivery-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-delivery-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-delivery-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-delivery-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-delivery-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-delivery-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-delivery-point-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-delivery-point-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-delivery-point-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-delivery-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-delivery-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wc-modal-delivery-point-separator {
  color: #999999;
}
.wc-modal-delivery-point-name {
  color: #333333;
}
.wc-modal-delivery-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-delivery-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Shipping Point Dropdown Styles */
.wc-modal-shipping-point-dropdown {
  position: relative;
}
.wc-modal-shipping-point-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-shipping-point-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-shipping-point-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-shipping-point-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-shipping-point-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-shipping-point-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-shipping-point-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-shipping-point-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-shipping-point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-shipping-point-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-shipping-point-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-shipping-point-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-shipping-point-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-shipping-point-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wc-modal-shipping-point-separator {
  color: #999999;
}
.wc-modal-shipping-point-name {
  color: #333333;
}
.wc-modal-shipping-point-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-shipping-point-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Warranty Claim Dropdown Styles */
.wc-modal-warranty-claim-dropdown {
  position: relative;
}
.wc-modal-warranty-claim-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-warranty-claim-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-warranty-claim-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-warranty-claim-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-warranty-claim-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-warranty-claim-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-warranty-claim-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-warranty-claim-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-warranty-claim-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-warranty-claim-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-warranty-claim-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-warranty-claim-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-warranty-claim-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-warranty-claim-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 6.875rem;
}
.wc-modal-warranty-claim-separator {
  color: #999999;
}
.wc-modal-warranty-claim-name {
  color: #333333;
}
.wc-modal-warranty-claim-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-warranty-claim-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}
/* Date Picker Styles */
.wc-modal-date-picker {
  position: relative;
}
.wc-modal-date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-date-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 2.1875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-date-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-date-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.wc-modal-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  cursor: pointer;
}
.wc-modal-calendar-icon {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}
/* Style the date input to match other inputs */
.wc-modal-date-input::-webkit-datetime-edit-text,
.wc-modal-date-input::-webkit-datetime-edit-month-field,
.wc-modal-date-input::-webkit-datetime-edit-day-field,
.wc-modal-date-input::-webkit-datetime-edit-year-field {
  color: #333333;
}
.wc-modal-date-input::-webkit-datetime-edit-text {
  color: #999999;
}
.wc-modal-date-input::-webkit-inner-spin-button {
  display: none;
}

/* Sales Person Dropdown Styles */
.wc-modal-sales-person-dropdown {
  position: relative;
}
.wc-modal-sales-person-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-sales-person-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-sales-person-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-sales-person-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}
.wc-modal-sales-person-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-person-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-person-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-sales-person-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-sales-person-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-sales-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-sales-person-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-sales-person-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-sales-person-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-sales-person-item--placeholder {
  pointer-events: none;
  cursor: default;
}
.wc-modal-sales-person-item--placeholder:hover {
  background-color: transparent;
}
.wc-modal-sales-person-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-sales-person-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}
.wc-modal-sales-person-separator {
  color: #999999;
}
.wc-modal-sales-person-name {
  color: #333333;
}
.wc-modal-sales-person-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-sales-person-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Team Dropdown Styles */
.wc-modal-sales-team-dropdown {
  position: relative;
}
.wc-modal-sales-team-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.wc-modal-sales-team-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}
.wc-modal-sales-team-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}
.wc-modal-sales-team-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-team-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-team-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}
.wc-modal-sales-team-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.25rem rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 18.75rem;
  display: flex;
  flex-direction: column;
}
.wc-modal-sales-team-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wc-modal-sales-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wc-modal-sales-team-item:hover {
  background-color: #F5F5F5;
}
.wc-modal-sales-team-item--selected {
  background-color: #E8F5E9;
}
.wc-modal-sales-team-item--selected:hover {
  background-color: #D5EDD8;
}
.wc-modal-sales-team-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-modal-sales-team-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}
.wc-modal-sales-team-separator {
  color: #999999;
}
.wc-modal-sales-team-name {
  color: #333333;
}
.wc-modal-sales-team-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}
.wc-modal-sales-team-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Territory Dropdown Styles */
.wc-modal-territory-dropdown {
  position: relative;
}

.wc-modal-territory-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-territory-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-territory-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-territory-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-territory-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-territory-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-territory-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wc-modal-territory-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-territory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-territory-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-territory-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-territory-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-territory-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-territory-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-territory-separator {
  color: #999999;
}

.wc-modal-territory-name {
  color: #333333;
}

.wc-modal-territory-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-territory-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Sales Office Dropdown Styles */
.wc-modal-sales-office-dropdown {
  position: relative;
}

.wc-modal-sales-office-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-sales-office-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-sales-office-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-sales-office-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-office-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-sales-office-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-sales-office-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 18.75rem;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.wc-modal-sales-office-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-sales-office-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-sales-office-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-sales-office-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-sales-office-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-sales-office-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-sales-office-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.8125rem;
}

.wc-modal-sales-office-separator {
  color: #999999;
}

.wc-modal-sales-office-name {
  color: #333333;
}

.wc-modal-sales-office-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-sales-office-no-results {
  padding: 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 0.8125rem;
}

/* Table Dropdown Styles for Multiple Warranty Claim Section */
.wc-modal-table-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wc-modal-table-dropdown-select {
  width: 100%;
  height: 1.75rem;
  padding: 0 1.5rem 0 0.5rem;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.6875rem;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #333333;
}

.wc-modal-table-dropdown-select:focus {
  border-color: #138B4C;
  outline: none;
}

.wc-modal-table-dropdown-select:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.wc-modal-table-dropdown-icon {
  position: absolute;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wc-modal-table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wc-modal-table-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-table-dropdown-input:focus {
  outline: none;
}

.wc-modal-table-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-table-dropdown-input:disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
  opacity: 0.6;
}

.wc-modal-table-dropdown-arrow {
  position: absolute;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-table-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-display-value {
  width: 100%;
  height: 2rem;
  padding: 0 1.5625rem 0 0.625rem;
  font-size: 0.75rem;
  color: #333333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.wc-modal-table-calendar-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  z-index: 4;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-calendar-icon--display {
  cursor: default;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 15.625rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.1);
  z-index: 1001;
  max-height: 15.625rem;
  display: flex;
  flex-direction: column;
}

.wc-modal-table-dropdown-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* Global Scrollbar Styles - Most Specific Selectors First */
/* Target the specific list element that actually scrolls */
.wc-modal-delivery-type-list::-webkit-scrollbar,
.wc-modal-stage-dropdown-list::-webkit-scrollbar,
.wc-modal-stage-dropdown-items::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wc-modal-delivery-type-list::-webkit-scrollbar-track,
.wc-modal-stage-dropdown-list::-webkit-scrollbar-track,
.wc-modal-stage-dropdown-items::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-delivery-type-list::-webkit-scrollbar-thumb,
.wc-modal-stage-dropdown-list::-webkit-scrollbar-thumb,
.wc-modal-stage-dropdown-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wc-modal-delivery-type-list::-webkit-scrollbar-thumb:hover,
.wc-modal-stage-dropdown-list::-webkit-scrollbar-thumb:hover,
.wc-modal-stage-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Apply same to all other dropdown lists */
div[class*="-list"]::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

div[class*="-list"]::-webkit-scrollbar-track {
  background: transparent !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

div[class*="-list"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Prevent browser back gesture on all scrollable elements */
.wc-modal-wrapper,
.wc-modal-wrapper * {
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal swipe navigation on the entire modal and all scrollable children */
.warranty-claim-modal,
.wc-modal-wrapper,
.wc-modal-wrapper *,
.wc-modal-content,
.wc-modal-data-flow-2-container,
.wc-modal-data-flow-container,
.wc-modal-calendar-container,
.wc-modal-calendar-milestones-list,
.wc-modal-calendar-view,
.wc-modal-calendar-yearly,
.wc-modal-calendar-monthly,
.wc-modal-calendar-weekly,
.wc-modal-calendar-weekly-body,
.wc-modal-calendar-daily,
.wc-modal-calendar-daily-timeline,
.wc-modal-calendar-grid,
.wc-modal-calendar-grid-body,
.wc-modal-detail-table-container,
.wc-modal-item-table-wrapper,
.wc-modal-attachment-table-container,
.wc-modal-notes-table-container {
  touch-action: pan-y pinch-zoom;
}

/* Global Scrollbar Styles for entire modal */
.wc-modal-wrapper *::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wc-modal-wrapper *::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-wrapper *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wc-modal-wrapper *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Removed duplicate scrollbar styles - see above for the main styles */

/* Packaging Table Styles */
/* Packaging Table - add bottom padding since Add Package button is removed */
.wc-modal-item-table-wrapper--packaging {
  padding-bottom: 0.5rem;
}

.wc-modal-detail-table-container--packaging {
  padding-bottom: 0.5rem;
}

.wc-modal-packaging-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 81.625rem;
  min-width: 81.625rem;
}

.wc-modal-packaging-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: #F9F9F9;
}

.wc-modal-packaging-table th {
  padding: 0.625rem 0.625rem !important;
  background-color: #F9F9F9;
}

.wc-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-tab-content--display .wc-modal-packaging-header-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Header Icon - Orange Color */
.wc-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-tab-content--display .wc-modal-packaging-header-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.wc-modal-packaging-row {
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.wc-modal-packaging-row:hover {
  background-color: #FAFAFA;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover {
  background-color: #F4FAF3 !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td {
  background-color: #F4FAF3 !important;
}

/* External PoV Packaging Table Row Hover - Orange Style */
.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover {
  background-color: #FFFCF8 !important;
}

.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td {
  background-color: #FFFCF8 !important;
}

.wc-modal-packaging-row--expanded {
  background-color: #fff;
  border-bottom: none !important;
  font-weight: 600;
}

/* Unassigned row - Bold style when collapsed */
.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) {
  font-weight: 600;
}

.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) td {
  font-weight: 600;
}

.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) .wc-modal-packaging-input,
.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) .wc-modal-packaging-input--display,
.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) .wc-modal-handling-product-input,
.wc-modal-packaging-row--unassigned:not(.wc-modal-packaging-row--expanded) .wc-modal-handling-product-input--display {
  font-weight: 600;
}

.wc-modal-packaging-row--expanded td {
  border-bottom: none !important;
  background-color: #fff !important;
  font-weight: 600;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded {
  background-color: #fff !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td {
  background-color: #fff !important;
}

.wc-modal-packaging-row--expanded:hover {
  background-color: #fff;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover {
  background-color: #fff !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td {
  background-color: #fff !important;
}

/* Unassigned Package Row - Grey background for Column 1 (Plus icon), Column 5 (Item Qty), Column 6 (Delete) */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row td.wc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row td.wc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row td.wc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Unassigned Package Row (Expanded) - Keep grey background */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-expand-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-cell--unassigned {
  background-color: #F9F9F9 !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-delete-cell--unassigned {
  background-color: #F9F9F9 !important;
}

/* Packaging Row (Hover) - Green background for display cells (all packages) */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for display cells */
.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td.wc-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Expanded) - Grey background for display cells (not hover) */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-expand-cell--display {
  background-color: #FCFCFC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-cell--display {
  background-color: #FCFCFC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded td.wc-modal-packaging-delete-cell--display {
  background-color: #FCFCFC !important;
}

/* Packaging Row (Expanded + Hover) - Green background for display cells */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-expand-cell--display {
  background-color: #EDF5EC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-cell--display {
  background-color: #EDF5EC !important;
}

.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-delete-cell--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Expanded + Hover) - Orange background for display cells */
.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-expand-cell--display {
  background-color: #FFF8F0 !important;
}

.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-cell--display {
  background-color: #FFF8F0 !important;
}

.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row--expanded:hover td.wc-modal-packaging-delete-cell--display {
  background-color: #FFF8F0 !important;
}

/* Packaging Row (Hover) - Green background for input fields (all packages) */
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display,
.wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display {
  background-color: #EDF5EC !important;
}

/* External PoV - Packaging Row (Hover) - Orange background for input fields */
.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display,
.wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display {
  background-color: #FFF8F0 !important;
}

.wc-modal-packaging-expand-cell {
  width: 2rem;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
}

.wc-modal-packaging-expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  opacity: 1;
  display: block;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-tab-content--display .wc-modal-packaging-expand-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  opacity: 1;
}

/* External PoV Packaging Expand Icon - Orange Color */
.wc-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-tab-content--display .wc-modal-packaging-expand-icon--external {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
  opacity: 1;
}

.wc-modal-packaging-expand-icon--expanded {
  /* No rotation needed - using different icon */
}

.wc-modal-packaging-detail-row {
  background-color: #FAFAFA;
  border-bottom: 1px solid #E5E5E5 !important;
  position: relative;
  z-index: 1;
}

.wc-modal-packaging-detail-container {
  padding: 0;
  position: relative;
  z-index: 1;
}

.wc-modal-packaging-detail-table {
  width: 81.625rem;
  min-width: 81.625rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.wc-modal-packaging-detail-table thead {
  background-color: #F0F0F0;
}

.wc-modal-packaging-detail-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #666666;
  border-bottom: 1px solid #E5E5E5;
  font-size: 0.6875rem;
}

.wc-modal-packaging-detail-table td {
  padding: 0.5rem 0.625rem !important;
  border-bottom: 1px solid #F5F5F5;
  color: #333333;
  text-align: left;
}

.wc-modal-packaging-detail-table th:first-child,
.wc-modal-packaging-detail-table td:first-child {
  padding-left: 0.625rem !important;
}

.wc-modal-packaging-detail-table th:nth-child(2),
.wc-modal-packaging-detail-table td:nth-child(2) {
  padding-left: 0.625rem !important;
}

.wc-modal-packaging-detail-table th:nth-child(3),
.wc-modal-packaging-detail-table td:nth-child(3) {
  padding-left: 0.625rem !important;
}

.wc-modal-packaging-detail-table td:nth-child(4),
.wc-modal-packaging-detail-table td:nth-child(6),
.wc-modal-packaging-detail-table td:nth-child(8) {
  padding-right: 0.625rem !important;
}

.wc-modal-packaging-detail-table td:nth-child(5),
.wc-modal-packaging-detail-table td:nth-child(7),
.wc-modal-packaging-detail-table td:nth-child(9) {
  padding-left: 0.625rem !important;
}

.wc-modal-packaging-detail-table tbody tr:last-child td {
  border-bottom: none;
}

/* Display mode styling for packaging table */
.wc-modal-tab-content--display .wc-modal-packaging-row--expanded {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display .wc-modal-packaging-row--expanded:hover {
  background-color: #EFEFEF;
}

.wc-modal-tab-content--display .wc-modal-packaging-detail-container {
  background-color: #F8F8F8;
}

.wc-modal-tab-content--display .wc-modal-packaging-detail-table thead {
  background-color: #EBEBEB;
}

/* Packaging Table Cell Styles - No padding for compact rows */
.wc-modal-packaging-table td {
  padding: 0 !important;
  height: 2.5rem;
}

.wc-modal-packaging-table td:last-child,
.wc-modal-packaging-table th:last-child {
  width: 3.75rem !important;
  min-width: 3.75rem !important;
  max-width: 3.75rem !important;
  text-align: center;
}

.wc-modal-packaging-table td:last-child .wc-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}

/* External PoV Packaging Table - Item Qty column takes 160px (100px + 60px from Delete) */
.wc-modal-detail-table-container--external .wc-modal-packaging-table th:last-child,
.wc-modal-detail-table-container--external .wc-modal-packaging-table td.wc-modal-packaging-item-qty--external {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
  text-align: right !important;
  padding-right: 1.25rem !important;
}

/* Packaging Child Table Wrapper for horizontal scroll */
.wc-modal-packaging-child-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.25rem;
  border: 1px solid #E5E5E5;
}

/* Thin scrollbar for child table wrapper */
.wc-modal-packaging-child-table-wrapper::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wc-modal-packaging-child-table-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wc-modal-packaging-child-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Packaging Child Table Styles */
.wc-modal-packaging-child-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  table-layout: fixed;
  background-color: #fff;
}

.wc-modal-packaging-child-table thead {
  background-color: #F9F9F9 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.wc-modal-packaging-child-table thead:hover {
  background-color: #fff !important;
}

.wc-modal-packaging-child-table tbody tr {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table tbody tr:hover {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table th {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table td {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table th:hover {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table td:hover {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table tbody tr:hover td {
  background-color: #F9F9F9 !important;
}

.wc-modal-packaging-child-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 500;
  color: #333;
  border: none !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.wc-modal-packaging-child-table td {
  padding-top: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.625rem !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  vertical-align: top !important;
}

.wc-modal-packaging-child-table tbody tr {
  height: 3.5rem !important;
  vertical-align: top !important;
}

.wc-modal-packaging-child-table tbody tr:last-child td {
  border-bottom: none !important;
}

.wc-modal-packaging-child-table tr {
  border: none !important;
}

.wc-modal-packaging-child-table thead,
.wc-modal-packaging-child-table tbody {
  border: none !important;
}

/* Item column - reduced width */
.wc-modal-packaging-child-table th:first-child,
.wc-modal-packaging-child-table td:first-child {
  padding-left: 0.625rem !important;
  width: 3.125rem;
}

/* Product column - increased width */
.wc-modal-packaging-child-table th:nth-child(2),
.wc-modal-packaging-child-table td:nth-child(2) {
  padding-left: 0.625rem !important;
  width: 17.5rem;
}

.wc-modal-packaging-child-table td {
  font-size: 0.8125rem;
}

.wc-modal-packaging-child-product-id {
  font-size: 0.8125rem;
}

.wc-modal-packaging-child-product-desc {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0;
}

.wc-modal-packaging-child-value {
  font-size: 0.8125rem;
  text-align: right;
}

.wc-modal-packaging-child-uom {
  font-size: 0.6875rem;
  color: #666;
  text-align: right;
  margin-top: 0;
}

/* Qty, Volume, Weight columns width - reduced */
.wc-modal-packaging-child-table th:nth-child(3),
.wc-modal-packaging-child-table td:nth-child(3),
.wc-modal-packaging-child-table th:nth-child(4),
.wc-modal-packaging-child-table td:nth-child(4),
.wc-modal-packaging-child-table th:nth-child(5),
.wc-modal-packaging-child-table td:nth-child(5) {
  width: 5rem;
  min-width: 5rem;
}

/* Batch column - increased width */
.wc-modal-packaging-child-table th:nth-child(6),
.wc-modal-packaging-child-table td:nth-child(6) {
  width: 11.25rem;
}

/* Serial Number column - increased width */
.wc-modal-packaging-child-table th:nth-child(7),
.wc-modal-packaging-child-table td:nth-child(7) {
  width: 12.1875rem;
}

/* External PoV - Serial Number column left align (last column in External) */
.wc-modal-detail-table-container--external .wc-modal-packaging-child-table th:last-child,
.wc-modal-detail-table-container--external .wc-modal-packaging-child-table td:last-child {
  text-align: left !important;
}


.wc-modal-packaging-child-table td:last-child .wc-modal-table-delete-icon-btn {
  display: block;
  margin: 0 auto;
}


/* Packaging Table Input Styles */
.wc-modal-packaging-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  color: #333333;
}

.wc-modal-packaging-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wc-modal-packaging-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

/* Display mode input styles */
.wc-modal-packaging-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  transition: none !important;
}

.wc-modal-packaging-input--display:focus {
  background-color: #FCFCFC !important;
  border-bottom: none;
  transition: none !important;
}

/* Packaging Table Display Mode - Grey background for all columns */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row {
  transition: none !important;
}

.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row td {
  background-color: #FCFCFC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Green hover effect (same as Item table #EDF5EC) */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Packaging input green on row hover */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display,
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display:focus,
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Packaging Table Display Mode - Handling product input green on row hover */
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display,
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display:focus,
.wc-modal-tab-content--display .wc-modal-detail-table-container .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Orange hover effect */
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Packaging input orange on row hover */
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display:focus,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-packaging-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV - Packaging Table Display Mode - Handling product input orange on row hover */
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display:focus,
.wc-modal-tab-content--display .wc-modal-detail-table-container--external .wc-modal-packaging-table tbody tr.wc-modal-packaging-row:hover td .wc-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* External PoV Packaging Input - match font color */
.wc-modal-detail-table-container--external .wc-modal-packaging-input--display {
  color: #555555;
}

/* Handling Product Dropdown Styles */
.wc-modal-handling-product-dropdown {
  position: relative;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wc-modal-handling-product-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.wc-modal-handling-product-input {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  margin: 0;
}

.wc-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

.wc-modal-handling-product-input::placeholder {
  color: #CCCCCC;
}

/* Display mode handling product input */
.wc-modal-handling-product-input--display {
  cursor: default;
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  transition: none !important;
}

.wc-modal-handling-product-input--display:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

.wc-modal-handling-product-input--display:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  transition: none !important;
}

/* View-only mode - clickable dropdown but cannot change value */
.wc-modal-handling-product-input--view-only {
  cursor: pointer;
  background-color: transparent !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
}

.wc-modal-handling-product-input--view-only:focus {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
}

.wc-modal-handling-product-input--view-only:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* View-only dropdown arrow - grey style (same as display mode) */
.wc-modal-handling-product-arrow--view-only {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%) !important;
}

/* External PoV Handling Product Input - match font color */
.wc-modal-detail-table-container--external .wc-modal-handling-product-input--display {
  background-color: #FCFCFC !important;
  color: #555555;
}

.wc-modal-handling-product-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-handling-product-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-handling-product-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-handling-product-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode dropdown content styling */
.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-item:hover {
  background-color: transparent !important;
}

.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-item--display {
  color: #999999 !important;
}

.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-code,
.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-name,
.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-separator {
  color: #999999 !important;
}

.wc-modal-handling-product-dropdown-content--display .wc-modal-handling-product-check {
  color: #999999 !important;
}

.wc-modal-handling-product-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  min-width: 25rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 12.5rem;
  display: flex;
  flex-direction: column;
}

.wc-modal-handling-product-dropdown-content--narrow {
  min-width: 15.625rem !important;
  max-width: 15.625rem !important;
  overflow-x: hidden !important;
}

.wc-modal-handling-product-dropdown-content--narrow .wc-modal-handling-product-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-handling-product-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Item Type/UoM dropdown in table - no overflow change to preserve scroll position */
.wc-modal-item-content-section--dropdown-open {
  z-index: 100;
}

/* Child table product dropdown - wider */
.wc-modal-packaging-detail-table .wc-modal-handling-product-dropdown-content {
  min-width: 25rem;
  right: auto;
}

/* Allow dropdown to overflow table container when open */
.wc-modal-detail-table-container--dropdown-open {
  overflow: visible !important;
}

.wc-modal-detail-table-container--dropdown-open .wc-modal-detail-table {
  overflow: visible;
}

.wc-modal-detail-table-container--dropdown-open .wc-modal-detail-table tbody {
  overflow: visible;
}

/* Child table number input for Qty, Volume, Weight */
.wc-modal-child-table-number-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  font-size: 0.75rem;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-modal-child-table-number-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wc-modal-child-table-number-input::placeholder {
  color: #999999;
}

/* Child table UoM dropdown styles */
.wc-modal-child-uom-dropdown {
  position: relative;
  width: 100%;
}

.wc-modal-child-uom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem 0.5rem 0;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.75rem;
}

.wc-modal-child-uom-select:hover {
  background-color: #FAFAFA;
}

.wc-modal-child-uom-arrow {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.wc-modal-child-uom-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 5rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 12.5rem;
  overflow-y: auto;
}

/* Thin scrollbar for UoM dropdowns */
.wc-modal-child-uom-dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.wc-modal-child-uom-dropdown-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

.wc-modal-child-uom-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

.wc-modal-child-uom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}

.wc-modal-child-uom-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-child-uom-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-child-uom-item--selected:hover {
  background-color: #DFF0B8;
}

.wc-modal-child-uom-check {
  color: #C2DE54;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Display mode styles for UoM dropdowns */
.wc-modal-child-uom-select--display {
  cursor: default;
  pointer-events: none;
}

.wc-modal-child-uom-select--display:hover {
  background-color: transparent;
}

.wc-modal-child-uom-arrow--display {
  opacity: 0.4;
}

.wc-modal-handling-product-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.wc-modal-handling-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.75rem;
}

.wc-modal-handling-product-item:hover {
  background-color: #F5F5F5;
}

/* View-only dropdown content - items are not clickable, grey/display style */
.wc-modal-handling-product-dropdown-content--view-only {
  background-color: #F8F8F8;
  border: 1px solid #E0E0E0;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-item {
  cursor: default;
  color: #555555;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-item:hover {
  background-color: transparent;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-item--placeholder {
  display: none;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-item--selected {
  background-color: #EEEEEE;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-code,
.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-name,
.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-separator {
  color: #555555;
}

.wc-modal-handling-product-dropdown-content--view-only .wc-modal-handling-product-check {
  color: #888888;
}

.wc-modal-handling-product-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-handling-product-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-handling-product-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-handling-product-code {
  font-weight: 600;
  color: #138B4C;
}

.wc-modal-handling-product-separator {
  color: #999999;
}

.wc-modal-handling-product-name {
  color: #333333;
}

.wc-modal-handling-product-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
}

.wc-modal-handling-product-item--placeholder {
  cursor: default;
}

.wc-modal-handling-product-item--placeholder:hover {
  background-color: transparent;
}

.wc-modal-handling-product-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Item Type dropdown in Delivery Order Item table - match Package Description style */
.wc-modal-detail-table td:has(.wc-modal-handling-product-dropdown) {
  padding: 0;
  position: relative;
}

.wc-modal-detail-table td .wc-modal-handling-product-dropdown {
  width: 100%;
  height: 100%;
  position: static;
}

.wc-modal-detail-table td .wc-modal-handling-product-input-wrapper {
  width: 100%;
  height: 100%;
}

.wc-modal-detail-table td .wc-modal-handling-product-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.625rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  background: transparent;
  box-sizing: border-box;
}

.wc-modal-detail-table td .wc-modal-handling-product-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
  outline: none;
}

/* Display mode - no focus styles in table */
.wc-modal-detail-table td .wc-modal-handling-product-input--display,
.wc-modal-detail-table td .wc-modal-handling-product-input--display:focus,
.wc-modal-detail-table td .wc-modal-handling-product-input--display:hover {
  background-color: #FCFCFC !important;
  color: #555555;
  border-bottom: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  outline: none;
  transition: none !important;
}

/* Display mode - input background changes to green on row hover (Internal PoV) */
.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display,
.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display:focus,
.wc-modal-detail-table-container .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display:hover {
  background-color: #EDF5EC !important;
  transition: none !important;
}

/* Display mode - input background changes to orange on row hover (External PoV) */
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display:focus,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover td .wc-modal-handling-product-input--display:hover {
  background-color: #FFF8F0 !important;
  transition: none !important;
}

/* Dropdown content in table - use fixed positioning to escape overflow */
.wc-modal-detail-table td .wc-modal-handling-product-dropdown-content {
  position: fixed;
  z-index: 99999;
  top: auto;
  bottom: auto;
}

.wc-modal-detail-table td .wc-modal-handling-product-dropdown-content--flipped {
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Item Text Modal Styles */
.wc-modal-item-text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.wc-modal-table-text-icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.wc-modal-table-text-icon-btn:hover {
  background-color: rgba(119, 170, 68, 0.1);
}

.wc-modal-table-text-icon-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-table-text-icon-btn--filled:not(.wc-modal-table-text-icon-btn--display) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%) !important;
}

/* Display mode styles for text icon button */
.wc-modal-table-text-icon-btn--display {
  cursor: pointer;
}

.wc-modal-table-text-icon-btn--display:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wc-modal-table-text-icon-btn--display img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-table-text-icon-btn--display:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

/* Display mode with filled text - same green as regular display icon */
.wc-modal-table-text-icon-btn--display.wc-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* External PoV Text Icon Button - Orange Color */
.wc-modal-table-text-icon-btn--display.wc-modal-table-text-icon-btn--external img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-table-text-icon-btn--display.wc-modal-table-text-icon-btn--external.wc-modal-table-text-icon-btn--filled img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Batch Assignment Button Styles */
.wc-modal-batch-assignment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  width: 10.625rem;
  border: 1px dotted #E5E5E5;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  color: #666666;
}

.wc-modal-batch-assignment-btn:hover {
  background-color: #F0F8E8;
  border-color: #77AA44;
}

.wc-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.wc-modal-batch-assignment-btn--filled:hover {
  background-color: #E5F2D8;
}

/* Serial Assignment Button - same width as column */
.wc-modal-serial-assignment-btn {
  width: 10.625rem;
}

.wc-modal-batch-assignment-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(90%);
}

.wc-modal-batch-assignment-btn--filled .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-batch-assignment-text {
  white-space: nowrap;
}

/* Display mode styles for batch assignment button */
.wc-modal-batch-assignment-btn--display {
  cursor: pointer;
  background-color: #FCFCFC;
  border-color: #E0E0E0;
  color: #555555;
}

.wc-modal-batch-assignment-btn--display:hover {
  background-color: #FCFCFC;
  border-color: #D0D0D0;
}

.wc-modal-batch-assignment-btn--display .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-batch-assignment-btn--display.wc-modal-batch-assignment-btn--filled {
  background-color: #F0F8E8;
  border: none;
  color: #4A7A2A;
}

.wc-modal-batch-assignment-btn--display.wc-modal-batch-assignment-btn--filled .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

/* Secured Qty Button - same width as column */
.wc-modal-secured-qty-btn {
  width: 10rem;
}

/* Remove border for filled (green) state */
.wc-modal-secured-qty-btn.wc-modal-batch-assignment-btn--filled {
  border: none;
}

/* Grey state for Non Stock (N1) and Service (SV) items */
.wc-modal-secured-qty-btn--grey {
  background-color: #F5F5F5;
  border: 1px dotted #D0D0D0;
  color: #999999;
}

.wc-modal-secured-qty-btn--grey:hover {
  background-color: #EBEBEB;
  border-color: #BBBBBB;
}

.wc-modal-secured-qty-btn--grey .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Partial (Orange) state - when secured qty < deliver qty */
.wc-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.wc-modal-batch-assignment-btn--partial:hover {
  background-color: #FFECCC;
}

.wc-modal-batch-assignment-btn--partial .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Display mode for partial state - use orange style */
.wc-modal-batch-assignment-btn--display.wc-modal-batch-assignment-btn--partial {
  background-color: #FFF4E5;
  border: none;
  color: #E65100;
}

.wc-modal-batch-assignment-btn--display.wc-modal-batch-assignment-btn--partial .wc-modal-batch-assignment-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(95%);
}

/* Secured Qty Modal Styles */
.modal-container.wc-modal-secured-qty-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Green background for header info section in Secured Qty modal */
.wc-modal-secured-qty-modal .wc-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}

.wc-modal-secured-qty-modal .wc-modal-item-text-row:last-child {
  margin-bottom: 0;
}

/* Keep green background in display mode (same as edit mode) */
.wc-modal-secured-qty-modal.wc-modal-batch-assignment-modal--display .wc-modal-item-text-info {
  background-color: #F2F8EA;
}

/* Prevent horizontal scrollbar in Reserved Qty modal content */
.wc-modal-secured-qty-modal .wc-modal-item-text-content {
  overflow-x: hidden;
}

.wc-modal-secured-qty-modal .modal-content {
  overflow-x: hidden;
}

.wc-modal-secured-qty-divider {
  border-bottom: 1px solid #E0E0E0;
  margin: 1rem 0;
}

.wc-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.wc-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

/* Keep colorful status in display mode (same as edit mode) */
.wc-modal-batch-assignment-modal--display .wc-modal-secured-qty-status-input--full {
  color: #2E7D32 !important;
}

.wc-modal-batch-assignment-modal--display .wc-modal-secured-qty-status-input--partial {
  color: #E65100 !important;
}

.wc-modal-secured-qty-lock-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #333333;
  white-space: nowrap;
}

.wc-modal-secured-qty-lock-btn:hover {
  background-color: #F5F5F5;
}

.wc-modal-secured-qty-lock-btn-icon {
  position: absolute;
  left: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  /* Default: Blue for Open */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%);
}

/* Green icon for Lock */
.wc-modal-secured-qty-lock-btn--open .wc-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
}

/* Red icon for Unlock */
.wc-modal-secured-qty-lock-btn--locked .wc-modal-secured-qty-lock-btn-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}

/* Secured Qty Error Message */
.wc-modal-secured-qty-error {
  color: #D32F2F;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Batch Assignment Modal Styles */
.modal-container.wc-modal-batch-assignment-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.wc-modal-batch-assignment-modal .wc-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-x: hidden;
}

.wc-modal-batch-assignment-modal .modal-content {
  overflow-x: hidden;
}

/* Green background for header info section in Batch/Serial Assignment modal */
.wc-modal-batch-assignment-modal .wc-modal-item-text-info {
  background-color: #F2F8EA;
  margin: -1.25rem -1.5rem 0 -1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Hide divider in Batch/Serial Assignment modal to avoid double line */
.wc-modal-batch-assignment-modal .wc-modal-secured-qty-divider {
  display: none;
}

/* Keep green background in display mode (same as edit mode) */
.wc-modal-batch-assignment-modal.wc-modal-batch-assignment-modal--display .wc-modal-item-text-info {
  background-color: #F2F8EA;
}

.wc-modal-batch-assignment-info-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wc-modal-batch-assignment-info-row {
  display: flex;
  gap: 1.5rem;
}

.wc-modal-batch-assignment-info-group {
  flex: 1 1;
}

.wc-modal-batch-assignment-info-group .wc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wc-modal-batch-assignment-info-value {
  font-size: 0.8125rem;
  color: #333333;
  padding: 0.5rem 0;
  display: block;
}

.wc-modal-batch-assignment-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wc-modal-batch-assignment-table-section .wc-modal-item-text-label {
  display: block;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wc-modal-batch-assignment-table-container {
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  height: 21.875rem;
  min-height: 21.875rem;
  max-height: 21.875rem;
}

.wc-modal-batch-assignment-table-container::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.wc-modal-batch-assignment-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-batch-assignment-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wc-modal-batch-assignment-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.wc-modal-batch-assignment-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

.wc-modal-batch-assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.wc-modal-batch-assignment-table th,
.wc-modal-batch-assignment-table td {
  box-sizing: border-box;
}

/* Sortable header styling */
.wc-modal-batch-assignment-table th.batch-table-sortable {
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.wc-modal-batch-assignment-table th.batch-table-sortable:hover {
  background-color: #EBEBEB !important;
}

.wc-modal-batch-assignment-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.wc-modal-batch-assignment-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.wc-modal-batch-assignment-table tbody td:has(.wc-modal-batch-assignment-table-input) {
  padding: 0;
  position: relative;
}

.wc-modal-batch-assignment-table tbody td:has(.wc-modal-batch-assignment-table-input:focus) {
  border-bottom: 1px solid #C2DE54;
  border-bottom: 1px solid var(--color-primary);
}

/* Non-editable columns in batch assignment table - dark grey text */
.wc-modal-batch-assignment-table tbody td:nth-child(2),
.wc-modal-batch-assignment-table tbody td:nth-child(3),
.wc-modal-batch-assignment-table tbody td:nth-child(4),
.wc-modal-batch-assignment-table tbody td:nth-child(5) {
  color: #555555;
}

.wc-modal-batch-assignment-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #138B4C;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.1875rem;
  position: relative;
  transition: all 200ms ease;
}

.wc-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.wc-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-batch-assignment-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1px;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wc-modal-batch-assignment-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

/* Display mode checkbox - keep green style (same as edit mode) */
.wc-modal-batch-assignment-modal--display .wc-modal-batch-assignment-checkbox {
  accent-color: #138B4C;
  cursor: default;
}

.wc-modal-batch-assignment-modal--display .wc-modal-batch-assignment-checkbox:hover {
  border-color: #138B4C;
}

.wc-modal-batch-assignment-modal--display .wc-modal-batch-assignment-checkbox:checked {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-batch-assignment-modal--display .wc-modal-batch-assignment-checkbox:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #138B4C33;
}

.wc-modal-batch-assignment-table-input {
  width: 100%;
  height: 2.0625rem;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
  display: block;
}

.wc-modal-batch-assignment-table-input:focus {
  background-color: #FFFFFF;
  border-bottom: 1px solid #C2DE54 !important;
  border-bottom: 1px solid var(--color-primary) !important;
}

.wc-modal-batch-assignment-table-input::placeholder {
  color: #CCCCCC;
}

/* Placeholder text style for empty fields */
.wc-modal-batch-assignment-table .wc-modal-placeholder-text {
  color: #CCCCCC;
}

.wc-modal-batch-assignment-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.wc-modal-batch-assignment-delete-btn:hover {
  background-color: #FFF1F1;
}

.wc-modal-batch-assignment-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(3096%) hue-rotate(348deg) brightness(94%) contrast(107%);
}

.wc-modal-batch-assignment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #77AA44;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8125rem;
  color: #77AA44;
  margin-top: 0.75rem;
}

.wc-modal-batch-assignment-add-btn:hover {
  background-color: #F0F8E8;
  border-style: solid;
}

.wc-modal-batch-assignment-add-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Frozen columns styles for batch assignment table - match regular column style */
table.wc-modal-batch-assignment-table th.batch-table-frozen-checkbox,
table.wc-modal-batch-assignment-table th.batch-table-frozen-valuation,
table.wc-modal-batch-assignment-table th.batch-table-frozen-batch,
table.wc-modal-batch-assignment-table th.batch-table-frozen-assign {
  /* Header - same style as regular columns */
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: none !important;
}

table.wc-modal-batch-assignment-table td.batch-table-frozen-checkbox,
table.wc-modal-batch-assignment-table td.batch-table-frozen-valuation,
table.wc-modal-batch-assignment-table td.batch-table-frozen-batch,
table.wc-modal-batch-assignment-table td.batch-table-frozen-assign {
  /* Body - same style as regular columns */
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: none !important;
}

/* Only add separator border between frozen and scrollable areas */
table.wc-modal-batch-assignment-table th.batch-table-frozen-batch,
table.wc-modal-batch-assignment-table td.batch-table-frozen-batch {
  border-right: 1px solid #E0E0E0 !important;
}

table.wc-modal-batch-assignment-table th.batch-table-frozen-assign,
table.wc-modal-batch-assignment-table td.batch-table-frozen-assign {
  border-left: 1px solid #E0E0E0 !important;
}


.modal-container.wc-modal-item-text-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.wc-modal-item-text-content {
  padding: 1.25rem 1.5rem;
  flex: 1 1;
  min-height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
}

.wc-modal-item-text-info {
  margin-bottom: 1rem;
}

.wc-modal-item-text-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.wc-modal-item-text-row:last-child {
  margin-bottom: 0;
}

.wc-modal-item-text-label {
  width: 8.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.wc-modal-item-text-value {
  font-size: 0.8125rem;
  color: #666666;
}

.wc-modal-item-text-textarea-wrapper {
  margin-top: 1rem;
}

.wc-modal-item-text-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.wc-modal-item-text-textarea:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-item-text-textarea::placeholder {
  color: #999999;
}

/* Item Text Modal Header - ensure no margin on title */
.wc-modal-item-text-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-item-text-modal .modal-header .modal-title,
.wc-modal-item-text-modal .modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
}

/* Item Text Modal Display Mode Styles */
.wc-modal-item-text-modal--display .modal-title {
  color: #333333;
}

.wc-modal-item-text-label--display {
  color: #333333;
}

.wc-modal-item-text-textarea--display {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
  color: #666666;
  cursor: default;
}

.wc-modal-item-text-textarea--display:focus {
  border-color: #E0E0E0;
  outline: none;
}

/* Item Text / Terms Edit Modal - bold labels */
.wc-modal-item-text-modal .wc-modal-item-text-label {
  font-weight: 600;
  font-size: 0.75rem;
}

.wc-modal-item-text-modal .wc-modal-item-text-textarea-wrapper .wc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
}

/* Item Text / Terms Edit Modal - thin scrollbar */
.wc-modal-item-text-textarea {
  overflow-y: auto !important;
}

.wc-modal-item-text-textarea::-webkit-scrollbar {
  width: 2px !important;
}

.wc-modal-item-text-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-item-text-textarea::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wc-modal-item-text-textarea::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* Add Delivery Order Item Modal */
.wc-modal-add-do-item-modal {
  min-width: 37.5rem;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
}

.wc-modal-add-do-item-modal .wc-modal-item-text-content {
  display: flex;
  flex-direction: column;
  min-height: 31.25rem;
}

.wc-modal-add-do-item-dropdown-section {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wc-modal-add-do-item-dropdown-section .wc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.wc-modal-add-do-item-table-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wc-modal-add-do-item-table-section .wc-modal-item-text-label {
  display: block;
  width: auto;
  padding-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.wc-modal-add-do-item-table-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  min-height: 0;
}

.wc-modal-add-do-item-table-container::-webkit-scrollbar {
  width: 2px !important;
}

.wc-modal-add-do-item-table-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-add-do-item-table-container::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 2px !important;
}

.wc-modal-add-do-item-table-container::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

.wc-modal-add-do-item-table {
  width: 100%;
  border-collapse: collapse;
}

.wc-modal-add-do-item-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #F5F5F5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.wc-modal-add-do-item-table tbody td {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.25rem;
}

.wc-modal-add-do-item-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  background-color: #F8FFF0;
  color: #333333;
  box-sizing: border-box;
}

.wc-modal-add-do-item-input:focus {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 0 #77AA44;
}

.wc-modal-add-do-item-input::placeholder {
  color: #CCCCCC;
}

.modal-btn-close {
  padding: 0.5rem 1.5rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-btn-close:hover {
  background-color: #EBEBEB;
  border-color: #D0D0D0;
}

/* Partner Type Dropdown Styles */
.wc-modal-partner-type-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

/* First column Partner Type dropdown - reduce left margin to keep table border visible */
.wc-modal-detail-table td:first-child .wc-modal-partner-type-dropdown {
  margin-left: -0.625rem;
  width: calc(100% + 1.375rem);
}

.wc-modal-detail-table td:first-child .wc-modal-partner-type-input {
  padding-left: 0.625rem;
}

.wc-modal-partner-type-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.wc-modal-partner-type-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.wc-modal-partner-type-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wc-modal-partner-type-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-partner-type-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-partner-type-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-partner-type-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-partner-type-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.wc-modal-partner-type-dropdown--display .wc-modal-partner-type-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.wc-modal-partner-type-dropdown-content--display .wc-modal-partner-type-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-partner-type-dropdown-content--display .wc-modal-partner-type-item:hover {
  background-color: transparent !important;
}

.wc-modal-partner-type-dropdown-content--display .wc-modal-partner-type-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-partner-type-dropdown-content--display .wc-modal-partner-type-check {
  color: #999999 !important;
}

.wc-modal-partner-type-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.wc-modal-partner-type-dropdown--display .wc-modal-partner-type-value {
  color: #555555;
}

.wc-modal-partner-type-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 12.5rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-partner-type-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-partner-type-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.wc-modal-partner-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333333;
}

.wc-modal-partner-type-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-partner-type-item--selected {
  background-color: #F2F8EA;
}

.wc-modal-partner-type-item--placeholder {
  cursor: default;
}

.wc-modal-partner-type-item--placeholder:hover {
  background-color: transparent;
}

.wc-modal-partner-type-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wc-modal-partner-type-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Partner ID Dropdown Styles */
.wc-modal-partner-id-dropdown {
  position: relative;
  margin: -0.625rem -0.75rem;
  padding: 0;
  width: calc(100% + 1.5rem);
  height: 2.5rem;
}

.wc-modal-partner-id-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
}

.wc-modal-partner-id-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.875rem 0 0.75rem;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
  font-size: 0.8125rem;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.wc-modal-partner-id-input:focus {
  background-color: #FFFFFF;
  border-bottom-color: #C2DE54;
  border-bottom-color: var(--color-primary);
}

.wc-modal-partner-id-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-partner-id-arrow {
  position: absolute;
  right: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-partner-id-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-partner-id-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-partner-id-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

.wc-modal-partner-id-dropdown--display .wc-modal-partner-id-input-wrapper {
  cursor: pointer;
  padding: 0 1.875rem 0 0.75rem;
  background-color: #FCFCFC;
  border-bottom: 1px solid #F5F5F5;
}

/* Display mode dropdown content styling */
.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-item:hover {
  background-color: transparent !important;
}

.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-item--selected-display {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-code,
.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-name,
.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-separator {
  color: #999999 !important;
}

.wc-modal-partner-id-dropdown-content--display .wc-modal-partner-id-check {
  color: #999999 !important;
}

.wc-modal-partner-id-value {
  font-size: 0.8125rem;
  color: #333333;
  line-height: 2.5rem;
  height: 2.5rem;
}

.wc-modal-partner-id-dropdown--display .wc-modal-partner-id-value {
  color: #555555;
}

/* Display mode - Partner Type/ID wrapper background changes to green on row hover (Internal PoV) */
.wc-modal-detail-table tbody tr:hover .wc-modal-partner-type-dropdown--display .wc-modal-partner-type-input-wrapper,
.wc-modal-detail-table tbody tr:hover .wc-modal-partner-id-dropdown--display .wc-modal-partner-id-input-wrapper {
  background-color: #EDF5EC !important;
}

/* Display mode - Partner Type/ID wrapper background changes to orange on row hover (External PoV) */
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .wc-modal-partner-type-dropdown--display .wc-modal-partner-type-input-wrapper,
.wc-modal-detail-table-container--external .wc-modal-detail-table tbody tr:hover .wc-modal-partner-id-dropdown--display .wc-modal-partner-id-input-wrapper {
  background-color: #FFF8F0 !important;
}

/* External PoV Partner List - hide icons but keep same structure */
.wc-modal-partner-type-arrow--external {
  visibility: hidden;
}

.wc-modal-partner-id-arrow--external {
  visibility: hidden;
}

/* External PoV Partner List - match font color with form input display style */
.wc-modal-partner-type-dropdown--external .wc-modal-partner-type-value {
  color: #555555;
}

.wc-modal-partner-id-dropdown--external .wc-modal-partner-id-value {
  color: #555555;
}

.wc-modal-detail-table-container--external .wc-modal-detail-table td.wc-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

/* External PoV Partner Header Section - match font color with Partner List table */
.wc-modal-partner-header-section--external .wc-modal-form-input--display {
  color: #555555;
}

.wc-modal-detail-table td.wc-modal-partner-name-cell {
  background-color: #F9F9F9;
  color: #555555;
}

.wc-modal-tab-content--display .wc-modal-detail-table td.wc-modal-partner-name-cell {
  background-color: #FCFCFC;
  color: #555555;
}

.wc-modal-partner-id-dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 21.875rem;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 15.625rem;
  overflow: hidden;
  z-index: 1000;
}

/* Flipped dropdown - appears above the input when not enough space below */
.wc-modal-partner-id-dropdown-content--flipped {
  top: auto;
  bottom: calc(100% + 2px);
  box-shadow: 0 -2px 0.5rem rgba(0,0,0,0.08);
}

.wc-modal-partner-id-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 15rem;
}

.wc-modal-partner-id-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.8125rem;
}

.wc-modal-partner-id-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-partner-id-item--selected {
  background-color: #F2F8EA;
}

.wc-modal-partner-id-item--placeholder {
  cursor: default;
}

.wc-modal-partner-id-item--placeholder:hover {
  background-color: transparent;
}

.wc-modal-partner-id-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-partner-id-code {
  color: #138B4C;
  font-weight: 600;
}

.wc-modal-partner-id-separator {
  color: #999999;
}

.wc-modal-partner-id-name {
  color: #666666;
}

.wc-modal-partner-id-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wc-modal-partner-id-no-results {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.75rem;
  font-style: italic;
}

/* Data Flow Tab Styles */
.wc-modal-tab-content--data-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.wc-modal-tab-content--data-flow::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wc-modal-tab-content--data-flow::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-tab-content--data-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wc-modal-tab-content--data-flow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wc-modal-tab-content--data-flow h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.wc-modal-data-flow-container {
  min-width: 87.4375rem;
  width: 87.4375rem;
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-data-flow-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wc-modal-data-flow-container::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-data-flow-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wc-modal-data-flow-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Data Flow Header Styles */
.wc-modal-data-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 2.5rem 1.25rem 2.5rem;
  margin-bottom: 0;
  min-width: 87.4375rem;
  width: 87.4375rem;
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/* Background connecting line that spans across all circles */
.wc-modal-data-flow-header::before {
  content: '';
  position: absolute;
  top: 2.5625rem; /* 20px padding + 21px to center of 40px circle */
  left: 3.75rem; /* 40px padding + 20px to center of first circle */
  right: 3.75rem; /* 40px padding + 20px to center of last circle */
  height: 2px;
  background-color: #D0D0D0;
  z-index: 0;
}

.wc-modal-data-flow-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: #E5E5E5;
}

.wc-modal-data-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.wc-modal-data-flow-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 2px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.wc-modal-data-flow-stage--completed .wc-modal-data-flow-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wc-modal-data-flow-stage--active .wc-modal-data-flow-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-data-flow-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wc-modal-data-flow-stage--completed .wc-modal-data-flow-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-data-flow-stage--active .wc-modal-data-flow-stage-icon {
  filter: brightness(0) invert(1);
}

.wc-modal-data-flow-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
}

.wc-modal-data-flow-stage--completed .wc-modal-data-flow-stage-label {
  color: #138B4C;
}

.wc-modal-data-flow-stage--active .wc-modal-data-flow-stage-label {
  color: #138B4C;
  font-weight: 600;
}

.wc-modal-data-flow-stage-connector {
  flex: 1 1;
  height: 2px;
  background-color: transparent;
  margin-top: 1.3125rem;
  min-width: 0.625rem;
  position: relative;
  z-index: 1;
  margin-left: -1px;
  margin-right: -1px;
}

.wc-modal-data-flow-stage-connector--completed {
  background-color: transparent;
}

.wc-modal-data-flow-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  padding: 1.875rem 2.5rem;
}

.wc-modal-data-flow-document {
  position: relative;
  width: 10.3125rem;
  height: 11.25rem;
  background-color: #FFFFFF;
  border: 2px solid #D0D0D0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}

.wc-modal-data-flow-document::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 1.375rem;
  width: 2px;
  height: 2.125rem;
  background-color: #D0D0D0;
  transform: rotate(-45deg);
  transform-origin: top center;
  z-index: 1;
}

.wc-modal-data-flow-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wc-modal-data-flow-document--active::before {
  background-color: #138B4C;
}

.wc-modal-data-flow-document-fold {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.wc-modal-data-flow-document--active .wc-modal-data-flow-document-fold {
  background-color: #E8F5E9;
}

.wc-modal-data-flow-document-fold {
  display: none;
}

.wc-modal-data-flow-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem;
  padding-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 100%;
}

.wc-modal-data-flow-document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
}

.wc-modal-data-flow-document-icon-wrapper--active {
  background-color: #E8F5E9;
  border-color: #C8E6C9;
}

.wc-modal-data-flow-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.wc-modal-data-flow-document-icon-wrapper--active .wc-modal-data-flow-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-data-flow-document-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #888888;
  margin-bottom: -0.25rem;
}

.wc-modal-data-flow-document--active .wc-modal-data-flow-document-title {
  color: #138B4C;
}

.wc-modal-data-flow-document-number {
  font-size: 0.75rem;
  color: #666666;
  word-break: break-all;
}

.wc-modal-data-flow-connector {
  display: flex;
  align-items: center;
  width: 3.75rem;
}

.wc-modal-data-flow-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

.wc-modal-data-flow-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #138B4C;
}

/* Branching Layout Styles */
.wc-modal-data-flow-source {
  display: flex;
  align-items: center;
}

.wc-modal-data-flow-branch-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  align-self: stretch;
}

.wc-modal-data-flow-branch-line-horizontal {
  width: 100%;
  height: 2px;
  background-color: #138B4C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.wc-modal-data-flow-branch-line-vertical {
  width: 2px;
  height: 100%;
  background-color: #138B4C;
  position: absolute;
  right: 0;
  top: 0;
}

.wc-modal-data-flow-targets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wc-modal-data-flow-target-row {
  display: flex;
  align-items: center;
}

.wc-modal-data-flow-target-connector {
  display: flex;
  align-items: center;
  width: 2.5rem;
}

.wc-modal-data-flow-target-line {
  flex: 1 1;
  height: 2px;
  background-color: #138B4C;
}

/* Data Flow 2 Tab Styles */
.wc-modal-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

.wc-modal-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}

/* Terms Tab Styles - Uses same structure as Item Tab */

/* Terms Area Filter Dropdown */
.wc-modal-terms-area-filter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-top: 1.25rem;
  margin-bottom: 2px;
}

.wc-modal-terms-area-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 200ms ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  height: 2rem;
  width: 10.3125rem;
}

.wc-modal-terms-area-button span {
  flex: 1 1;
  text-align: left;
}

.wc-modal-terms-area-button:hover {
  background-color: #F5F5F5;
  color: #333333;
}

.wc-modal-terms-area-button--active {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
}

.wc-modal-terms-area-button .wc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-terms-area-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 10.3125rem;
  margin-top: 2px;
  overflow: hidden;
}

/* Flipped dropdown - appears above the button when not enough space below */
.wc-modal-terms-area-dropdown-menu--flipped {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  box-shadow: 0 -2px 0.5rem rgba(0, 0, 0, 0.1);
}

/* Display mode - grey style */
.wc-modal-tab-content--display .wc-modal-terms-area-button {
  background-color: #FAFAFA;
  border-color: #E5E5E5;
  color: #555555;
  cursor: default;
}

.wc-modal-tab-content--display .wc-modal-terms-area-button .wc-modal-pov-caret {
  filter: brightness(0) saturate(100%) invert(50%);
}

.wc-modal-tab-content--data-flow-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.wc-modal-tab-content--data-flow-2 h3 {
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.wc-modal-data-flow-2-container {
  flex: 1 1;
  min-height: 0;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.wc-modal-data-flow-2-container::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wc-modal-data-flow-2-container::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-data-flow-2-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wc-modal-data-flow-2-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wc-modal-data-flow-2-grid {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  height: 100%;
}

.wc-modal-data-flow-2-row {
  display: flex;
}

.wc-modal-data-flow-2-row--header {
  height: 6.25rem;
  min-height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wc-modal-data-flow-2-row--content {
  flex: 1 1;
  position: relative;
}

.wc-modal-data-flow-2-cell {
  width: 15.625rem;
  min-width: 15.625rem;
  border-right: none;
  box-sizing: border-box;
}

.wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell {
  border-bottom: 1px solid #D0D0D0;
  height: 100%;
  position: relative;
}

/* Connector line between stages */
.wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  width: calc(15.625rem - 2.5rem);
  height: 1px;
  background-color: #D0D0D0;
  z-index: 0;
  margin-top: -0.625rem;
}

.wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:last-child::after {
  display: none;
}

/* Green connector for completed stages */
.wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* Green connector for active stage */
.wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--active)::after {
  background-color: #D0D0D0;
}

.wc-modal-data-flow-2-row--content .wc-modal-data-flow-2-cell {
  height: 100%;
  border-right: none;
}

.wc-modal-data-flow-2-cell:last-child {
  border-right: none;
}

/* Data Flow 2 Stage Styles */
.wc-modal-data-flow-2-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}

.wc-modal-data-flow-2-stage-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-data-flow-2-stage-icon {
  width: 1.125rem;
  height: 1.125rem;
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.wc-modal-data-flow-2-stage-label {
  font-size: 0.6875rem;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}

.wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-label {
  color: #333333;
}

.wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Data Flow 2 Display Mode Styles - keep colorful */
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage-circle {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-circle {
  background-color: #E8F5E9;
  border-color: #138B4C;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-circle {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage-label {
  color: #999999;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--completed .wc-modal-data-flow-2-stage-label {
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--active .wc-modal-data-flow-2-stage-label {
  color: #333333;
  font-weight: 600;
}

/* Display mode - connector lines colorful */
.wc-modal-tab-content--display .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell::after {
  background-color: #D0D0D0;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--completed)::after {
  background-color: #138B4C;
}

/* SVG Connector Lines */
.wc-modal-data-flow-2-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Data Flow 2 Document Styles */
.wc-modal-data-flow-2-row--content .wc-modal-data-flow-2-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.625rem;
  position: relative;
  z-index: 1;
}

/* Cell with multiple documents */
.wc-modal-data-flow-2-row--content .wc-modal-data-flow-2-cell--multiple {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.wc-modal-data-flow-2-document {
  position: relative;
  width: 7.5rem;
  height: 10rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wc-modal-data-flow-2-document:hover {
  background-color: #F5F5F5;
}

.wc-modal-data-flow-2-document--completed {
  border-color: #138B4C;
}

.wc-modal-data-flow-2-document--completed:hover {
  background-color: #F5F5F5;
}

.wc-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wc-modal-data-flow-2-document--active:hover {
  background-color: #E0F2E9;
}

.wc-modal-data-flow-2-document-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.wc-modal-data-flow-2-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-data-flow-2-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.wc-modal-data-flow-2-document-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #888888;
}

.wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-title,
.wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-title {
  color: #333333;
}

.wc-modal-data-flow-2-document-number {
  font-size: 0.625rem;
  color: #138B4C;
  word-break: break-all;
  cursor: pointer;
  font-weight: 600;
}

.wc-modal-data-flow-2-document-footer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.wc-modal-data-flow-2-document-date {
  font-size: 0.625rem;
  color: #333333;
}

.wc-modal-data-flow-2-document-created-by {
  font-size: 0.625rem;
  color: #555555;
}

/* Data Flow 2 Document Display Mode Styles - keep colorful */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document {
  border-color: #D0D0D0;
  background-color: #FFFFFF;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #F5F5F5;
  border-color: #E0E0E0;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-title {
  color: #888888;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-title,
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-title {
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-number {
  color: #138B4C;
  cursor: pointer;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-footer {
  background-color: #F5F5F5;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--completed .wc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--active .wc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-date {
  color: #333333;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document-created-by {
  color: #555555;
}

/* ========== External PoV Data Flow - Sidebar Layout ========== */
.wc-modal-data-flow-2-container--external-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Row Label Cell - first cell in each row */
.wc-modal-data-flow-2-cell--label {
  width: 3.125rem;
  min-width: 3.125rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-right: 1px solid #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
}

.wc-modal-data-flow-2-row-label {
  transform: rotate(-90deg);
  font-size: 0.75rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.wc-modal-data-flow-2-cell--label-buyer {
  border-bottom: none;
}

.wc-modal-data-flow-2-cell--label-supplier {
  border-bottom: none;
}

.wc-modal-data-flow-2-main {
  flex: 1 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrollbar styling for External PoV Data Flow */
.wc-modal-data-flow-2-main::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.wc-modal-data-flow-2-main::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-data-flow-2-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
}

.wc-modal-data-flow-2-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.wc-modal-data-flow-2-main::-webkit-scrollbar-corner {
  background: transparent;
}

.wc-modal-data-flow-2-grid--external {
  display: flex;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: max-content;
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.wc-modal-data-flow-2-grid--external .wc-modal-data-flow-2-row--header {
  height: 6.25rem;
  flex-shrink: 0;
  background-color: #F9F9F9;
  border-bottom: 1px solid #D0D0D0;
}

.wc-modal-data-flow-2-grid--external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell {
  border-bottom: none;
}

.wc-modal-data-flow-2-grid--external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell--label {
  background-color: #F9F9F9;
  border-bottom: none;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Remove connector line from label cell */
.wc-modal-data-flow-2-grid--external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell--label::after {
  display: none;
}

.wc-modal-data-flow-2-row--content-top {
  flex: 1 1;
  border-bottom: 1px solid #D0D0D0;
  position: relative;
  overflow: visible;
}

.wc-modal-data-flow-2-row--content-bottom {
  flex: 1 1;
  position: relative;
  overflow: visible;
}

/* Vertical dotted connector lines from Buyer document to Supplier document */
/* Line extending from bottom of Buyer document to top of Supplier document */
/* HIDDEN FOR NOW - Uncomment to enable vertical dotted lines
.wc-modal-data-flow-2-row--content-top .wc-modal-data-flow-2-document--buyer.wc-modal-data-flow-2-document--has-supplier::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 106px;
  border-left: 1px dashed #999999;
  pointer-events: none;
  z-index: 5;
}
*/

/* External PoV Document Card Styles */
.wc-modal-data-flow-2-cell--document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 0.5rem;
  gap: 1rem;
}

.wc-modal-data-flow-2-doc-card {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 7.5rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.wc-modal-data-flow-2-doc-card:hover {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.wc-modal-data-flow-2-doc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #555555;
  text-align: center;
}

.wc-modal-data-flow-2-doc-number {
  font-size: 0.625rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
}

/* ========== External PoV Data Flow - Orange Styles ========== */
/* Stage circle - External PoV base (orange) */
.wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage icon - External PoV base (orange) */
.wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage label - External PoV base (black) */
.wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Stage circle - External PoV completed */
.wc-modal-data-flow-2-stage--external-completed .wc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

/* Stage circle - External PoV active */
.wc-modal-data-flow-2-stage--external-active .wc-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - External PoV completed */
.wc-modal-data-flow-2-stage--external-completed .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Stage icon - External PoV active (white icon on orange background) */
.wc-modal-data-flow-2-stage--external-active .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Document - External PoV base */
.wc-modal-data-flow-2-document--external {
  cursor: pointer;
}

/* Document icon wrapper - External PoV base */
.wc-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wc-modal-data-flow-2-document--external .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document - External PoV completed */
.wc-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
}

.wc-modal-data-flow-2-document--external-completed:hover {
  background-color: #F5F5F5;
}

/* Document - External PoV active */
.wc-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

.wc-modal-data-flow-2-document--external-active:hover {
  background-color: #FDEBD0;
}

/* Document icon wrapper - External PoV completed */
.wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

/* Document icon wrapper - External PoV active */
.wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - External PoV completed */
.wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Document icon - External PoV active (white icon on orange background) */
.wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document number - External PoV orange color */
.wc-modal-data-flow-2-document--external .wc-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document footer - External PoV completed */
.wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

/* Document footer - External PoV active */
.wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}

/* ========== Supplier Documents - Green Styles (like Internal PoV) ========== */
/* Document - Supplier base */
.wc-modal-data-flow-2-document--supplier {
  cursor: pointer;
}

/* Document icon wrapper - Supplier base */
.wc-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wc-modal-data-flow-2-document--supplier .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document number - Supplier green color */
.wc-modal-data-flow-2-document--supplier .wc-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document - Supplier completed */
.wc-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
}

.wc-modal-data-flow-2-document--supplier-completed:hover {
  background-color: #F5F5F5;
}

/* Document icon wrapper - Supplier completed */
.wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - Supplier completed */
.wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document footer - Supplier completed */
.wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

/* Document - Supplier active */
.wc-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

.wc-modal-data-flow-2-document--supplier-active:hover {
  background-color: #E0F2E9;
}

/* Document icon wrapper - Supplier active */
.wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - Supplier active */
.wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - Supplier active */
.wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* ========== Supplier Documents - Display Mode (keep colorful) ========== */
/* Document number - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier .wc-modal-data-flow-2-document-number {
  color: #138B4C;
}

/* Document icon wrapper - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier .wc-modal-data-flow-2-document-icon-wrapper--supplier {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

/* Document icon - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

/* Document card - keep green border in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-completed {
  border-color: #138B4C;
  background-color: #FFFFFF;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-active {
  border-color: #138B4C;
  background-color: #F0FFF4;
}

/* Document icon wrapper - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E8F5E9;
  border-color: #A5D6A7;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #138B4C;
  border-color: #138B4C;
}

/* Document icon - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-icon {
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep green in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-completed .wc-modal-data-flow-2-document-footer {
  background-color: #E8F5E9;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--supplier-active .wc-modal-data-flow-2-document-footer {
  background-color: #C8E6C9;
}

/* External PoV header connector line - base (orange) */
.wc-modal-tab-content--data-flow-2-external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

/* External PoV header connector line - completed */
.wc-modal-tab-content--data-flow-2-external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* ========== External PoV Data Flow - Display Mode (keep orange) ========== */
/* Document number - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external .wc-modal-data-flow-2-document-number {
  color: #E67E22;
}

/* Document icon wrapper - keep orange in display mode (base external) */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external .wc-modal-data-flow-2-document-icon-wrapper--external {
  background-color: #FEF5E7;
  border-color: #F5B041;
}

/* Document icon - keep orange in display mode (base external) */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Header connector line - keep orange in display mode */
.wc-modal-tab-content--display.wc-modal-tab-content--data-flow-2-external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--external)::after {
  background-color: #E67E22;
}

.wc-modal-tab-content--display.wc-modal-tab-content--data-flow-2-external .wc-modal-data-flow-2-row--header .wc-modal-data-flow-2-cell:has(.wc-modal-data-flow-2-stage--external-completed)::after {
  background-color: #E67E22;
}

/* Stage circle - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-circle,
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external-completed .wc-modal-data-flow-2-stage-circle {
  background-color: #FEF5E7;
  border-color: #E67E22;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external-active .wc-modal-data-flow-2-stage-circle {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Stage icon - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-icon,
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external-completed .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external-active .wc-modal-data-flow-2-stage-icon {
  filter: brightness(0) invert(1);
}

/* Stage label - keep colorful in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-stage--external .wc-modal-data-flow-2-stage-label {
  color: #333333;
}

/* Document card - keep orange border in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-completed {
  border-color: #E67E22;
  background-color: #FFFFFF;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-active {
  border-color: #E67E22;
  background-color: #FEF5E7;
}

/* Document icon wrapper - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-icon-wrapper {
  background-color: #E67E22;
  border-color: #E67E22;
}

/* Document icon - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-icon {
  filter: brightness(0) invert(1);
}

/* Document footer - keep orange in display mode */
.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-completed .wc-modal-data-flow-2-document-footer {
  background-color: #FEF5E7;
}

.wc-modal-tab-content--display .wc-modal-data-flow-2-document--external-active .wc-modal-data-flow-2-document-footer {
  background-color: #FDEBD0;
}


/* ========== Calendar Tab Styles ========== */
.wc-modal-tab-content--calendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 1 1;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-tab-content--calendar h3 {
  margin: 0 0 1.25rem 0;
  flex-shrink: 0;
}

.wc-modal-calendar-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

/* Left Column - Milestone List (25%) */
.wc-modal-calendar-milestones {
  width: 25%;
  min-width: 15.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.wc-modal-calendar-milestones-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
  flex-shrink: 0;
}

.wc-modal-calendar-milestones-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-calendar-milestones-list::-webkit-scrollbar {
  width: 1px;
}

.wc-modal-calendar-milestones-list::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-calendar-milestones-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wc-modal-calendar-milestones-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wc-modal-calendar-milestone-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wc-modal-calendar-milestone-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-calendar-milestone-item:last-child {
  border-bottom: none;
}

.wc-modal-calendar-milestone-item--completed {
  border-left: 3px solid #138B4C;
}

.wc-modal-calendar-milestone-item--in-progress {
  border-left: 3px solid #F59E0B;
}

.wc-modal-calendar-milestone-item--pending {
  border-left: 3px solid #6B7280;
}

.wc-modal-calendar-milestone-date {
  font-size: 0.6875rem;
  color: #666666;
  margin-bottom: 0.25rem;
}

.wc-modal-calendar-milestone-activity {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wc-modal-calendar-milestone-pic {
  font-size: 0.6875rem;
  color: #888888;
}

/* Milestone Dates (Planned vs Actual) */
.wc-modal-milestone-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.wc-modal-milestone-date-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
}

.wc-modal-milestone-date-label {
  color: #888888;
  min-width: 3.125rem;
}

.wc-modal-milestone-date-value {
  color: #666666;
}

.wc-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone Classification */
.wc-modal-milestone-classification {
  font-weight: 500;
  padding: 1px 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
}

.wc-modal-milestone-classification--internal {
  background-color: #EDE7F6;
  color: #6A1B9A;
}

.wc-modal-milestone-classification--external {
  background-color: #EFEBE9;
  color: #5D4037;
}

/* Display mode classification - keep colorful based on classification type */
/* Colors are determined by classification-specific classes */

/* Milestone Status Badge */
.wc-modal-milestone-status {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.wc-modal-milestone-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wc-modal-milestone-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-milestone-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

.wc-modal-milestone-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wc-modal-milestone-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

/* Display mode styles for milestone status - keep colorful */
/* Status colors are now determined by status-specific classes */

.wc-modal-activity-item--display .wc-modal-milestone-date-value--actual {
  color: #333333;
  font-weight: 500;
}

/* Milestone user link style */
.wc-modal-calendar-milestones .wc-modal-activity-user {
  color: #138B4C;
  cursor: pointer;
  font-weight: 500;
}

.wc-modal-calendar-milestones .wc-modal-activity-user:hover {
  text-decoration: none;
}

.wc-modal-calendar-milestones .wc-modal-activity-item--display .wc-modal-activity-user {
  color: #138B4C;
}

/* Right Column - Calendar View (75%) */
.wc-modal-calendar-view {
  flex: 1 1;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-calendar-view-header {
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.wc-modal-calendar-view-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wc-modal-calendar-nav-btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.wc-modal-calendar-nav-btn:hover {
  background-color: #F5F5F5;
  border-color: #D0D0D0;
}

.wc-modal-calendar-nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-calendar-nav-btn:hover .wc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1500%) hue-rotate(82deg) brightness(90%) contrast(90%);
}

.wc-modal-calendar-view-title {
  font-weight: 700;
  font-size: 1rem;
  color: #333333;
}

.wc-modal-calendar-view-modes {
  display: flex;
  gap: 0;
}

.wc-modal-calendar-view-mode-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid #E5E5E5;
  border-right: none;
  background-color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 200ms ease;
  height: 1.625rem;
  width: 4.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-modal-calendar-view-mode-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.wc-modal-calendar-view-mode-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-right: 1px solid #E5E5E5;
}

.wc-modal-calendar-view-mode-btn:hover {
  background-color: #F5F5F5;
}

.wc-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
  color: #FFFFFF;
}

.wc-modal-calendar-view-mode-btn--active:hover {
  background-color: #0F6B3A;
}

.wc-modal-calendar-view-mode-btn--active + .wc-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

/* Monthly Calendar Grid */
.wc-modal-calendar-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-modal-calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.wc-modal-calendar-grid-day-name {
  padding: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
}

.wc-modal-calendar-grid-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4.375rem, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-calendar-grid-body::-webkit-scrollbar {
  width: 1px;
}

.wc-modal-calendar-grid-body::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-calendar-grid-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wc-modal-calendar-grid-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wc-modal-calendar-grid-cell {
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  min-height: 4.375rem;
  overflow: hidden;
}

.wc-modal-calendar-grid-cell:nth-child(7n) {
  border-right: none;
}

/* Weekend columns (Saturday = 6th, Sunday = 7th) */
.wc-modal-calendar-grid-cell:nth-child(7n-1),
.wc-modal-calendar-grid-cell:nth-child(7n) {
  background-color: #FAFAFA;
}

.wc-modal-calendar-grid-cell--empty {
  background-color: #FAFAFA;
}

/* Weekend header days */
.wc-modal-calendar-grid-day-name:nth-child(6),
.wc-modal-calendar-grid-day-name:nth-child(7) {
  background-color: #F5F5F5;
}

.wc-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.wc-modal-calendar-grid-cell-day {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wc-modal-calendar-grid-cell-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.wc-modal-calendar-grid-cell-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

/* Monthly Cell Events */
.wc-modal-calendar-grid-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1;
  overflow-y: auto;
}

.wc-modal-calendar-grid-cell-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.wc-modal-calendar-grid-cell-event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.wc-modal-calendar-grid-cell-event-title {
  font-size: 0.625rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-modal-calendar-grid-cell-event-more {
  font-size: 0.5625rem;
  font-style: italic;
  color: #888888;
  cursor: pointer;
}

/* Yearly View */
.wc-modal-calendar-yearly {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wc-modal-calendar-yearly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.wc-modal-calendar-yearly-month {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  background-color: #FAFAFA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wc-modal-calendar-yearly-month:hover {
  background-color: #F0F0F0;
  border-color: #D0D0D0;
}

.wc-modal-calendar-yearly-month-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}

.wc-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

/* Weekly View */
.wc-modal-calendar-weekly {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-modal-calendar-weekly-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

.wc-modal-calendar-weekly-day-header {
  padding: 0.625rem;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}

.wc-modal-calendar-weekly-day-header:last-child {
  border-right: none;
}

.wc-modal-calendar-weekly-day-name {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wc-modal-calendar-weekly-day-date {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-calendar-weekly-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-calendar-weekly-body::-webkit-scrollbar {
  width: 1px;
}

.wc-modal-calendar-weekly-body::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-calendar-weekly-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wc-modal-calendar-weekly-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wc-modal-calendar-weekly-day-column {
  border-right: 1px solid #F0F0F0;
  padding: 0.5rem;
  min-height: 12.5rem;
}

.wc-modal-calendar-weekly-day-column:last-child {
  border-right: none;
}

/* Weekend columns in weekly view (Saturday = 6th, Sunday = 7th) */
.wc-modal-calendar-weekly-day-column:nth-child(6),
.wc-modal-calendar-weekly-day-column:nth-child(7) {
  background-color: #FAFAFA;
}

/* Weekend header in weekly view */
.wc-modal-calendar-weekly-day-header:nth-child(6),
.wc-modal-calendar-weekly-day-header:nth-child(7) {
  background-color: #F5F5F5;
}

.wc-modal-calendar-weekly-event {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.wc-modal-calendar-weekly-event-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wc-modal-calendar-weekly-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wc-modal-calendar-weekly-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.wc-modal-calendar-weekly-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wc-modal-calendar-weekly-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-calendar-weekly-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wc-modal-calendar-weekly-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.wc-modal-calendar-weekly-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Daily View */
.wc-modal-calendar-daily {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-modal-calendar-daily-header {
  padding: 0.75rem 1rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #333333;
  flex-shrink: 0;
}

.wc-modal-calendar-daily-timeline {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}

.wc-modal-calendar-daily-timeline::-webkit-scrollbar {
  width: 1px;
}

.wc-modal-calendar-daily-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-calendar-daily-timeline::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.wc-modal-calendar-daily-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.wc-modal-calendar-daily-hour {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  min-height: 3.125rem;
}

.wc-modal-calendar-daily-hour-label {
  width: 3.75rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  background-color: #FAFAFA;
  border-right: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.wc-modal-calendar-daily-hour-content {
  flex: 1 1;
  padding: 0.5rem;
}

.wc-modal-calendar-daily-event {
  padding: 0.5rem 0.75rem;
  background-color: #F5F5F5;
  border-radius: 0.25rem;
  border-left: 3px solid transparent;
}

.wc-modal-calendar-daily-event-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wc-modal-calendar-daily-event-pic {
  display: block;
  font-size: 0.6875rem;
  color: #666666;
}

.wc-modal-calendar-daily-event-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  margin-bottom: 0.25rem;
  width: -webkit-fit-content;
  width: fit-content;
  text-transform: uppercase;
}

.wc-modal-calendar-daily-event-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wc-modal-calendar-daily-event-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-calendar-daily-event-status--overdue {
  background-color: #FEE2E2;
  color: #991B1B;
}

.wc-modal-calendar-daily-event-status--delayed {
  background-color: #F3E8FF;
  color: #6B21A8;
}

.wc-modal-calendar-daily-event-status--pending {
  background-color: #F3F4F6;
  color: #4B5563;
}

/* Calendar Display Mode - keep colorful */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-milestones {
  border-color: #D0D0D0;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-view {
  border-color: #D0D0D0;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-view-mode-btn--active {
  background-color: #138B4C;
  border-color: #138B4C;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-view-mode-btn--active + .wc-modal-calendar-view-mode-btn {
  border-left-color: #138B4C;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-milestone-item--completed {
  border-left-color: #138B4C;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-milestone-item--in-progress {
  border-left-color: #2196F3;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-grid-cell--has-milestone {
  background-color: #F0FFF4;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-yearly-month-badge {
  background-color: #138B4C;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-milestones-header {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-view-title {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-nav-btn {
  border-color: #D0D0D0;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

/* Yearly Tab Display Mode - keep colorful */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-yearly-month-name {
  color: #333333;
}

/* Monthly Tab Display Mode - keep colorful */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-grid-day-name {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-grid-cell-day {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-grid-cell-marker {
  background-color: #138B4C;
}

/* Event dots - use inline style colors based on status */

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-grid-cell-event-title {
  color: #333333;
}

/* Weekly Tab Display Mode - keep colorful */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-weekly-day-name {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-weekly-day-date {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-weekly-event {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-weekly-event-title {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-weekly-event-pic {
  color: #666666;
}

/* Weekly event status - use status-based class colors */

/* Daily Tab Display Mode - keep colorful */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-daily-header {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-daily-hour-label {
  color: #666666;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-daily-event {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-daily-event-title {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar .wc-modal-calendar-daily-event-pic {
  color: #666666;
}

/* Daily event status - use status-based class colors */

/* External PoV Calendar Styles - Same as Internal (Green Theme) */
.wc-modal-calendar-milestones-header--external {
  color: #333333;
}

.wc-modal-calendar-nav-btn--external .wc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wc-modal-calendar-nav-btn--external:hover .wc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(82%) saturate(1500%) hue-rotate(10deg) brightness(90%) contrast(95%);
}

.wc-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7;
}

.wc-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
  color: #FFFFFF !important;
}

.wc-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.wc-modal-calendar-view-mode-btn--active-external + .wc-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.wc-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

/* External PoV Monthly Calendar - Orange background for cells with milestones */
.wc-modal-tab-content--calendar-external .wc-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Weekly/Daily Event - Grey background (same as Internal), keep orange border */
.wc-modal-calendar-weekly-event--external {
  background-color: #F5F5F5;
}

.wc-modal-calendar-daily-event--external {
  background-color: #F5F5F5;
}

/* External PoV Display Mode - keep grey background */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-weekly-event--external {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-daily-event--external {
  background-color: #FAFAFA;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-grid-cell--has-milestone {
  background-color: #FEF5E7;
}

/* External PoV Calendar Activity/Milestone Styles */
.wc-modal-activity-type--external {
  color: #333333;
}

.wc-modal-activity-user--external {
  color: #E67E22;
}

.wc-modal-activity-user--external:hover {
  color: #D35400;
}

.wc-modal-calendar-milestones .wc-modal-activity-user--external {
  color: #E67E22;
}

.wc-modal-calendar-milestones .wc-modal-activity-user--external:hover {
  color: #D35400;
}

.wc-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV Milestone Status Colors (same as Internal - green for completed) */
.wc-modal-milestone-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wc-modal-milestone-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-milestone-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wc-modal-milestone-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wc-modal-milestone-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Weekly/Daily Event Status Colors (same as Internal - green for completed) */
.wc-modal-calendar-weekly-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wc-modal-calendar-weekly-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-calendar-weekly-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wc-modal-calendar-weekly-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wc-modal-calendar-weekly-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

.wc-modal-calendar-daily-event-status--completed-external {
  background-color: #F2F8EA;
  color: #138B4C;
}

.wc-modal-calendar-daily-event-status--in-progress-external {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-calendar-daily-event-status--overdue-external {
  background-color: #FEE2E2;
  color: #DC2626;
}

.wc-modal-calendar-daily-event-status--delayed-external {
  background-color: #F3E8FF;
  color: #9333EA;
}

.wc-modal-calendar-daily-event-status--pending-external {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* External PoV Calendar Display Mode Styles - keep orange */
.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-milestones-header--external {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-view-mode-btn--active-external {
  background-color: #F5B041 !important;
  border-color: #F5B041 !important;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-view-mode-btn--active-external + .wc-modal-calendar-view-mode-btn {
  border-left-color: #F5B041 !important;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-view-mode-btn--external:hover {
  background-color: #FEF5E7 !important;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-view-mode-btn--active-external:hover {
  background-color: #E9A137 !important;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-yearly-month-badge--external {
  background-color: #F5B041;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-calendar-nav-btn--external .wc-modal-calendar-nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(82%) saturate(1300%) hue-rotate(3deg) brightness(95%) contrast(91%);
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-activity-type--external {
  color: #333333;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-activity-user--external {
  color: #E67E22;
}

.wc-modal-tab-content--display.wc-modal-tab-content--calendar-external .wc-modal-milestone-date-value--actual-external {
  color: #333333;
}

/* External PoV milestone status - use status-based class colors */

/* External PoV event dots - use inline style colors based on status */

/* Validation Error Styles */
.wc-modal-input--error,
.wc-modal-form-input.wc-modal-input--error {
  border-color: #DC3545 !important;
  background-color: #FFFFFF !important;
}

.wc-modal-dropdown--error .wc-modal-delivery-type-input,
.wc-modal-dropdown--error .wc-modal-organization-input,
.wc-modal-dropdown--error .wc-modal-sales-structure-input,
.wc-modal-dropdown--error .wc-modal-sales-channel-input,
.wc-modal-dropdown--error .wc-modal-sales-unit-input,
.wc-modal-dropdown--error .wc-modal-territory-input,
.wc-modal-dropdown--error .wc-modal-sales-office-input,
.wc-modal-dropdown--error .wc-modal-sold-to-party-input,
.wc-modal-dropdown--error .wc-modal-deliver-to-party-input,
.wc-modal-dropdown--error .wc-modal-attention-to-deliver-input,
.wc-modal-dropdown--error .wc-modal-incoterm-input,
.wc-modal-dropdown--error .wc-modal-delivery-point-input,
.wc-modal-dropdown--error .wc-modal-shipping-point-input,
.wc-modal-dropdown--error .wc-modal-warranty-claim-input,
.wc-modal-dropdown--error .wc-modal-sales-team-input,
.wc-modal-dropdown--error .wc-modal-sales-person-input,
.wc-modal-dropdown--error .wc-modal-delivery-priority-input,
.wc-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

.wc-modal-form-group .error-message {
  color: #DC3545;
  font-size: 0.6875rem;
  display: block;
  text-align: left;
  padding-top: 0.25rem;
}

.wc-modal-date-picker-wrapper.wc-modal-dropdown--error input {
  border-color: #DC3545 !important;
}

/* Custom Dropdown Styles for Additional Tab */
.wc-modal-custom-dropdown {
  position: relative;
}

.wc-modal-custom-dropdown-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wc-modal-custom-dropdown-input {
  width: 100%;
  height: 2.2875rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  outline: none;
  font-size: 0.8125rem;
  background: white;
  transition: all 200ms ease;
  cursor: pointer;
}

.wc-modal-custom-dropdown-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-custom-dropdown-input::placeholder {
  color: #CCCCCC;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}

.wc-modal-custom-dropdown-arrow {
  position: absolute;
  right: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-custom-dropdown-arrow--open {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-custom-dropdown-arrow--display {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(70%) contrast(100%);
}

/* Display mode clickable dropdown arrow - keep green/colorful */
.wc-modal-custom-dropdown-arrow--display-clickable {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  cursor: pointer;
}

/* Display mode list styling */
.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item--selected {
  background-color: rgba(0, 128, 0, 0.05) !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-check {
  color: #999999 !important;
}

.wc-modal-custom-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 100;
  padding: 0.25rem 0;
}

.wc-modal-custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.8125rem;
}

.wc-modal-custom-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-custom-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-custom-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-custom-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* DO Setting Modal Styles */
.wc-modal-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.wc-modal-setting-modal {
  min-width: 37.5rem !important;
  max-width: 37.5rem !important;
  width: 37.5rem !important;
  max-height: calc(100vh - 7.5rem);
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15);
  z-index: 100000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wc-modal-setting-content {
  padding: 1.25rem 1.5rem 0 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 37.5rem;
  max-height: 37.5rem;
}

.wc-modal-setting-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.wc-modal-setting-body::-webkit-scrollbar {
  width: 1px;
}

.wc-modal-setting-body::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wc-modal-setting-body::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wc-modal-setting-body::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.wc-modal-setting-placeholder {
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}

/* DO Setting Modal Dropdown */
.wc-modal-setting-dropdown-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.wc-modal-setting-form-group {
  position: relative;
  flex: 1 1;
}

.wc-modal-setting-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
}

.wc-modal-setting-form-label--display {
  color: #333333;
}

.wc-modal-setting-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.wc-modal-setting-dropdown--active {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-setting-dropdown--active .wc-modal-setting-dropdown-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-setting-dropdown--display {
  cursor: default;
  background-color: #FCFCFC;
}

.wc-modal-setting-dropdown--display:hover {
  border-color: #E5E5E5;
}

/* Setting Modal Input - matches dropdown styling */
.wc-modal-setting-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  transition: all 200ms ease;
  box-sizing: border-box;
  outline: none;
}

.wc-modal-setting-input:focus {
  border-color: #C2DE54;
  border-color: var(--color-primary);
}

.wc-modal-setting-input::placeholder {
  color: #999999;
  font-weight: 400;
}

.wc-modal-setting-dropdown-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
}

.wc-modal-setting-dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: filter 200ms ease;
}

.wc-modal-setting-dropdown-icon--display {
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-setting-dropdown-icon.wc-modal-setting-dropdown-icon--active {
  filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(1215%) hue-rotate(26deg) brightness(95%) contrast(87%);
}

.wc-modal-setting-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.wc-modal-setting-dropdown-menu--dotype {
  max-height: 15rem;
  overflow-y: auto;
}

/* Thin scrollbar for DO Type dropdown */
.wc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar {
  width: 0.25rem;
}

.wc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 2px;
}

.wc-modal-setting-dropdown-menu--dotype::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

.wc-modal-setting-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 0.75rem;
  color: #333333;
  text-align: left;
  box-sizing: border-box;
}

.wc-modal-setting-dropdown-item:hover {
  background-color: #F5F5F5;
}

.wc-modal-setting-dropdown-item--selected {
  background-color: #E8F5E9;
}

.wc-modal-setting-dropdown-item--selected:hover {
  background-color: #D5EDD8;
}

.wc-modal-setting-dropdown-item-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1;
}

.wc-modal-setting-dropdown-item-code {
  font-weight: 600;
  color: #138B4C;
  min-width: 2.5rem;
}

.wc-modal-setting-dropdown-item-separator {
  color: #999999;
}

.wc-modal-setting-dropdown-item-name {
  color: #333333;
}

.wc-modal-setting-dropdown-check {
  color: #138B4C;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.wc-modal-setting-tab-content {
  flex: 1 1;
  overflow-y: auto;
  max-height: 100%;
}

/* Scrollbar styling for setting tab content */
.wc-modal-setting-tab-content::-webkit-scrollbar {
  width: 0.1875rem;
  height: 0.1875rem;
}

.wc-modal-setting-tab-content::-webkit-scrollbar-track {
  background: #E5E5E5;
}

.wc-modal-setting-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 1px;
}

.wc-modal-setting-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Print Tab Content - Scrollable with sticky header */
.wc-modal-setting-tab-content--print {
  display: flex;
  flex-direction: column;
}

.wc-modal-setting-tab-content--print .wc-modal-setting-table {
  border-collapse: separate;
  border-spacing: 0;
}

.wc-modal-setting-tab-content--print .wc-modal-setting-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wc-modal-setting-tab-content--print .wc-modal-setting-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

.wc-modal-setting-tab-content--print 

/* DO Setting Modal Table */
.wc-modal-setting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.wc-modal-setting-table thead tr {
  height: 2.25rem;
}

.wc-modal-setting-table thead th {
  text-align: left;
  padding: 0 0.75rem;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
  color: #333333;
  font-size: 0.75rem;
  height: 2.25rem;
  vertical-align: middle;
}

.wc-modal-setting-table tbody tr {
  height: 2.25rem;
}

.wc-modal-setting-table tbody td {
  padding: 0 0.75rem;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  height: 2.25rem;
  vertical-align: middle;
}

.wc-modal-setting-table tbody tr:hover {
  background-color: #FAFAFA;
}

/* DO Setting Checkbox */












/* Keep green color for checked checkbox in display mode (same as edit mode) */


/* DO Setting Output Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */












/* Flipped dropdown menu - appears above the trigger */


















/* DO Setting Description Column (read-only) */
.wc-modal-setting-table tbody td:nth-child(3) {
  background-color: #F9F9F9;
}

/* DO Setting Table Display Mode - keep colorful */
.wc-modal-setting-table--display thead th:nth-child(2),
.wc-modal-setting-table--display thead th:nth-child(3),
.wc-modal-setting-table--display thead th:nth-child(4) {
  color: #333333;
}

.wc-modal-setting-table--display tbody td:nth-child(3) {
  color: #666666;
}

/* DO Setting Add Item Section */


/* DO Setting Modal Display Mode Styles */
.wc-modal-setting-modal--display .modal-title {
  color: #333333;
}

/* DO Setting Transfer Data Dropdown */










/* Keep dark text in display mode (same as edit mode) */






/* Keep green icon in display mode (same as edit mode) */




























/* Transfer Data Code Column (read-only) */


/* Transfer Data Read-only Cell */


/* Transfer Data Table Display Mode - keep colorful (same as edit mode) */
.wc-modal-setting-table--display 

/* Transfer Data Table Header Display Mode - keep dark color (same as edit mode) */
.wc-modal-setting-table--transfer.wc-modal-setting-table--display thead th {
  color: #333333;
}

/* Transfer Data Table - Sticky Header */
.wc-modal-setting-table--transfer {
  border-collapse: separate;
  border-spacing: 0;
}

.wc-modal-setting-table--transfer thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wc-modal-setting-table--transfer thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #F9F9F9;
  z-index: 10;
}

/* Setting Table Row - White background by default */
.wc-modal-setting-table--transfer tbody tr td {
  background-color: #FFFFFF !important;
  transition: background-color 0.15s ease;
}

/* Setting Table Row Hover - Green Style (only when not dragging) */
.wc-modal-setting-table--transfer:not(.wc-modal-setting-table--dragging) tbody tr:hover td {
  background-color: #EDF5EC !important;
}

/* Setting Table Row Hover - Override readonly cell (only when not dragging) */
.wc-modal-setting-table--transfer:not(.wc-modal-setting-table--dragging) tbody tr:hover td

/* Setting Table Row Being Dragged - Green Style */
.wc-modal-setting-table--transfer tbody tr.update-layout-row-dragging td {
  background-color: #EDF5EC !important;
}

.wc-modal-setting-table--transfer tbody tr.update-layout-row-dragging td

/* Setting Table Row Locked - Grey background, non-draggable */
.wc-modal-setting-table--transfer tbody tr.update-layout-row-locked td {
  background-color: #F5F5F5 !important;
  color: #999999;
}

.wc-modal-setting-table--transfer tbody tr.update-layout-row-locked:hover td {
  background-color: #F5F5F5 !important;
}

/* ===== Attribute Tab Styles ===== */

/* Attribute Header Section - Green Background like Basic Data */
.wc-modal-attribute-header-section {
  background-color: #F2F8EA;
  margin: -1.5rem -2.5rem 1.5rem -2.5rem;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E5E5;
}

.wc-modal-attribute-header-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wc-modal-tab-content--display .wc-modal-attribute-header-section {
  background-color: #F2F8EA;
}

/* External PoV Attribute Header Section - Orange Background */
.wc-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

.wc-modal-tab-content--display .wc-modal-attribute-header-section--external {
  background-color: #FEF5E7;
}

/* External PoV Attribute Form Input Orange Border on Focus */
.wc-modal-attribute-header-section--external .wc-modal-form-input:focus {
  border-color: #F5B041;
}

.wc-modal-attribute-header-section--external .wc-modal-form-input--display {
  color: #333333;
}

/* Attribute Section Titles */
.wc-modal-attribute-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 1rem 0;
}

/* Attribute Content Sections */
.wc-modal-attribute-content-section {
  padding: 1.5rem 0;
}

.wc-modal-attribute-content-section:last-child {
  padding-bottom: 0.5rem;
}

/* ========================================
   Print Template Styles
   ======================================== */

/* Print Template Overlay */
.print-template-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.print-template-container {
  background-color: #f0f0f0;
  border-radius: 0.375rem;
  width: 92.5rem;
  max-width: calc(100vw - 3.75rem);
  height: calc(100vh - 3.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Print Template Header */
.print-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0.375rem 0.375rem 0 0;
  flex-shrink: 0;
}

.print-template-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
}

.print-template-actions {
  display: flex;
  gap: 0.625rem;
}

.print-template-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 5.625rem;
  text-align: center;
}

.print-template-btn--secondary {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #666666;
}

.print-template-btn--secondary:hover {
  background-color: #f5f5f5;
  border-color: #b0b0b0;
  color: #333333;
}

.print-template-btn--download {
  background-color: #ffffff;
  border: 1px solid #1976D2;
  color: #1976D2;
}

.print-template-btn--download:hover {
  background-color: #E3F2FD;
  border-color: #1565C0;
  color: #1565C0;
}

.print-template-btn--primary {
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #333333;
}

.print-template-btn--primary:hover {
  background-color: #b5d147;
  border-color: #b5d147;
}

/* Print Template Content */


/* Print Page - A4 Landscape proportional (297:210 = 1.414:1) */
.print-page {
  background-color: #ffffff;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.print-page--landscape {
  /* A4 Landscape ratio: 297mm x 210mm = 1.414:1 */
  width: 70rem;
  height: 49.5rem; /* 1120 / 1.414 */
  padding: 2rem 2.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.625rem;
}

/* Document Header - Max 40% height */
.print-document-header-section {
  flex-shrink: 0;
  max-height: 40%;
}

/* Document Header */
.print-document-header {
  text-align: center;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333333;
}

.print-document-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.print-document-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666666;
  margin: 0;
}

/* Document Info Section */
.print-document-info {
  margin-bottom: 0.5rem;
}

.print-info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.1875rem;
}

.print-info-row:last-child {
  margin-bottom: 0;
}



.print-info-group--full {
  flex: 1 1 100%;
}







/* Print Sections */
.print-section {
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.print-section:last-of-type {
  margin-bottom: 0;
}

.print-section-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Print Table */










/* Document Footer */
.print-document-footer {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid #e0e0e0;
  page-break-inside: avoid;
  flex-shrink: 0;
}

.print-footer-signatures {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.625rem;
}

.print-signature-box {
  flex: 1 1;
  text-align: center;
}

.print-signature-line {
  height: 2.5rem;
  border-bottom: 1px solid #333333;
  margin-bottom: 0.25rem;
}

.print-signature-box p {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #666666;
}

.print-footer-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #999999;
}

.print-footer-info p {
  margin: 0;
}

/* Items Section - Takes remaining space */
.print-items-section {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.print-items-section .print-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-items-section 

/* Table wrapper for scrolling in preview */
.print-table-wrapper {
  flex: 1 1;
  overflow: auto;
}

/* Print Media Query */
@media print {
  /* Hide everything except print template */
  body > *:not(.print-template-overlay) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  /* Hide the main modal behind print template */
  .modal-overlay {
    display: none !important;
  }

  .print-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0;
    z-index: 99999;
  }

  .print-template-container {
    background-color: transparent;
    box-shadow: none;
    max-height: none;
    max-width: none;
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  

  .print-page {
    box-shadow: none;
    padding: 8mm 10mm;
    min-height: auto;
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .print-page--landscape {
    width: 100% !important;
    height: auto !important;
  }

  .print-items-section {
    overflow: visible;
  }

  .print-items-section .print-section {
    overflow: visible;
  }

  /* A4 Landscape */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Allow table to break across pages */
  

  

  

  .print-document-footer {
    page-break-inside: avoid;
  }
}

/* Available Qty Info Container */
.wc-modal-available-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Available Qty Info Popover */
.wc-modal-available-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.wc-modal-available-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.wc-modal-available-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

/* Flipped left arrow - when popover is positioned to the left of the icon */
.wc-modal-available-qty-info-popover-arrow--flipped-left {
  left: auto;
  right: -0.5rem;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #D0D0D0;
}

.wc-modal-available-qty-info-popover-arrow--flipped-left::after {
  content: '';
  position: absolute;
  left: auto;
  right: 1px;
  top: -0.4375rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #FFFFFF;
}

.wc-modal-available-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.wc-modal-available-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-available-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.wc-modal-available-qty-info-popover-close:hover {
  color: #333333;
}

.wc-modal-available-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Available Qty popover */
.wc-modal-available-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.wc-modal-available-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.wc-modal-available-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

.wc-modal-available-qty-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0F0F0;
}

.wc-modal-available-qty-info-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.wc-modal-available-qty-info-value {
  font-size: 0.8125rem;
  color: #333333;
  font-weight: 600;
}

.wc-modal-available-qty-tree {
  padding: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}

.wc-modal-available-qty-tree-level {
  position: relative;
}

.wc-modal-available-qty-tree-level--1 {
  padding-left: 0;
}

.wc-modal-available-qty-tree-level--2 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.wc-modal-available-qty-tree-level--3 {
  padding-left: 1rem;
  margin-top: 0.375rem;
  border-left: 2px solid #E0E0E0;
  margin-left: 0.375rem;
}

.wc-modal-available-qty-tree-level--4 {
  padding-left: 0.75rem;
  margin-top: 0.375rem;
  margin-left: 0.375rem;
}

.wc-modal-available-qty-tree-node {
  margin-bottom: 0.375rem;
}

.wc-modal-available-qty-tree-node:last-child {
  margin-bottom: 0;
}

.wc-modal-available-qty-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  font-size: 0.75rem;
}

.wc-modal-available-qty-tree-node-header--clickable {
  cursor: pointer;
  transition: all 200ms ease;
}

.wc-modal-available-qty-tree-node-header--clickable:hover {
  background-color: #F5F5F5;
  border-color: #138B4C;
}

.wc-modal-available-qty-tree-expand-icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
  transition: transform 200ms ease;
}

.wc-modal-available-qty-tree-expand-icon--expanded {
  transform: rotate(90deg);
}

.wc-modal-available-qty-tree-node-label {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 500;
}

.wc-modal-available-qty-tree-node-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.wc-modal-available-qty-tree-node-count {
  font-size: 0.625rem;
  color: #999999;
  margin-left: auto;
}

.wc-modal-available-qty-tree-batch-table {
  background-color: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.wc-modal-available-qty-tree-batch-header {
  display: flex;
  background-color: #F5F5F5;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid #E0E0E0;
}

.wc-modal-available-qty-tree-batch-row {
  display: flex;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid #F0F0F0;
}

.wc-modal-available-qty-tree-batch-row:last-child {
  border-bottom: none;
}

.wc-modal-available-qty-tree-batch-row:hover {
  background-color: #FAFAFA;
}

.wc-modal-available-qty-tree-batch-col {
  font-size: 0.6875rem;
}

.wc-modal-available-qty-tree-batch-col--batch {
  flex: 1 1;
  color: #333333;
}

.wc-modal-available-qty-tree-batch-col--qty {
  width: 5rem;
  text-align: right;
  color: #138B4C;
  font-weight: 600;
}

.wc-modal-available-qty-tree-batch-header .wc-modal-available-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
}

.wc-modal-available-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* Compact Available Qty Tree Styles */
.avail-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

/* Keep colorful in display mode - same as edit mode */
.wc-modal-available-qty-info-popover--display .avail-qty-tree-header {
  background-color: #F2F8EA;
}

/* Keep green icons and qty in display mode - same as edit mode */
.wc-modal-available-qty-info-popover--display .avail-qty-tree-toggle {
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
}

.wc-modal-available-qty-info-popover--display .avail-qty-tree-qty {
  color: #138B4C;
}

.avail-qty-tree-header-label {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 500;
}

.avail-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree {
  padding: 0;
}

.avail-qty-tree-item {
  position: relative;
}

.avail-qty-tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.avail-qty-tree-row:hover {
  background-color: #F5F5F5;
}

.avail-qty-tree-toggle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(36%) sepia(31%) saturate(1107%) hue-rotate(82deg) brightness(93%) contrast(88%);
  position: relative;
  z-index: 2;
}

.avail-qty-tree-label {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
  min-width: 6.25rem;
}

.avail-qty-tree-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.avail-qty-tree-count {
  font-size: 0.625rem;
  color: #888888;
  margin-left: 0.25rem;
}

.avail-qty-tree-qty {
  font-size: 0.75rem;
  color: #138B4C;
  font-weight: 700;
  margin-left: 0.25rem;
}

.avail-qty-tree-children {
  position: relative;
  margin-left: 0.9375rem;
  padding-left: 1.375rem;
}

/* Vertical line from parent icon center down to children */
.avail-qty-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.375rem;
  bottom: 0.4375rem;
  width: 1px;
  background-color: #D0D0D0;
}

/* Horizontal connector line from vertical line to child icon */
.avail-qty-tree-children > .avail-qty-tree-item::before {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.8125rem;
  width: 1.875rem;
  height: 1px;
  background-color: #D0D0D0;
}

/* Cover vertical line below last child */
.avail-qty-tree-children > .avail-qty-tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 0.875rem;
  bottom: 0;
  width: 1px;
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-list {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: #FAFAFA;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-left: 1.375rem;
}

/* Remove vertical line from batch list (level 4) */
.avail-qty-tree-batch-list::before {
  display: none;
}

.avail-qty-tree-batch-header {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.25rem;
}

.avail-qty-tree-batch-header .avail-qty-tree-batch-col {
  font-size: 0.625rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
}

.avail-qty-tree-batch-row {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1875rem;
  transition: background-color 0.15s ease;
}

.avail-qty-tree-batch-row:hover {
  background-color: #FFFFFF;
}

.avail-qty-tree-batch-col {
  font-size: 0.6875rem;
  color: #333333;
  flex: 1 1;
}

.avail-qty-tree-batch-col--qty {
  text-align: right;
  font-weight: 600;
  color: #138B4C;
}

.avail-qty-tree-empty {
  padding: 0.75rem;
  text-align: center;
  color: #999999;
  font-size: 0.6875rem;
  font-style: italic;
}

/* ========================================
   Secured Qty Info Popover Styles
   ======================================== */

/* Secured Qty Info Container */
.wc-modal-secured-qty-info-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Secured Qty Info Popover */
.wc-modal-secured-qty-info-popover {
  width: 25rem;
  height: 37.5rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.15);
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
}

.wc-modal-secured-qty-info-popover-arrow {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: -0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #D0D0D0;
}

.wc-modal-secured-qty-info-popover-arrow::after {
  content: '';
  position: absolute;
  top: -0.4375rem;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
}

.wc-modal-secured-qty-info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #E8E8E8;
  background-color: #FAFAFA;
  border-radius: 0.375rem 0.375rem 0 0;
}

.wc-modal-secured-qty-info-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-secured-qty-info-popover-close {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #999999;
  cursor: pointer;
  padding: 2px 0.25rem;
  line-height: 1;
  transition: color 200ms ease;
}

.wc-modal-secured-qty-info-popover-close:hover {
  color: #333333;
}

/* Secured Qty Tree Header - Fixed/Frozen */
.secured-qty-tree-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-tree-header-label {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

.secured-qty-tree-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.wc-modal-secured-qty-info-popover-content {
  padding: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
}

/* Thin scrollbar for Secured Qty popover */
.wc-modal-secured-qty-info-popover-content::-webkit-scrollbar {
  width: 2px !important;
}

.wc-modal-secured-qty-info-popover-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.wc-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
}

.wc-modal-secured-qty-info-popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Secured Qty Info Header Section */
.secured-qty-info-header-section {
  padding: 0.75rem;
  background-color: #F2F8EA;
  border-bottom: 1px solid #E0E0E0;
  flex-shrink: 0;
}

/* Keep green background in display mode (same as edit mode) */
.wc-modal-secured-qty-info-popover--display .secured-qty-info-header-section {
  background-color: #F2F8EA;
}

/* Secured Qty Field Section - separate with white background */
.secured-qty-info-field-section {
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  flex-shrink: 0;
}

.secured-qty-info-header-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.secured-qty-info-header-row:last-child {
  margin-bottom: 0;
}

.secured-qty-info-header-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secured-qty-info-header-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
}

.secured-qty-info-header-value {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 600;
}

.secured-qty-info-field-label {
  font-size: 0.625rem;
  color: #333333;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.secured-qty-info-field-value-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secured-qty-info-field-input {
  width: 9.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  text-align: right;
  outline: none;
}

.secured-qty-info-field-uom {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Secured Qty Info Table */










/* Secured Qty Info Empty State */
.secured-qty-info-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.secured-qty-info-empty-state-image {
  width: 3.75rem;
  height: auto;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.secured-qty-info-empty-state-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}

.secured-qty-info-empty-state-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.6875rem;
  color: #999999;
}



/* Clickable Activity Styles */
.wc-modal-activity-type--clickable {
  cursor: pointer;
  transition: color 200ms ease;
}

.wc-modal-activity-type--clickable:hover {
  color: #138B4C;
  text-decoration: none;
}

.wc-modal-activity-type--clickable.wc-modal-activity-type--display:hover {
  color: #138B4C;
}

.wc-modal-activity-type--clickable.wc-modal-activity-type--external:hover {
  color: #E67E00;
}

.wc-modal-calendar-grid-cell-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wc-modal-calendar-grid-cell-event--clickable:hover {
  background-color: #F0F8F5;
}

.wc-modal-calendar-weekly-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wc-modal-calendar-weekly-event--clickable:hover {
  background-color: #F0F8F5;
}

.wc-modal-calendar-daily-event--clickable {
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wc-modal-calendar-daily-event--clickable:hover {
  background-color: #F0F8F5;
}

/* Activity Detail Modal */
.wc-modal-activity-detail-modal {
  max-width: 35rem;
  width: 90%;
  max-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-modal-activity-detail-content {
  flex: 1 1;
  height: 37.5rem;
  max-height: calc(100vh - 12.5rem);
  overflow: hidden;
  padding: 0 !important;
}

/* Match label styling to wc-modal-form-label */
.wc-modal-activity-detail-content .wc-modal-item-text-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

/* Keep labels black in display mode for Task Modal */
.wc-modal-activity-detail-modal .wc-modal-item-text-label--display {
  color: #333333;
}

/* Keep title black in display mode for Task Modal */
.wc-modal-activity-detail-modal .modal-title--display {
  color: #333333;
}

/* Keep tabs color in display mode for Task Modal */
.wc-modal-activity-detail-modal .wc-modal-tabs--display .wc-modal-tab {
  color: #333333;
}

.wc-modal-activity-detail-modal .wc-modal-tabs--display .wc-modal-tab--active {
  color: #138B4C;
  border-bottom-color: #138B4C;
}

/* External PoV - keep orange color in display mode */
.wc-modal-activity-detail-modal .wc-modal-tabs--external.wc-modal-tabs--display .wc-modal-tab--active {
  color: #E67E22;
  border-bottom-color: #E67E22;
}

/* Green background for header info section in Activity Detail modal */
.wc-modal-activity-detail-tab-content--general .wc-modal-item-text-info {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

.wc-modal-activity-detail-content .wc-modal-milestone-status {
  margin: 0;
}

.wc-modal-activity-detail-overlay {
  align-items: center;
  padding-top: 0;
}

.wc-modal-activity-detail-pic {
  color: #138B4C;
  font-weight: 500;
}

.wc-modal-activity-detail-pic--clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.wc-modal-activity-detail-pic-chat-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.wc-modal-activity-detail-pic-chat-icon {
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-activity-detail-pic-chat-icon--regular {
  opacity: 1;
}

.wc-modal-activity-detail-pic-chat-icon--solid {
  opacity: 0;
}

.wc-modal-activity-detail-pic-chat-wrapper:hover .wc-modal-activity-detail-pic-chat-icon--regular {
  opacity: 0;
}

.wc-modal-activity-detail-pic-chat-wrapper:hover .wc-modal-activity-detail-pic-chat-icon--solid {
  opacity: 1;
}

/* Hover effect for PIC name - Internal PoV */
.wc-modal-activity-detail-pic--clickable:hover {
  color: #0D6B3A;
}

.wc-modal-activity-detail-pic--clickable:hover .wc-modal-activity-detail-pic-chat-icon {
  filter: invert(28%) sepia(72%) saturate(620%) hue-rotate(107deg) brightness(82%) contrast(92%);
}

/* External PoV styling for PIC and chat icon */
.wc-modal-activity-detail-content--external .wc-modal-activity-detail-pic {
  color: #E67E22;
}

.wc-modal-activity-detail-content--external .wc-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* Hover effect for PIC name - External PoV */
.wc-modal-activity-detail-content--external .wc-modal-activity-detail-pic--clickable:hover {
  color: #C0651A;
}

.wc-modal-activity-detail-content--external .wc-modal-activity-detail-pic--clickable:hover .wc-modal-activity-detail-pic-chat-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(91%) contrast(83%);
}

.wc-modal-activity-detail-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.wc-modal-activity-detail-status--completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.wc-modal-activity-detail-status--in-progress {
  background-color: #E3F2FD;
  color: #1565C0;
}

.wc-modal-activity-detail-status--pending {
  background-color: #F5F5F5;
  color: #666666;
}

.wc-modal-activity-detail-status--overdue {
  background-color: #FFEBEE;
  color: #C62828;
}

.wc-modal-activity-detail-status--delayed {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Description is always grey as it's read-only */
.wc-modal-activity-detail-description {
  background-color: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.wc-modal-activity-detail-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
}

.wc-modal-activity-detail-documents {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.wc-modal-activity-detail-document-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.wc-modal-activity-detail-document-icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wc-modal-activity-detail-document-icon {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(38%) sepia(72%) saturate(520%) hue-rotate(107deg) brightness(92%) contrast(92%);
}

.wc-modal-activity-detail-document-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.wc-modal-activity-detail-document-name:hover {
  text-decoration: none;
  color: #0D6B3A;
}

.wc-modal-activity-detail-content--external .wc-modal-activity-detail-document-name:hover {
  color: #C0651A;
}

.wc-modal-activity-detail-document-type {
  font-size: 0.6875rem;
  color: #888888;
  margin-left: auto;
}

/* External PoV styling for document icons - orange style */
.wc-modal-activity-detail-content--external .wc-modal-activity-detail-document-icon-wrapper {
  background-color: #FEF5E7;
  border-color: #F5CBA7;
}

.wc-modal-activity-detail-content--external .wc-modal-activity-detail-document-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

.wc-modal-activity-detail-content--external .wc-modal-activity-detail-document-name {
  color: #E67E22;
}

.wc-modal-activity-detail-history {
  margin-top: 0.5rem;
  position: relative;
}

.wc-modal-activity-detail-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.wc-modal-activity-detail-history-item::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 2px;
  background-color: #E5E5E5;
}

.wc-modal-activity-detail-history-item:last-child::before {
  display: none;
}

.wc-modal-activity-detail-history-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  border-radius: 50%;
  background-color: #9E9E9E;
  margin-top: 0.25rem;
  z-index: 1;
}

.wc-modal-activity-detail-history-dot--completed {
  background-color: #138B4C;
}

.wc-modal-activity-detail-history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-modal-activity-detail-history-date {
  font-size: 0.6875rem;
  color: #888888;
  font-weight: 500;
}

.wc-modal-activity-detail-history-text {
  font-size: 0.8125rem;
  color: #555555;
}

.wc-modal-activity-detail-tab-content {
  height: 37.5rem;
  max-height: 37.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Scrollbar styling for tab content */
.wc-modal-activity-detail-tab-content::-webkit-scrollbar {
  width: 0.25rem;
}

.wc-modal-activity-detail-tab-content::-webkit-scrollbar-track {
  background: transparent;
}

.wc-modal-activity-detail-tab-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 2px;
}

.wc-modal-activity-detail-tab-content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* General tab specific styling */
.wc-modal-activity-detail-tab-content--general {
  padding: 0;
}

.wc-modal-activity-detail-tab-content--general .wc-modal-item-text-info {
  margin: 0;
  border-radius: 0;
}

/* Content below green section needs padding */
.wc-modal-activity-detail-tab-content--general > div:not(.wc-modal-item-text-info) {
  padding: 0 1.5rem;
}

.wc-modal-activity-detail-tab-content--general > div:last-child {
  padding-bottom: 1.5rem;
}

/* Attachment/Notes tab padding - no horizontal padding, scrollbar at edge */
.wc-modal-activity-detail-tab-content--attachment,
.wc-modal-activity-detail-tab-content--notes {
  padding: 1rem 0;
}

.wc-modal-activity-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35rem;
  color: #888888;
  font-size: 0.8125rem;
  padding: 0 1.5rem;
}

.wc-modal-activity-detail-empty-state p {
  margin: 0;
}

/* Attachment Table for Task Modal */
.wc-modal-activity-detail-tab-content--attachment .wc-modal-batch-assignment-table-section {
  padding: 0 1.5rem;
}

.wc-modal-activity-detail-tab-content--attachment .wc-modal-batch-assignment-table-section > .wc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wc-modal-activity-detail-add-btn-section {
  margin-top: 0.75rem;
}

.wc-modal-activity-detail-table-container {
  height: auto;
  min-height: 0;
  min-height: initial;
  max-height: 21.875rem;
}

.wc-modal-activity-detail-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #138B4C;
  cursor: pointer;
}

.wc-modal-activity-detail-attachment-name:hover {
  text-decoration: none;
}

/* External PoV styling for attachment */
.wc-modal-activity-detail-content--external .wc-modal-activity-detail-attachment-name {
  color: #E67E22;
}

/* Task Notes Tab Styles */
.wc-modal-activity-detail-tab-content--notes {
  padding: 0;
}

.wc-modal-task-notes-section {
  background-color: #F2F8EA;
  padding: 1.5rem;
  border-bottom: 1px solid #E0E0E0;
}

/* Orange-tinted backgrounds for External PoV in Task Modal */
.wc-modal-activity-detail-content--external .wc-modal-item-text-info {
  background-color: #FEF5E7;
}

.wc-modal-activity-detail-content--external .wc-modal-task-notes-section {
  background-color: #FEF5E7;
}

.wc-modal-task-notes-section .wc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wc-modal-task-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background-color: #FFFFFF;
}

/* Grey textarea in display mode */
.wc-modal-task-notes-textarea.wc-modal-form-textarea--display {
  background-color: #FAFAFA;
  color: #666666;
}

.wc-modal-task-chat-section {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.wc-modal-task-chat-section > .wc-modal-item-text-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wc-modal-task-chat-new-thread {
  margin-bottom: 0.75rem;
}

.wc-modal-task-chat-new-thread textarea {
  width: 100%;
  font-size: 0.75rem;
}

.wc-modal-task-chat-new-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.wc-modal-task-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wc-modal-task-chat-thread {
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #FFFFFF;
}

.wc-modal-task-chat-message {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
}

.wc-modal-task-chat-message--main {
  background-color: #FAFAFA;
}

.wc-modal-task-chat-message--reply {
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
  padding-left: 3.5rem;
}

.wc-modal-task-chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #E8F5E9;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.wc-modal-task-chat-avatar--small {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.wc-modal-task-chat-content {
  flex: 1 1;
  min-width: 0;
}

.wc-modal-task-chat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.wc-modal-task-chat-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333333;
}

.wc-modal-task-chat-user-position {
  font-size: 0.625rem;
  color: #666666;
  background-color: #E8F5E9;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
}

.wc-modal-task-chat-timestamp {
  font-size: 0.625rem;
  color: #999999;
}

.wc-modal-task-chat-delete-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 0.25rem;
  margin-left: auto;
}

.wc-modal-task-chat-delete-btn:hover {
  opacity: 1;
  background-color: #FFEBEE;
}

.wc-modal-task-chat-delete-btn img {
  width: 0.875rem;
  height: 0.875rem;
  filter: invert(14%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(100%) contrast(115%);
}

.wc-modal-task-chat-text {
  font-size: 0.75rem;
  color: #555555;
  line-height: 1.4;
  word-break: break-word;
}

.wc-modal-task-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #138B4C;
  cursor: pointer;
}

.wc-modal-task-chat-reply-btn:hover {
  text-decoration: none;
}

.wc-modal-task-chat-reply-btn img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(404%) hue-rotate(107deg) brightness(97%) contrast(93%);
}

.wc-modal-task-chat-replies {
  display: flex;
  flex-direction: column;
}

.wc-modal-task-chat-reply-input {
  padding: 0.75rem;
  padding-left: 3.5rem;
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;
}

.wc-modal-task-chat-reply-input textarea {
  width: 100%;
  font-size: 0.75rem;
}

.wc-modal-task-chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.wc-modal-task-chat-empty {
  text-align: center;
  padding: 1.25rem;
  color: #888888;
  font-size: 0.75rem;
}

/* External PoV styling for Task chat */
.wc-modal-activity-detail-content--external .wc-modal-task-chat-avatar {
  background-color: #F5B041;
}

.wc-modal-activity-detail-content--external .wc-modal-task-chat-user-position {
  background-color: #FDE8D0;
}

.wc-modal-activity-detail-content--external .wc-modal-task-chat-reply-btn {
  color: #E67E22;
}

.wc-modal-activity-detail-content--external .wc-modal-task-chat-reply-btn img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1292%) hue-rotate(360deg) brightness(101%) contrast(83%);
}

/* ========================================
   Display Mode Dropdown Items - Grey and Non-selectable
   Dropdowns can still be opened but items are disabled
   ======================================== */

/* Common display mode dropdown item styles */
.wc-modal-dropdown--display .wc-modal-dropdown-item,
.wc-modal-dropdown--display [class*="-item"],
.wc-modal-tags-dropdown--display .wc-modal-tags-dropdown-item,
.wc-modal-baseline-date-dropdown--display .wc-modal-baseline-date-item,
.wc-modal-reference-type-dropdown--display .wc-modal-reference-type-item,
.wc-modal-delivery-priority-dropdown--display .wc-modal-delivery-priority-item,
.wc-modal-organization-dropdown--display .wc-modal-organization-item,
.wc-modal-sales-structure-dropdown--display .wc-modal-sales-structure-item,
.wc-modal-delivery-type-dropdown--display .wc-modal-delivery-type-item,
.wc-modal-sales-channel-dropdown--display .wc-modal-sales-channel-item,
.wc-modal-sales-unit-dropdown--display .wc-modal-sales-unit-item,
.wc-modal-sold-to-party-dropdown--display .wc-modal-sold-to-party-item,
.wc-modal-deliver-to-party-dropdown--display .wc-modal-deliver-to-party-item,
.wc-modal-attention-to-deliver-dropdown--display .wc-modal-attention-to-deliver-item,
.wc-modal-incoterm-dropdown--display .wc-modal-incoterm-item,
.wc-modal-delivery-point-dropdown--display .wc-modal-delivery-point-item,
.wc-modal-shipping-point-dropdown--display .wc-modal-shipping-point-item,
.wc-modal-warranty-claim-dropdown--display .wc-modal-warranty-claim-item,
.wc-modal-sales-person-dropdown--display .wc-modal-sales-person-item,
.wc-modal-sales-team-dropdown--display .wc-modal-sales-team-item,
.wc-modal-territory-dropdown--display .wc-modal-territory-item,
.wc-modal-sales-office-dropdown--display .wc-modal-sales-office-item,
.wc-modal-status-dropdown--display .wc-modal-status-item,
.wc-modal-handling-product-dropdown--display .wc-modal-handling-product-item,
.wc-modal-child-uom-dropdown--display .wc-modal-child-uom-item,
.wc-modal-partner-type-dropdown--display .wc-modal-partner-type-item,
.wc-modal-partner-id-dropdown--display .wc-modal-partner-id-item,
.wc-modal-custom-dropdown--display .wc-modal-custom-dropdown-item {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Grey hover state for display mode dropdown items */
.wc-modal-dropdown--display .wc-modal-dropdown-item:hover,
.wc-modal-dropdown--display [class*="-item"]:hover,
.wc-modal-tags-dropdown--display .wc-modal-tags-dropdown-item:hover,
.wc-modal-baseline-date-dropdown--display .wc-modal-baseline-date-item:hover,
.wc-modal-reference-type-dropdown--display .wc-modal-reference-type-item:hover,
.wc-modal-delivery-priority-dropdown--display .wc-modal-delivery-priority-item:hover,
.wc-modal-organization-dropdown--display .wc-modal-organization-item:hover,
.wc-modal-sales-structure-dropdown--display .wc-modal-sales-structure-item:hover,
.wc-modal-delivery-type-dropdown--display .wc-modal-delivery-type-item:hover,
.wc-modal-sales-channel-dropdown--display .wc-modal-sales-channel-item:hover,
.wc-modal-sales-unit-dropdown--display .wc-modal-sales-unit-item:hover,
.wc-modal-sold-to-party-dropdown--display .wc-modal-sold-to-party-item:hover,
.wc-modal-deliver-to-party-dropdown--display .wc-modal-deliver-to-party-item:hover,
.wc-modal-attention-to-deliver-dropdown--display .wc-modal-attention-to-deliver-item:hover,
.wc-modal-incoterm-dropdown--display .wc-modal-incoterm-item:hover,
.wc-modal-delivery-point-dropdown--display .wc-modal-delivery-point-item:hover,
.wc-modal-shipping-point-dropdown--display .wc-modal-shipping-point-item:hover,
.wc-modal-warranty-claim-dropdown--display .wc-modal-warranty-claim-item:hover,
.wc-modal-sales-person-dropdown--display .wc-modal-sales-person-item:hover,
.wc-modal-sales-team-dropdown--display .wc-modal-sales-team-item:hover,
.wc-modal-territory-dropdown--display .wc-modal-territory-item:hover,
.wc-modal-sales-office-dropdown--display .wc-modal-sales-office-item:hover,
.wc-modal-status-dropdown--display .wc-modal-status-item:hover,
.wc-modal-handling-product-dropdown--display .wc-modal-handling-product-item:hover,
.wc-modal-child-uom-dropdown--display .wc-modal-child-uom-item:hover,
.wc-modal-partner-type-dropdown--display .wc-modal-partner-type-item:hover,
.wc-modal-partner-id-dropdown--display .wc-modal-partner-id-item:hover,
.wc-modal-custom-dropdown--display .wc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

/* Grey selected state for display mode dropdown items */
.wc-modal-dropdown--display [class*="-item--selected"],
.wc-modal-tags-dropdown--display .wc-modal-tags-dropdown-item--selected,
.wc-modal-baseline-date-dropdown--display .wc-modal-baseline-date-item--selected,
.wc-modal-reference-type-dropdown--display .wc-modal-reference-type-item--selected,
.wc-modal-delivery-priority-dropdown--display .wc-modal-delivery-priority-item--selected,
.wc-modal-organization-dropdown--display .wc-modal-organization-item--selected,
.wc-modal-sales-structure-dropdown--display .wc-modal-sales-structure-item--selected,
.wc-modal-delivery-type-dropdown--display .wc-modal-delivery-type-item--selected,
.wc-modal-sales-channel-dropdown--display .wc-modal-sales-channel-item--selected,
.wc-modal-sales-unit-dropdown--display .wc-modal-sales-unit-item--selected,
.wc-modal-sold-to-party-dropdown--display .wc-modal-sold-to-party-item--selected,
.wc-modal-deliver-to-party-dropdown--display .wc-modal-deliver-to-party-item--selected,
.wc-modal-attention-to-deliver-dropdown--display .wc-modal-attention-to-deliver-item--selected,
.wc-modal-incoterm-dropdown--display .wc-modal-incoterm-item--selected,
.wc-modal-delivery-point-dropdown--display .wc-modal-delivery-point-item--selected,
.wc-modal-shipping-point-dropdown--display .wc-modal-shipping-point-item--selected,
.wc-modal-warranty-claim-dropdown--display .wc-modal-warranty-claim-item--selected,
.wc-modal-sales-person-dropdown--display .wc-modal-sales-person-item--selected,
.wc-modal-sales-team-dropdown--display .wc-modal-sales-team-item--selected,
.wc-modal-territory-dropdown--display .wc-modal-territory-item--selected,
.wc-modal-sales-office-dropdown--display .wc-modal-sales-office-item--selected,
.wc-modal-status-dropdown--display .wc-modal-status-item--selected,
.wc-modal-handling-product-dropdown--display .wc-modal-handling-product-item--selected,
.wc-modal-child-uom-dropdown--display .wc-modal-child-uom-item--selected,
.wc-modal-partner-type-dropdown--display .wc-modal-partner-type-item--selected,
.wc-modal-partner-id-dropdown--display .wc-modal-partner-id-item--selected,
.wc-modal-custom-dropdown--display .wc-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Grey checkmark for display mode dropdown items */
.wc-modal-dropdown--display [class*="-check"],
.wc-modal-dropdown--display .wc-modal-dropdown-check,
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-check {
  color: #999999 !important;
}

/* Display mode dropdown item code and name text */
.wc-modal-dropdown--display [class*="-item-code"],
.wc-modal-dropdown--display [class*="-item-name"],
.wc-modal-dropdown--display [class*="-item-content"],
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-code,
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-name,
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-item-content {
  color: #999999 !important;
}

/* ========================================
   Display Mode Dropdown Content - Grey Items
   For dropdowns that add --display class to content element
   ======================================== */

/* Sold-to-party style dropdown content display mode */
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-item,
.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-item:hover {
  background-color: transparent !important;
}

.wc-modal-sold-to-party-dropdown-content--display .wc-modal-sold-to-party-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

/* Tags dropdown display mode */
.wc-modal-tags-dropdown--display .wc-modal-tags-item,
.wc-modal-tags-dropdown--display .wc-modal-tags-create {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-tags-dropdown--display .wc-modal-tags-item:hover {
  background-color: transparent !important;
}

.wc-modal-tags-dropdown--display .wc-modal-tags-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.wc-modal-tags-dropdown--display .wc-modal-tags-search-input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Custom dropdown list display mode */
.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item,
.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item--placeholder {
  color: #999999 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item:hover {
  background-color: transparent !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-item--selected {
  background-color: #FAFAFA !important;
  color: #888888 !important;
}

.wc-modal-custom-dropdown-list--display .wc-modal-custom-dropdown-check {
  color: #999999 !important;
}

/* Setting output menu display mode */


/* =============================================================
   Wide-screen scale + Home page font bumps (More Space, ≥1700px)
   =============================================================
   Placed at the end of the file so they beat the per-section
   defaults (.home-focus-title, .home-favourite-title, etc. which
   live earlier in the file) via source-order cascade.

   Restores the block originally added in commit 5d53e10 and
   inadvertently removed by f247a5d's squash-merge conflict
   resolution — without this rule, every rem-based element on
   ≥1700px viewports (sidebars, third nav, tabs, modals, etc.)
   renders at the 14px base instead of the intended 16px. */
@media (min-width: 1700px) {
  html {
    font-size: 16px;
  }

  .home-focus-title,
  .home-favourite-title,
  .home-market-title,
  .home-content-card-title {
    font-size: 1.25rem;
  }

  .home-focus-subtitle,
  .home-favourite-subtitle,
  .home-market-live {
    font-size: 0.9375rem;
  }

  .home-focus-metric-label {
    font-size: 0.75rem;
  }

  .home-focus-metric-change,
  .home-focus-metric-sub {
    font-size: 0.8125rem;
  }

  .home-welcome-attention {
    font-size: 0.875rem;
  }

  .home-engage-name {
    font-size: 1.0625rem;
  }

  .home-engage-role {
    font-size: 0.9375rem;
  }

  .task-upcoming-row { font-size: 0.9375rem !important; }
  .task-upcoming-date { font-size: 0.8125rem !important; }
  .task-upcoming-title { font-size: 0.9375rem !important; }
  .task-upcoming-sub { font-size: 0.8125rem !important; }
  .task-upcoming-priority { font-size: 0.75rem !important; }
}




/* Scoped to OrganizationDetailPopover only — does not affect any other modal. */
.org-popover-scroll {
  scrollbar-width: thin;
  scrollbar-color: #CCCCCC #F5F5F5;
}

.org-popover-scroll::-webkit-scrollbar {
  width: 0.1875rem !important;
}

.org-popover-scroll::-webkit-scrollbar-track {
  background: #F5F5F5 !important;
  border-radius: 0.25rem !important;
}

.org-popover-scroll::-webkit-scrollbar-thumb {
  background: #CCCCCC !important;
  border-radius: 0.25rem !important;
}

.org-popover-scroll::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}