@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  overflow: hidden;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
      flex: 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.7s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}

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

/*# sourceMappingURL=ReactToastify.css.map */

* {
  font-family: "Nunito", "Poppins", sans-serif;
  margin: 0;
}
/* ==============================
   Sidebar
   ============================== */

.sidebar {
  --sidebar-bg: #ffffff;
  --sidebar-text: #374151;
  --sidebar-muted: #9ca3af;
  --sidebar-border: #e5e7eb;
  --sidebar-hover: #f9fafb;
  --sidebar-active-bg: #fff7ed;
  --sidebar-primary: #ff8c00;
  --sidebar-primary-dark: #c2410c;

  position: sticky;
  top: 0;
  width: 250px;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 3px 0 14px rgba(0, 0, 0, 0.03);
  transition: width 0.2s ease;
  z-index: 20;
}

.sidebar,
.sidebar * {
  box-sizing: border-box;
}

.sidebar.collapsed {
  width: 76px;
}


/* ==============================
   Main
   ============================== */

.sidebar-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}


/* ==============================
   Header / Brand
   ============================== */

.sidebar-header {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-primary);
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sidebar-brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
  transition:
    opacity 0.15s ease,
    width 0.15s ease;
}

.sidebar-brand-text strong {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}

.sidebar-brand-text span {
  margin-top: 3px;
  color: var(--sidebar-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sidebar-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--sidebar-border);
  border-radius: 9px;
  color: #4b5563;
  font-size: 20px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sidebar-toggle:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: var(--sidebar-primary);
}


/* ==============================
   Navigation
   ============================== */

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 14px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.sidebar-section {
  margin-bottom: 18px;
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-section-title {
  margin: 0 10px 7px;
  color: var(--sidebar-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.sidebar-menu {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-menu li {
  margin: 0;
  padding: 0;
}


/* ==============================
   Navigation Item
   ============================== */

.sidebar-link {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--sidebar-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #111827;
}

.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-primary-dark);
  font-weight: 650;
}

.sidebar-link.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  background: var(--sidebar-primary);
  border-radius: 0 4px 4px 0;
}

.sidebar-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: #6b7280;
}

.sidebar-link:hover .sidebar-icon {
  color: #374151;
}

.sidebar-link.active .sidebar-icon {
  color: var(--sidebar-primary);
}

.sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout {
  color: #b91c1c;
}

.sidebar-logout .sidebar-icon {
  color: #dc2626;
}

.sidebar-logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}


/* ==============================
   Footer
   ============================== */

.sidebar-footer {
  padding: 12px;
  background: #ffffff;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-theme-label {
  color: var(--sidebar-muted);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-theme-options {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-option {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.theme-option:hover {
  border-color: var(--sidebar-primary);
  transform: translateY(-1px);
}

.theme-option.light {
  background: #ffffff;
}

.theme-option.dark {
  background: #111827;
}


/* ==============================
   Collapsed
   ============================== */

.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  justify-content: center;
  height: 104px;
  gap: 8px;
}

.sidebar.collapsed .sidebar-brand {
  flex: none;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-theme-label {
  display: none;
}

.sidebar.collapsed .sidebar-nav {
  padding-left: 9px;
  padding-right: 9px;
}

.sidebar.collapsed .sidebar-section {
  margin-bottom: 12px;
}

.sidebar.collapsed .sidebar-link {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}

.sidebar.collapsed .sidebar-link.active::before {
  top: 7px;
  bottom: 7px;
}

.sidebar.collapsed .sidebar-icon {
  width: 20px;
  height: 20px;
}

.sidebar.collapsed .sidebar-footer {
  padding: 10px;
}

.sidebar.collapsed .sidebar-theme {
  justify-content: center;
}

.sidebar.collapsed .sidebar-theme-options {
  flex-direction: column;
}


/* ==============================
   Tablet / Mobile
   ============================== */

@media (max-width: 768px) {
  .sidebar {
    width: 220px;
  }

  .sidebar.collapsed {
    width: 68px;
  }

  .sidebar.collapsed .sidebar-header {
    height: 96px;
  }

  .sidebar-brand-mark {
    width: 36px;
    height: 36px;
  }

  .sidebar-toggle {
    width: 34px;
    height: 34px;
  }

  .sidebar-link {
    min-height: 44px;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 480px) {
  .sidebar {
    width: 210px;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.07);
  }

  .sidebar.collapsed {
    width: 62px;
  }

  .sidebar-header {
    padding: 10px;
  }

  .sidebar-nav {
    padding: 10px 7px;
  }

  .sidebar.collapsed .sidebar-nav {
    padding-left: 6px;
    padding-right: 6px;
  }

  .sidebar.collapsed .sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 12px;
  }

  .sidebar.collapsed .sidebar-toggle {
    width: 32px;
    height: 32px;
  }

  .sidebar.collapsed .sidebar-link {
    min-height: 42px;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar * {
    transition: none !important;
  }
}.widget {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding: 10px;
  -webkit-box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.47);
  box-shadow: 2px 4px 10px 1px rgba(201, 201, 201, 0.47);
  border-radius: 10px;
  height: 100px;
  max-width: 550px;
}
.widget .left,
.widget .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.widget .left .title,
.widget .right .title {
  font-weight: bold;
  font-size: 14px;
  color: rgb(160, 160, 160);
}
.widget .left .counter,
.widget .right .counter {
  font-size: 28px;
  font-weight: 300;
}
.widget .left .link,
.widget .right .link {
  width: max-content;
  font-size: 13px;
  border-bottom: 1px solid gray;
}
.widget .left .link a,
.widget .right .link a {
  text-decoration: none;
  color: black;
}
.widget .left .percentage,
.widget .right .percentage {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.widget .left .percentage.positive,
.widget .right .percentage.positive {
  color: green;
}
.widget .left .percentage.negative,
.widget .right .percentage.negative {
  color: red;
}
.widget .left .icon,
.widget .right .icon {
  font-size: 28px;
  padding: 5px;
  border-radius: 5px;
  align-self: flex-end;
}
@media (min-width: 1068px) {
  .widget {
    max-width: 650px;
  }
}/* General styling for the Home component */
.home {
    display: flex;
 }

/* Sidebar styles */
.home .Sidebar {
    flex: 1;
}

/* Main container styling */
.homeContainer {
    flex: 4; /* Larger area for the main content */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Add spacing between sections */
}

/* Widget section styling */
.widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible grid layout */
    gap: 20px; /* Space between widgets */
}

/* Low Stock Products section container */
.db-ls-container {
    background-color: #ffffff; /* White background for better contrast */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 20px;
}

.db-ls-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.db-ls-title {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Dark gray for better readability */
}

/* Responsive Design */
@media (max-width: 768px) {
    .homeContainer {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .widgets {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Smaller widget sizes */
    }

    .db-ls-container {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .db-ls-title {
        font-size: 16px; /* Slightly smaller font for titles */
    }
}

@media (max-width: 480px) {
    .widgets {
        grid-template-columns: 1fr; 
        gap: 5px; /* Reduce gap for compact layout */
    }

    .db-ls-container {
        padding: 5px;
    }

    .db-ls-title {
        font-size: 12px;
    }
}
/* ==============================
   Login
   ============================== */

.login {
  --login-text: #111827;
  --login-muted: #6b7280;

  --login-border: #e5e7eb;
  --login-border-dark: #d1d5db;

  --login-primary: #ff8c00;
  --login-primary-hover: #e67e00;
  --login-primary-soft: #fff7ed;

  --login-focus: rgba(255, 140, 0, 0.16);

  position: relative;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  background-image: url("/assets/inventory-bg-BcjNmWr4.png");

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px 20px;

  overflow: hidden;

  color: var(--login-text);
}

.login,
.login * {
  box-sizing: border-box;
}

/* ==============================
   Background Overlay
   ============================== */

.login-overlay {
  position: absolute;
  inset: 0;

  /* background: linear-gradient(135deg,rgba(246, 247, 249, 0.88),rgba(255, 255, 255, 0.68)); */

  pointer-events: none;
}

/* ==============================
   Card
   ============================== */

.login-container {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 430px;

  padding: 34px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(229, 231, 235, 0.95);

  border-radius: 16px;

  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.1);

  backdrop-filter: blur(8px);
}

/* ==============================
   Branding
   ============================== */

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.logo-container {
  width: 78px;
  height: 78px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 11px;

  background: var(--login-primary-soft);

  border: 1px solid #fed7aa;
  border-radius: 16px;
}

.lf-icon {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.login-brand-copy {
  margin-top: 17px;
}

.login-brand-name {
  display: inline-block;

  margin-bottom: 5px;

  color: var(--login-primary-hover);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lf-title {
  margin: 0;

  color: var(--login-text);

  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
}

/* ==============================
   Form
   ============================== */

.lf-form {
  display: flex;
  flex-direction: column;

  gap: 17px;

  margin-top: 12px;
}

.lf-input-group {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

.lf-input-group label {
  color: #374151;

  font-size: 12px;
  font-weight: 600;
}

.lf-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

/* ==============================
   Inputs
   ============================== */

.lf-input-wrap {
  position: relative;

  width: 100%;
  min-width: 0;
}

.lf-input-icon {
  position: absolute;

  top: 50%;
  left: 13px;

  color: #9ca3af;

  font-size: 16px;

  pointer-events: none;

  transform: translateY(-50%);
}

.lf-input {
  width: 100%;
  min-width: 0;
  height: 44px;

  padding: 10px 13px 10px 40px;

  background: #ffffff;

  border: 1px solid var(--login-border-dark);

  border-radius: 9px;

  color: var(--login-text);

  font-family: inherit;
  font-size: 14px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.lf-input::placeholder {
  color: #9ca3af;
}

.lf-input:hover:not(:disabled) {
  border-color: #9ca3af;
}

.lf-input:focus {
  border-color: var(--login-primary);

  box-shadow: 0 0 0 3px var(--login-focus);
}

.lf-input:disabled {
  background: #f3f4f6;

  color: #6b7280;

  cursor: not-allowed;
}

.lf-password-input {
  padding-right: 46px;
}

/* ==============================
   Password Toggle
   ============================== */

.lf-toggle-password {
  position: absolute;

  top: 50%;
  right: 7px;

  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 7px;

  color: #6b7280;

  font-size: 16px;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lf-toggle-password:hover:not(:disabled) {
  background: var(--login-primary-soft);

  color: var(--login-primary-hover);
}

.lf-toggle-password:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

/* ==============================
   Forgot Password
   ============================== */

.lf-forgot-link {
  color: var(--login-primary-hover);

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;
}

.lf-forgot-link:hover {
  text-decoration: underline;
}

/* ==============================
   Login Button
   ============================== */

.lf-login-button {
  width: 100%;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 2px;
  padding: 10px 16px;

  background: var(--login-primary);

  border: 1px solid var(--login-primary);

  border-radius: 9px;

  color: #ffffff;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.lf-login-button:hover:not(:disabled) {
  background: var(--login-primary-hover);

  border-color: var(--login-primary-hover);

  transform: translateY(-1px);
}

.lf-login-button:disabled {
  opacity: 0.65;

  cursor: not-allowed;
  transform: none;
}

/* ==============================
   Footer
   ============================== */

.login-footer {
  margin-top: 24px;
  padding-top: 17px;

  border-top: 1px solid var(--login-border);

  color: var(--login-muted);

  font-size: 10px;
  line-height: 1.5;

  text-align: center;
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 520px) {
  .login {
    align-items: center;

    padding: 18px 14px;
  }

  .login-container {
    max-width: 100%;

    padding: 27px 20px;

    border-radius: 13px;
  }

  .logo-container {
    width: 68px;
    height: 68px;

    border-radius: 14px;
  }

  .lf-title {
    font-size: 20px;
  }

  /*
   * 16px avoids iOS input zoom.
   */
  .lf-input {
    height: 46px;

    font-size: 16px;
  }

  .lf-login-button {
    min-height: 46px;
  }
}

/* ==============================
   Very Small Screens
   ============================== */

@media (max-width: 360px) {
  .login {
    padding: 10px;
  }

  .login-container {
    padding: 24px 16px;
  }

  .lf-label-row {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .login *,
  .login *::before,
  .login *::after {
    transition: none !important;
    animation: none !important;
  }
}
.app.dark {
  background-color: #111;
  color: rgb(156, 156, 156);
}
.app.dark .chartGrid {
  stroke: rgba(228, 228, 228, 0.219);
}
.app.dark .table {
  background-color: #111;
}
.app.dark .table .tableCell {
  color: gray;
}
.app.dark .navbar {
  color: #999;
  border-color: #333;
}
.app.dark .navbar .search {
  border-color: gray;
}
.app.dark .sidebar {
  background-color: #111;
  border-color: #333;
}
.app.dark .sidebar .top .logo {
  color: #999;
}
.app.dark .sidebar hr {
  border-color: #333;
}
.app.dark .sidebar ul li:hover {
  background-color: #333;
}
.app.dark .sidebar ul li .icon {
  color: #999;
}
.app.dark .sidebar ul li span {
  color: #999;
}
.app.dark .datatable .datagrid {
  color: gray;
  border: none;
}
.app.dark .datatable .datagrid .viewButton,
.app.dark .datatable .datagrid .deleteButton,
.app.dark .datatable .datagrid .cellWithStatus {
  color: gray;
  border: none;
}
.app.dark input {
  background-color: transparent;
  color: white;
}/* ==============================
   Employee Page
   ============================== */

.employee-page {
  --employee-bg: #f6f7f9;
  --employee-card: #ffffff;
  --employee-text: #111827;
  --employee-muted: #6b7280;
  --employee-border: #e5e7eb;
  --employee-border-dark: #d1d5db;
  --employee-primary: #ff8c00;
  --employee-primary-hover: #e67e00;
  --employee-primary-soft: #fff7ed;
  --employee-focus: rgba(255, 140, 0, 0.16);
  --employee-danger: #dc2626;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--employee-bg);
  color: var(--employee-text);
}

.employee-page,
.employee-page * {
  box-sizing: border-box;
}

.employee-content {
  flex: 1;
  min-width: 0;
}

.employee-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.employee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.employee-header h1 {
  margin: 0;
  color: var(--employee-primary);
  font-size: 26px;
  font-weight: 700;
}

.employee-header p {
  margin: 7px 0 0;
  color: var(--employee-muted);
  font-size: 14px;
}


/* ==============================
   Buttons
   ============================== */

.employee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--employee-border-dark);
  border-radius: 9px;
  color: var(--employee-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.employee-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.employee-btn.primary {
  background: var(--employee-primary);
  border-color: var(--employee-primary);
  color: #ffffff;
}

.employee-btn.primary:hover {
  background: var(--employee-primary-hover);
  border-color: var(--employee-primary-hover);
}

.employee-btn.ghost {
  min-width: 84px;
}

.employee-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}


/* ==============================
   Search
   ============================== */

.employee-toolbar {
  margin-bottom: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);
}

.employee-search {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.employee-search label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.employee-search-control {
  position: relative;
}

.employee-search-control input {
  width: 100%;
  height: 42px;
  padding: 9px 42px 9px 38px;
  background: #f9fafb;
  border: 1px solid var(--employee-border);
  border-radius: 9px;
  color: var(--employee-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.employee-search-control input:hover {
  border-color: var(--employee-border-dark);
}

.employee-search-control input:focus {
  background: #ffffff;
  border-color: var(--employee-primary);
  box-shadow: 0 0 0 3px var(--employee-focus);
}

.employee-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #9ca3af;
  transform: translateY(-50%);
  pointer-events: none;
}

.employee-search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(-50%);
}

.employee-search-clear:hover {
  background: #f3f4f6;
  color: #111827;
}


/* ==============================
   Loading
   ============================== */

.employee-state {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 12px;
  color: var(--employee-muted);
  font-size: 14px;
}

.employee-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #f3f4f6;
  border-top-color: var(--employee-primary);
  border-radius: 50%;
  animation: employee-spin 0.7s linear infinite;
}

@keyframes employee-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ==============================
   Table Card
   ============================== */

.employee-table-card {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.employee-table-meta {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--employee-border);
  color: var(--employee-muted);
  font-size: 13px;
}

.employee-table-meta strong {
  color: var(--employee-text);
}

.employee-searching {
  font-size: 12px;
}


/* ==============================
   Table
   ============================== */

.employee-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.employee-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.employee-table th {
  padding: 12px 13px;
  background: #fafafa;
  border-bottom: 1px solid var(--employee-border);
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.employee-table td {
  padding: 10px 13px;
  border-bottom: 1px solid #f0f0f0;
  color: #374151;
  vertical-align: middle;
}

.employee-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.015);
}

.employee-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.055);
}

.employee-table tbody tr:last-child td {
  border-bottom: 0;
}


/* ==============================
   Employee Profile
   ============================== */

.employee-profile {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.employee-avatar-button,
.employee-avatar-placeholder {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}

.employee-avatar-button {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  cursor: pointer;
}

.employee-avatar-button:hover {
  border-color: var(--employee-primary);
}

.employee-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-avatar-placeholder {
  background: #f3f4f6;
  border: 1px solid var(--employee-border);
  color: #9ca3af;
  font-size: 20px;
}

.employee-profile-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.employee-profile-details strong {
  max-width: 260px;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-mobile-email {
  display: none;
  max-width: 220px;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==============================
   Role / Employment
   ============================== */

.employee-role {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #fff7ed;
  border-radius: 999px;
  color: #c2410c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.employee-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #f3f4f6;
  border-radius: 999px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.employee-email {
  color: #374151;
  text-decoration: none;
}

.employee-email:hover {
  color: var(--employee-primary-hover);
  text-decoration: underline;
}


/* ==============================
   Actions
   ============================== */

.employee-actions-heading {
  width: 120px;
  text-align: center !important;
}

.employee-table-actions {
  width: 120px;
  white-space: nowrap;
}

.employee-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 7px;
  color: #6b7280;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.employee-action:last-child {
  margin-right: 0;
}

.employee-action.view:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.employee-action.edit:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.employee-action.delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--employee-danger);
}


/* ==============================
   Empty
   ============================== */

.employee-empty {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--employee-muted);
}

.employee-empty svg {
  margin-bottom: 3px;
  color: #c4c9d1;
  font-size: 24px;
}

.employee-empty strong {
  color: #374151;
  font-size: 14px;
}

.employee-empty span {
  font-size: 12px;
}


/* ==============================
   Pagination
   ============================== */

.employee-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fafafa;
  border-top: 1px solid var(--employee-border);
  color: var(--employee-muted);
  font-size: 13px;
}

.employee-pagination strong {
  color: #374151;
}

.employee-pagination-buttons {
  display: flex;
  gap: 8px;
}


/* ==============================
   Image Overlay
   ============================== */

.employee-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(3px);
}

.employee-image-enlarged {
  max-width: min(600px, 90vw);
  max-height: 85vh;
  object-fit: contain;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.employee-image-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  color: #111827;
  font-size: 24px;
  cursor: pointer;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 900px) {
  .employee-container {
    padding: 20px;
  }

  .hide-tablet {
    display: none;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 600px) {
  .employee-container {
    padding: 14px;
  }

  .employee-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .employee-header h1 {
    font-size: 22px;
  }

  .employee-header p {
    font-size: 13px;
  }

  .employee-header .employee-btn {
    width: 100%;
  }

  .employee-toolbar {
    padding: 14px;
  }

  .employee-search {
    max-width: none;
  }

  .employee-search-control input {
    height: 44px;
    font-size: 16px;
  }

  .employee-table-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hide-mobile {
    display: none;
  }

  .employee-mobile-email {
    display: block;
  }

  .employee-table {
    min-width: 500px;
    font-size: 13px;
  }

  .employee-table th {
    padding: 10px;
    font-size: 12px;
  }

  .employee-table td {
    padding: 9px 10px;
  }

  .employee-profile {
    min-width: 220px;
  }

  .employee-avatar-button,
  .employee-avatar-placeholder {
    width: 40px;
    height: 40px;
  }

  .employee-actions-heading,
  .employee-table-actions {
    width: 112px;
  }

  .employee-action {
    width: 29px;
    height: 29px;
  }

  .employee-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .employee-pagination-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .employee-pagination-buttons .employee-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .employee-container {
    padding: 10px;
  }

  .employee-header h1 {
    font-size: 20px;
  }

  .employee-toolbar,
  .employee-table-card {
    border-radius: 10px;
  }

  .employee-table {
    min-width: 470px;
  }

  .employee-profile {
    min-width: 195px;
  }

  .employee-profile-details strong {
    max-width: 145px;
  }

  .employee-mobile-email {
    max-width: 145px;
  }

  .employee-image-overlay {
    padding: 14px;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .employee-page *,
  .employee-page *::before,
  .employee-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   Edit Employee Page
   ============================== */

.edit-employee-page {
  --ee-bg: #f6f7f9;
  --ee-card: #ffffff;
  --ee-text: #111827;
  --ee-muted: #6b7280;
  --ee-border: #e5e7eb;
  --ee-border-dark: #d1d5db;
  --ee-primary: #ff8c00;
  --ee-primary-hover: #e67e00;
  --ee-primary-soft: #fff7ed;
  --ee-focus: rgba(255, 140, 0, 0.16);
  --ee-danger: #dc2626;
  --ee-success: #15803d;

  width: 100%;
  min-height: 100vh;

  display: flex;

  background: var(--ee-bg);
  color: var(--ee-text);
}

.edit-employee-page,
.edit-employee-page * {
  box-sizing: border-box;
}


/* ==============================
   Main Content
   ============================== */

.edit-employee-content {
  flex: 1;
  min-width: 0;
}

.edit-employee-container {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.edit-employee-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 20px;
}

.edit-employee-header h1 {
  margin: 10px 0 0;

  color: var(--ee-primary);

  font-size: 26px;
  font-weight: 700;
}

.edit-employee-header p {
  margin: 7px 0 0;

  color: var(--ee-muted);

  font-size: 14px;
}

.edit-employee-back {
  display: inline-flex;
  align-items: center;

  gap: 6px;
  padding: 0;

  background: transparent;
  border: 0;

  color: var(--ee-muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.edit-employee-back:hover {
  color: var(--ee-primary-hover);
}


/* ==============================
   Main Card
   ============================== */

.edit-employee-card {
  display: grid;

  grid-template-columns:
    285px minmax(0, 1fr);

  overflow: hidden;

  background: var(--ee-card);

  border: 1px solid var(--ee-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Photo Sidebar
   ============================== */

.edit-employee-photo {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 28px 20px;

  background: #fafafa;

  border-right: 1px solid var(--ee-border);
}

.edit-employee-photo-preview {
  width: 170px;
  height: 170px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--ee-border);
  border-radius: 14px;

  color: #c4c9d1;

  font-size: 66px;
}

.edit-employee-photo-preview img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.edit-employee-photo-info {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 4px;
  margin-top: 16px;

  text-align: center;
}

.edit-employee-photo-info strong {
  color: var(--ee-text);

  font-size: 15px;
  font-weight: 700;
}

.edit-employee-photo-info span {
  color: var(--ee-muted);

  font-size: 12px;
  line-height: 1.45;
}


/* ==============================
   Upload Button
   ============================== */

.edit-employee-upload-btn {
  min-height: 40px;

  width: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 18px;
  padding: 9px 14px;

  background: #ffffff;

  border: 1px solid var(--ee-border-dark);
  border-radius: 9px;

  color: var(--ee-text);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.edit-employee-upload-btn:hover {
  background: var(--ee-primary-soft);

  border-color: #fed7aa;

  color: var(--ee-primary-hover);
}

.edit-employee-upload-btn.disabled {
  opacity: 0.5;

  pointer-events: none;
}

.edit-employee-file-input {
  display: none;
}


/* ==============================
   Selected File
   ============================== */

.edit-employee-selected-file {
  width: 100%;

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

  gap: 8px;

  margin-top: 10px;
  padding: 9px 10px;

  background: #ffffff;

  border: 1px solid var(--ee-border);
  border-radius: 8px;
}

.edit-employee-selected-file span {
  min-width: 0;

  flex: 1;

  overflow: hidden;

  color: #4b5563;

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-employee-selected-file button {
  padding: 0;

  background: transparent;
  border: 0;

  color: var(--ee-danger);

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}


/* ==============================
   Upload Progress
   ============================== */

.edit-employee-upload-progress {
  width: 100%;

  margin-top: 12px;
}

.edit-employee-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 6px;

  color: var(--ee-muted);

  font-size: 11px;
}

.edit-employee-progress-header strong {
  color: var(--ee-primary-hover);
}


/* ==============================
   Form Side
   ============================== */

.edit-employee-form {
  min-width: 0;

  padding: 28px;
}


/* ==============================
   Section Header
   ============================== */

.edit-employee-section-header {
  margin-bottom: 16px;
}

.edit-employee-section-header h2 {
  margin: 0;

  color: var(--ee-text);

  font-size: 17px;
  font-weight: 700;
}

.edit-employee-section-header p {
  margin: 5px 0 0;

  color: var(--ee-muted);

  font-size: 12px;
}


/* ==============================
   Form Grid
   ============================== */

.edit-employee-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.edit-employee-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

.edit-employee-field.full-width {
  grid-column: 1 / -1;
}

.edit-employee-field label {
  color: #374151;

  font-size: 12px;
  font-weight: 600;
}

.edit-employee-field label span {
  color: var(--ee-danger);
}

.edit-employee-field input,
.edit-employee-field select {
  width: 100%;
  min-width: 0;

  height: 42px;

  padding: 9px 12px;

  background: #ffffff;

  border: 1px solid var(--ee-border);
  border-radius: 9px;

  color: var(--ee-text);

  font-family: inherit;
  font-size: 13px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.edit-employee-field input:hover:not(:disabled),
.edit-employee-field select:hover:not(:disabled) {
  border-color: var(--ee-border-dark);
}

.edit-employee-field input:focus,
.edit-employee-field select:focus {
  border-color: var(--ee-primary);

  box-shadow:
    0 0 0 3px var(--ee-focus);
}

.edit-employee-field input:disabled,
.edit-employee-field select:disabled {
  background: #f3f4f6;

  color: #6b7280;

  cursor: not-allowed;
}


/* ==============================
   Divider
   ============================== */

.edit-employee-divider {
  height: 1px;

  margin: 26px 0;

  background: var(--ee-border);
}


/* ==============================
   Actions
   ============================== */

.edit-employee-actions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 28px;
  padding-top: 18px;

  border-top: 1px solid var(--ee-border);
}


/* ==============================
   Buttons
   ============================== */

.edit-employee-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 9px 14px;

  background: #ffffff;

  border: 1px solid var(--ee-border-dark);
  border-radius: 9px;

  color: var(--ee-text);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.edit-employee-btn:hover:not(:disabled) {
  background: #f9fafb;

  border-color: #9ca3af;

  transform: translateY(-1px);
}

.edit-employee-btn.primary {
  background: var(--ee-primary);

  border-color: var(--ee-primary);

  color: #ffffff;
}

.edit-employee-btn.primary:hover:not(:disabled) {
  background: var(--ee-primary-hover);

  border-color: var(--ee-primary-hover);
}

.edit-employee-btn.ghost {
  background: #ffffff;
}

.edit-employee-btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}


/* ==============================
   Loading State
   ============================== */

.edit-employee-state {
  min-height: 360px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 32px;

  background: #ffffff;

  border: 1px solid var(--ee-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);

  color: var(--ee-muted);

  text-align: center;
}

.edit-employee-state > svg {
  width: 62px;
  height: 62px;

  padding: 16px;

  margin-bottom: 8px;

  background: var(--ee-primary-soft);

  border-radius: 50%;

  color: var(--ee-primary);
}

.edit-employee-state strong {
  color: var(--ee-text);

  font-size: 16px;
}

.edit-employee-state span {
  max-width: 380px;

  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .edit-employee-container {
    padding: 20px;
  }

  .edit-employee-card {
    grid-template-columns:
      230px minmax(0, 1fr);
  }

  .edit-employee-photo {
    padding: 24px 16px;
  }

  .edit-employee-photo-preview {
    width: 130px;
    height: 130px;

    font-size: 52px;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .edit-employee-container {
    padding: 14px;
  }

  .edit-employee-header h1 {
    font-size: 22px;
  }

  .edit-employee-card {
    grid-template-columns: 1fr;
  }

  .edit-employee-photo {
    border-right: 0;

    border-bottom: 1px solid var(--ee-border);
  }

  .edit-employee-form {
    padding: 18px;
  }

  .edit-employee-form-grid {
    grid-template-columns: 1fr;
  }

  .edit-employee-field.full-width {
    grid-column: auto;
  }

  .edit-employee-field input,
  .edit-employee-field select {
    height: 44px;

    font-size: 16px;
  }

  .edit-employee-actions {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .edit-employee-actions
    .edit-employee-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .edit-employee-container {
    padding: 10px;
  }

  .edit-employee-header h1 {
    font-size: 20px;
  }

  .edit-employee-card,
  .edit-employee-state {
    border-radius: 10px;
  }

  .edit-employee-photo {
    padding: 20px 14px;
  }

  .edit-employee-form {
    padding: 15px;
  }

  .edit-employee-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .edit-employee-page *,
  .edit-employee-page *::before,
  .edit-employee-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   My Profile Page
   ============================== */

.profile-page {
  --profile-bg: #f6f7f9;
  --profile-card: #ffffff;

  --profile-text: #111827;
  --profile-muted: #6b7280;

  --profile-border: #e5e7eb;
  --profile-border-dark: #d1d5db;

  --profile-primary: #ff8c00;
  --profile-primary-hover: #e67e00;
  --profile-primary-soft: #fff7ed;
  --profile-focus: rgba(255, 140, 0, 0.16);

  --profile-danger: #dc2626;
  --profile-success: #15803d;

  width: 100%;
  min-height: 100vh;

  display: flex;

  background: var(--profile-bg);
  color: var(--profile-text);
}

.profile-page,
.profile-page * {
  box-sizing: border-box;
}


/* ==============================
   Main Content
   ============================== */

.profile-container {
  flex: 1;
  min-width: 0;

  width: 100%;
  max-width: 1250px;

  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 20px;
}

.profile-header h1 {
  margin: 10px 0 0;

  color: var(--profile-primary);

  font-size: 26px;
  font-weight: 700;
}

.profile-header p {
  margin: 7px 0 0;

  color: var(--profile-muted);

  font-size: 14px;
}

.profile-back {
  display: inline-flex;
  align-items: center;

  gap: 6px;
  padding: 0;

  background: transparent;

  border: 0;

  color: var(--profile-muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.profile-back:hover {
  color: var(--profile-primary-hover);
}


/* ==============================
   Buttons
   ============================== */

.profile-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 14px;

  background: #ffffff;

  border: 1px solid var(--profile-border-dark);
  border-radius: 9px;

  color: var(--profile-text);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.profile-btn:hover {
  background: #f9fafb;

  border-color: #9ca3af;

  transform: translateY(-1px);
}

.profile-btn.primary {
  background: var(--profile-primary);

  border-color: var(--profile-primary);

  color: #ffffff;
}

.profile-btn.primary:hover {
  background: var(--profile-primary-hover);

  border-color: var(--profile-primary-hover);
}

.profile-btn.ghost {
  background: #ffffff;
}


/* ==============================
   Main Card
   ============================== */

.profile-card {
  display: grid;

  grid-template-columns:
    285px minmax(0, 1fr);

  overflow: hidden;

  background: var(--profile-card);

  border: 1px solid var(--profile-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Sidebar
   ============================== */

.profile-sidebar {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 28px 20px;

  background: #fafafa;

  border-right: 1px solid var(--profile-border);
}


/* ==============================
   Profile Image
   ============================== */

.profile-wrapper {
  position: relative;

  width: 170px;
  height: 170px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--profile-border);
  border-radius: 14px;

  color: #c4c9d1;

  font-size: 66px;
}

.profile-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.profile-icon {
  width: 66px;
  height: 66px;

  color: #c4c9d1;
}

.profile-image-fallback {
  position: absolute;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  color: #c4c9d1;

  font-size: 66px;
}

.profile-wrapper.image-error
  .profile-image {
  display: none;
}

.profile-wrapper.image-error
  .profile-image-fallback {
  display: flex;
}


/* ==============================
   Summary
   ============================== */

.profile-summary {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 4px;
  margin-top: 16px;

  text-align: center;
}

.profile-summary strong {
  color: var(--profile-text);

  font-size: 15px;
  line-height: 1.35;

  overflow-wrap: anywhere;
}

.profile-summary span {
  color: var(--profile-muted);

  font-size: 12px;

  overflow-wrap: anywhere;
}


/* ==============================
   Role
   ============================== */

.profile-role {
  width: 100%;

  margin-top: 18px;
  padding: 12px;

  background: #ffffff;

  border: 1px solid var(--profile-border);
  border-radius: 10px;

  text-align: center;
}

.profile-role span {
  display: block;

  margin-bottom: 4px;

  color: var(--profile-muted);

  font-size: 11px;
  font-weight: 600;
}

.profile-role strong {
  color: var(--profile-primary-hover);

  font-size: 15px;
  font-weight: 700;
}


/* ==============================
   Sidebar Meta
   ============================== */

.profile-sidebar-meta {
  width: 100%;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 1px solid var(--profile-border);

  text-align: center;
}

.profile-sidebar-meta span {
  display: block;

  margin-bottom: 5px;

  color: var(--profile-muted);

  font-size: 10px;
  font-weight: 600;
}

.profile-sidebar-meta strong {
  display: block;

  color: #374151;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* ==============================
   Details
   ============================== */

.profile-details {
  min-width: 0;

  padding: 28px;
}


/* ==============================
   Section Header
   ============================== */

.profile-section-header {
  margin-bottom: 16px;
}

.profile-section-header h2 {
  margin: 0;

  color: var(--profile-text);

  font-size: 17px;
  font-weight: 700;
}

.profile-section-header p {
  margin: 5px 0 0;

  color: var(--profile-muted);

  font-size: 12px;
}


/* ==============================
   Grid
   ============================== */

.profile-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


/* ==============================
   Fields
   ============================== */

.profile-field {
  min-width: 0;

  padding: 12px 13px;

  background: #fafafa;

  border: 1px solid var(--profile-border);
  border-radius: 9px;

  color: #374151;

  font-size: 14px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}

.profile-field.profile-full {
  grid-column: 1 / -1;
}

.profile-label {
  display: block;

  margin-bottom: 5px;

  color: var(--profile-muted);

  font-size: 11px;
  font-weight: 600;
}


/* ==============================
   Divider
   ============================== */

.profile-divider {
  height: 1px;

  margin: 26px 0;

  background: var(--profile-border);
}


/* ==============================
   Actions
   ============================== */

.profile-actions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 28px;
  padding-top: 18px;

  border-top: 1px solid var(--profile-border);
}


/* ==============================
   Loading / Not Found
   ============================== */

.profile-state {
  min-height: 360px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 32px;

  background: #ffffff;

  border: 1px solid var(--profile-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);

  color: var(--profile-muted);

  text-align: center;
}

.profile-state-icon {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;

  background: var(--profile-primary-soft);

  border-radius: 50%;

  color: var(--profile-primary);

  font-size: 28px;
}

.profile-state strong {
  color: var(--profile-text);

  font-size: 16px;
}

.profile-state span {
  max-width: 380px;

  margin: 6px 0 18px;

  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .profile-container {
    padding: 20px;
  }

  .profile-card {
    grid-template-columns:
      230px minmax(0, 1fr);
  }

  .profile-sidebar {
    padding: 24px 16px;
  }

  .profile-wrapper {
    width: 130px;
    height: 130px;

    font-size: 52px;
  }

  .profile-icon {
    width: 52px;
    height: 52px;
  }

  .profile-image-fallback {
    font-size: 52px;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .profile-container {
    padding: 14px;
  }

  .profile-header {
    flex-direction: column;
    align-items: stretch;

    gap: 14px;
  }

  .profile-header h1 {
    font-size: 22px;
  }

  .profile-header
    .profile-btn {
    width: 100%;
  }

  .profile-card {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    border-right: 0;

    border-bottom: 1px solid var(--profile-border);
  }

  .profile-details {
    padding: 18px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-field.profile-full {
    grid-column: auto;
  }

  .profile-actions {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .profile-actions
    .profile-btn {
    width: 100%;
  }

  .profile-actions
    .profile-btn:last-child {
    grid-column: 1 / -1;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .profile-container {
    padding: 10px;
  }

  .profile-header h1 {
    font-size: 20px;
  }

  .profile-card,
  .profile-state {
    border-radius: 10px;
  }

  .profile-sidebar {
    padding: 20px 14px;
  }

  .profile-details {
    padding: 15px;
  }

  .profile-actions {
    grid-template-columns: 1fr;
  }

  .profile-actions
    .profile-btn:last-child {
    grid-column: auto;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .profile-page *,
  .profile-page *::before,
  .profile-page *::after {
    transition: none !important;
    animation: none !important;
  }
}.containerReset {
    display: flex;
    background-image: url("/assets/inventory-bg-BcjNmWr4.png");
    height: 100vh;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;

}

.containerReset .card {
    width: 90%;
    max-width: 500px;
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}


.card-body {
    padding: 20px;
    text-align: center;
}

.password-reset-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.password-reset-form {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.resetInput {
    padding: 10px 15px;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.btnSubmit {
    width: 100%;
    padding: 10px;
    background-color: #7451f8;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btnSubmit:hover {
    background-color: #4d36e2;
}

.error-text {
    color: rgb(237, 77, 77);
    font-weight: 500;
    font-size: 18px;
}


.fp-text-muted {
    color: #7451f8;
    font-weight: bold;
}



@media (max-width: 968px) {
    .containerReset .card {
        width: 100%;
        margin: 10px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .btnSubmit {
        font-size: 0.9rem;
    }

    .resetInput {
        padding: 8px;
    }

}

@media (max-width: 480px) {
    .card-body {
        padding: 15px;
    }

    .card-title {
        font-size: 1rem;
    }

    .btnSubmit {
        padding: 8px;
        font-size: 0.85rem;
    }
}/* CSS for ChangePassword Component */
.change-password-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.change-password-container .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.change-password-container .password-card {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #ddd;
    margin: 50px auto;
    padding: 30px 40px;
}

.change-password-container .password-card h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
}

.change-password-container .password-card form {
    display: flex;
    flex-direction: column;
}

.change-password-container .password-card form label {
    text-align: left;
    margin: 10px 0 5px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.change-password-container .password-card form input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

.change-password-container .password-card form input:focus {
    border-color: #007bff;
}

.change-password-container .password-card form button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.change-password-container .password-card form button:disabled {
    background-color: #999999;
    cursor: not-allowed;
}

.change-password-container .password-card form button:hover:enabled {
    background-color: #0056b3;
}

.change-password-container .password-card .btn-back {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background-color: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.change-password-container .password-card .btn-back:hover {
    background-color: #d6d6d6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .change-password-container .password-card {
        margin: 20px auto;
        padding: 20px 15px;
    }

    .change-password-container .password-card h2 {
        font-size: 20px;
    }

    .change-password-container .password-card form input {
        font-size: 12px;
        padding: 8px;
    }

    .change-password-container .password-card form button,
    .change-password-container .password-card .btn-back {
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .change-password-container {
        flex-direction: column;
        align-items: stretch;
    }

    .change-password-container .password-card {
        padding: 15px 10px;
    }

    .change-password-container .password-card h2 {
        font-size: 18px;
    }

    .change-password-container .password-card form label {
        font-size: 12px;
    }

    .change-password-container .password-card form input {
        font-size: 12px;
        padding: 6px;
    }

    .change-password-container .password-card form button,
    .change-password-container .password-card .btn-back {
        padding: 8px;
        font-size: 12px;
    }
}
.list {
    display: flex;
}

.listContainer {
    flex: 1;
    padding: 20px;
}

.table-wrapper {
 overflow-y: auto;

}
.styled-table {
    border-collapse: collapse;
    margin: auto;
    font-size: 0.9em;
    font-family: sans-serif;
    max-width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background-color: white;
    border: 1px solid #ccc;

}

.styled-table thead tr {
    background-color: #7f7de5;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #4e7ac4;
}
.styled-table tbody tr:hover {
    background-color: lavender;
}

.btn {
    border: none;
    color: white;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btn-edit {
    background-color: #008cba;
}

.btn-delete {
    background-color: #f44336;
}

.btn-view {
    background-color: #e7e7e7;
    color: black;
}

.edit-icon,
.view-icon,
.delete-icon,
.add-icon,
.sub-icon {
    margin-left: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;

}
.view-icon{
    width: 23px;
    height: 23px;
    color: #091412;
}

.edit-icon {
    color: rgb(8, 135, 46);

}
.delete-icon {
  color: rgb(230, 24, 24);

}
.add-icon {
    color: rgb(9, 57, 250);

}
.sub-icon {
  color: rgb(231, 106, 10);

}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  .pagination button {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #f2f2f2;
    border: none;
    transition: background-color 0.3s;
  }
  .pagination button.active,
.pagination button:hover {
    background-color: #444cc6;
    color: white
}

  .pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .load-more {
    text-align: center;
    margin-top: 20px;
}

.load-more button {
    background-color: #6563d1;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.load-more button:hover {
    background-color: #431bb9;
}.settings-page {
  display: flex;
  width: 100%;
}

.settings-container {
  flex: 1;
  padding: 20px;
  border-left: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.top {
  width: 90%;
  display: flex;
  justify-content: center;
}

.dropdown {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}
.dropdown input{
  outline: none;

}
.add-product-type {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.add-product-type input {
  width: calc(100% - 220px);
  min-width: 320px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.add-product-btn {
  width: 120px;
  height: 50px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #7451f8;
  color: white;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.dropdown h3 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

/* Table styles */
.settings-page .styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 16px;
  text-align: center;
}

.settings-page .styled-table th,
.settings-page .styled-table td {
  text-align: center;
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
}

.settings-page .styled-table thead tr {
  background-color: #7451f8;
  color: white;
}

.settings-page .styled-table tbody tr {
  border-bottom: 1px solid #ddd;
}

.settings-page .styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.search-product-type {
  display: flex;
  align-items: center;
  width: 90%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 25px 40px;
}

.search-product-type input {
  flex: 1;
  border: none;
  outline: none;
  width: 100%;
  background-color: transparent;
  padding: 4px;

}



/* Button styles */
.settings-page button {
  width: 130px;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  background-color: #7451f8;
  color: white;
  transition: background-color 0.3s ease;
  margin-top: 5px;

}

.settings-page button:hover {
  background-color: #2a0aa1;
}

.settings-page button.edit {
  background-color: #f0ad4e;
}

.settings-page button.edit:hover {
  background-color: #ec971f;
}

.settings-page button.delete {
  background-color: #dc3545;
}

.settings-page button.delete:hover {
  background-color: #c82333;
}

.settings-page button.save {
  background-color: #28a745;
}

.settings-page button.save:hover {
  background-color: #218838;
}

.settings-page button.cancel {
  background-color: #6c757d;
}

.settings-page button.cancel:hover {
  background-color: #5a6268;
}

/* For tablets and smaller devices */
@media (max-width: 768px) {
  .settings-page {
    flex-direction: column;
  }

  .settings-container {
    padding: 15px;
    width: 100%;
  }

  .dropdown {
    max-width: 100%;
    padding: 15px;
  }

  .add-product-type {
    flex-direction: column;
    width: 90%;
    margin: 15px 10px;
    }
  .add-product-btn{
    width: 120px;
  }

.search-product-type{
  width: 90%;
  margin: 15px 10px;

}
.settings-container button {
  font-size: 14px;
  padding: 8px;
  margin-top: 5px;
  width: 120px;
}
}

/* For mobile devices */
@media (max-width: 480px) {
  .settings-container {
    padding: 15px;
  }

  .add-product-type {
    flex-direction: column;
    gap: 8px;
  }

  .add-product-type input,
  .add-product-type button {
    font-size: 14px;
    width: 100%;

  }

 

  input[type="text"] {
    font-size: 14px;
    
  }
}/* ==============================
   Inventory Alert
   ============================== */

.inventory-alert-page {
  --ia-bg: #f6f7f9;
  --ia-card: #ffffff;

  --ia-text: #111827;
  --ia-muted: #6b7280;

  --ia-border: #e5e7eb;
  --ia-border-dark: #d1d5db;

  --ia-primary: #ff8c00;
  --ia-primary-hover: #e67e00;
  --ia-primary-soft: #fff7ed;
  --ia-focus: rgba(255, 140, 0, 0.16);

  --ia-danger: #dc2626;
  --ia-success: #15803d;

  width: 100%;
  min-height: 100vh;

  display: flex;

  background: var(--ia-bg);

  color: var(--ia-text);
}

.inventory-alert-page,
.inventory-alert-page * {
  box-sizing: border-box;
}


/* ==============================
   Content
   ============================== */

.inventory-alert-content {
  flex: 1;
  min-width: 0;
}

.inventory-alert-container {
  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.inventory-alert-header {
  margin-bottom: 20px;
}

.inventory-alert-header h1 {
  margin: 0;

  color: var(--ia-primary);

  font-size: 26px;
  font-weight: 700;
}

.inventory-alert-header p {
  margin: 7px 0 0;

  color: var(--ia-muted);

  font-size: 14px;
}


/* ==============================
   Toolbar
   ============================== */

.inventory-alert-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 16px;
}

.inventory-alert-search {
  position: relative;

  width: min(100%, 560px);

  display: flex;
  align-items: center;
}

.inventory-alert-search > svg {
  position: absolute;

  left: 13px;

  color: #9ca3af;

  font-size: 16px;

  pointer-events: none;
}

.inventory-alert-search input {
  width: 100%;
  height: 42px;

  padding: 9px 72px 9px 39px;

  background: #ffffff;

  border: 1px solid var(--ia-border);
  border-radius: 9px;

  color: var(--ia-text);

  font-family: inherit;
  font-size: 13px;

  outline: none;
}

.inventory-alert-search input:focus {
  border-color: var(--ia-primary);

  box-shadow:
    0 0 0 3px var(--ia-focus);
}

.inventory-alert-search button {
  position: absolute;

  right: 8px;

  padding: 5px 7px;

  background: transparent;

  border: 0;
  border-radius: 6px;

  color: var(--ia-muted);

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.inventory-alert-search button:hover {
  background: #f3f4f6;

  color: var(--ia-text);
}


/* ==============================
   Alert Indicator
   ============================== */

.inventory-alert-indicator {
  min-height: 38px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 7px 11px;

  background: #fef2f2;

  border: 1px solid #fecaca;
  border-radius: 9px;

  color: #b91c1c;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
}


/* ==============================
   Table Card
   ============================== */

.inventory-alert-table-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  background: var(--ia-card);

  border: 1px solid var(--ia-border);
  border-radius: 12px;

  box-shadow:
    0 2px 8px rgba(17, 24, 39, 0.035);
}


/* ==============================
   Horizontal Scroll Only
   ============================== */

.inventory-alert-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}


/* ==============================
   Table
   ============================== */

.inventory-alert-table {
  width: 100%;
  min-width: 1020px;

  border-collapse: collapse;

  font-size: 13px;
}

.inventory-alert-table th {
  padding: 11px 13px;

  background: #fafafa;

  border-bottom:
    1px solid var(--ia-border);

  color: #374151;

  font-size: 12px;
  font-weight: 700;

  text-align: left;

  white-space: nowrap;
}

.inventory-alert-table td {
  padding: 11px 13px;

  border-bottom: 1px solid #f0f0f0;

  color: #4b5563;

  vertical-align: middle;
}

.inventory-alert-table tbody tr:nth-child(even) {
  background: #fcfcfd;
}

.inventory-alert-table tbody tr:hover {
  background:
    rgba(255, 140, 0, 0.045);
}

.inventory-alert-table tbody tr:last-child td {
  border-bottom: 0;
}


/* ==============================
   Product
   ============================== */

.inventory-alert-product {
  min-width: 220px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.inventory-alert-product-image {
  position: relative;

  width: 46px;
  height: 46px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--ia-border);
  border-radius: 8px;

  color: #c4c9d1;

  font-size: 18px;
}

.inventory-alert-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 3px;
}

.inventory-alert-product-image-fallback {
  position: absolute;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;
}

.inventory-alert-product-image.image-error img {
  display: none;
}

.inventory-alert-product-image.image-error
  .inventory-alert-product-image-fallback {
  display: flex;
}

.inventory-alert-product-details {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.inventory-alert-product-details strong {
  max-width: 230px;

  overflow: hidden;

  color: var(--ia-text);

  font-size: 13px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-alert-product-details small {
  color: #9ca3af;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 10px;
}


/* ==============================
   Quantity
   ============================== */

.inventory-alert-quantity {
  min-width: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 9px;

  background: #fef2f2;

  border: 1px solid #fecaca;
  border-radius: 999px;

  color: #b91c1c;

  font-size: 11px;
  font-weight: 700;
}

.inventory-alert-minimum {
  min-width: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 9px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #4b5563;

  font-size: 11px;
  font-weight: 700;
}


/* ==============================
   Code
   ============================== */

.inventory-alert-code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  font-size: 12px;
}


/* ==============================
   Actions
   ============================== */

.inventory-alert-action-heading {
  width: 120px;

  text-align: center !important;
}

.inventory-alert-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
}

.inventory-alert-action {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: #ffffff;

  border: 1px solid var(--ia-border);
  border-radius: 7px;

  color: #6b7280;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.inventory-alert-action.view:hover {
  background: var(--ia-primary-soft);

  border-color: #fed7aa;

  color: var(--ia-primary-hover);
}

.inventory-alert-action.add:hover:not(:disabled) {
  background: #f0fdf4;

  border-color: #bbf7d0;

  color: var(--ia-success);
}

.inventory-alert-action.subtract:hover:not(:disabled) {
  background: #fef2f2;

  border-color: #fecaca;

  color: var(--ia-danger);
}

.inventory-alert-action:disabled {
  opacity: 0.4;

  cursor: not-allowed;
}


/* ==============================
   Pagination
   ============================== */

.inventory-alert-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 14px;

  color: var(--ia-muted);

  font-size: 12px;
}

.inventory-alert-pagination > span strong {
  color: #374151;
}

.inventory-alert-pagination-controls {
  display: flex;
  align-items: center;

  gap: 10px;
}

.inventory-alert-pagination-controls > span {
  min-width: 92px;

  text-align: center;
}

.inventory-alert-pagination-controls button {
  min-height: 34px;

  padding: 7px 11px;

  background: #ffffff;

  border: 1px solid var(--ia-border);
  border-radius: 8px;

  color: #374151;

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.inventory-alert-pagination-controls button:hover:not(:disabled) {
  border-color: var(--ia-primary);

  color: var(--ia-primary-hover);
}

.inventory-alert-pagination-controls button:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}


/* ==============================
   Loading / Empty
   ============================== */

.inventory-alert-state {
  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: #ffffff;

  border: 1px solid var(--ia-border);
  border-radius: 12px;

  color: var(--ia-muted);

  text-align: center;
}

.inventory-alert-state-icon {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  background: var(--ia-primary-soft);

  border-radius: 50%;

  color: var(--ia-primary);

  font-size: 23px;
}

.inventory-alert-state strong {
  color: var(--ia-text);

  font-size: 15px;
}

.inventory-alert-state span {
  max-width: 390px;

  margin-top: 5px;

  font-size: 12px;
  line-height: 1.5;
}

.inventory-alert-state.success
  .inventory-alert-state-icon {
  background: #f0fdf4;

  color: var(--ia-success);
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .inventory-alert-container {
    padding: 14px;
  }

  .inventory-alert-header h1 {
    font-size: 22px;
  }

  .inventory-alert-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-alert-search {
    width: 100%;
  }

  .inventory-alert-search input {
    height: 44px;

    font-size: 16px;
  }

  .inventory-alert-indicator {
    align-self: flex-start;
  }

  .inventory-alert-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-alert-pagination-controls {
    justify-content: space-between;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .inventory-alert-container {
    padding: 10px;
  }

  .inventory-alert-header h1 {
    font-size: 20px;
  }

  .inventory-alert-pagination-controls {
    gap: 6px;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .inventory-alert-page *,
  .inventory-alert-page *::before,
  .inventory-alert-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   New Employee Page
   ============================== */

.new-employee-page {
  --employee-bg: #f6f7f9;
  --employee-card: #ffffff;
  --employee-text: #111827;
  --employee-muted: #6b7280;
  --employee-border: #e5e7eb;
  --employee-border-dark: #d1d5db;
  --employee-primary: #ff8c00;
  --employee-primary-hover: #e67e00;
  --employee-primary-soft: #fff7ed;
  --employee-focus: rgba(255, 140, 0, 0.16);
  --employee-danger: #dc2626;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--employee-bg);
  color: var(--employee-text);
}

.new-employee-page,
.new-employee-page * {
  box-sizing: border-box;
}

.new-employee-content {
  flex: 1;
  min-width: 0;
}

.new-employee-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px;
}

/* ==============================
   Header
   ============================== */

.new-employee-header {
  margin-bottom: 20px;
}

.new-employee-header h1 {
  margin: 10px 0 0;
  color: var(--employee-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.new-employee-header p {
  margin: 7px 0 0;
  color: var(--employee-muted);
  font-size: 14px;
}

.new-employee-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #6b7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.new-employee-back:hover {
  color: var(--employee-primary-hover);
}

/* ==============================
   Main Card
   ============================== */

.new-employee-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
  background: var(--employee-card);
  border: 1px solid var(--employee-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

/* ==============================
   Profile Photo
   ============================== */

.new-employee-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px;
  background: #fafafa;
  border-right: 1px solid var(--employee-border);
}

.employee-photo-preview {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  color: #c4c9d1;
  font-size: 58px;
}

.employee-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-photo-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
  text-align: center;
}

.employee-photo-info strong {
  color: var(--employee-text);
  font-size: 14px;
}

.employee-photo-info span {
  color: var(--employee-muted);
  font-size: 12px;
  line-height: 1.45;
}

.employee-file-input {
  display: none;
}

.employee-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 16px;
  padding: 8px 13px;
  background: #ffffff;
  border: 1px solid var(--employee-border-dark);
  border-radius: 9px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.employee-upload-btn:hover {
  background: var(--employee-primary-soft);
  border-color: #fed7aa;
  color: var(--employee-primary-hover);
}

.employee-selected-file {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 8px;
}

.employee-selected-file span {
  min-width: 0;
  overflow: hidden;
  color: #6b7280;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-selected-file button {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--employee-danger);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* ==============================
   Upload Progress
   ============================== */

.employee-upload-progress {
  width: 100%;
  margin-top: 14px;
}

.employee-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--employee-muted);
  font-size: 11px;
}

.employee-progress-header strong {
  color: #374151;
}

.employee-progress-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 999px;
}

.employee-progress-bar {
  height: 100%;
  background: var(--employee-primary);
  border-radius: inherit;
  transition: width 0.2s ease;
}

/* ==============================
   Form
   ============================== */

.new-employee-form {
  min-width: 0;
  padding: 28px;
}

.new-employee-section-header {
  margin-bottom: 16px;
}

.new-employee-section-header h2 {
  margin: 0;
  color: var(--employee-text);
  font-size: 17px;
  font-weight: 700;
}

.new-employee-section-header p {
  margin: 5px 0 0;
  color: var(--employee-muted);
  font-size: 12px;
}

.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.employee-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.employee-form-field.employee-full-width {
  grid-column: 1 / -1;
}

.employee-form-field label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.employee-form-field label span {
  color: var(--employee-danger);
}

.employee-form-field input,
.employee-form-field select {
  width: 100%;
  height: 42px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--employee-border);
  border-radius: 9px;
  color: var(--employee-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.employee-form-field input:hover {
  border-color: var(--employee-border-dark);
}

.employee-form-field input:focus,
.employee-form-field select:focus {
  border-color: var(--employee-primary);
  box-shadow: 0 0 0 3px var(--employee-focus);
}

.employee-form-field input::placeholder {
  color: #9ca3af;
}

/* ==============================
   Password
   ============================== */

.employee-password-control {
  position: relative;
}

.employee-password-control input {
  padding-right: 44px;
}

.employee-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  font-size: 17px;
  cursor: pointer;
  transform: translateY(-50%);
}

.employee-password-toggle:hover {
  background: #f3f4f6;
  color: #111827;
}

/* ==============================
   Divider
   ============================== */

.new-employee-divider {
  height: 1px;
  margin: 26px 0;
  background: var(--employee-border);
}

/* ==============================
   Actions
   ============================== */

.new-employee-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--employee-border);
}

.new-employee-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--employee-border-dark);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.new-employee-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.new-employee-btn.primary {
  min-width: 150px;
  background: var(--employee-primary);
  border-color: var(--employee-primary);
  color: #ffffff;
}

.new-employee-btn.primary:hover:not(:disabled) {
  background: var(--employee-primary-hover);
  border-color: var(--employee-primary-hover);
}

.new-employee-btn.ghost {
  background: #ffffff;
  color: #374151;
}

.new-employee-btn.ghost:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.new-employee-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ==============================
   Tablet
   ============================== */

@media (max-width: 850px) {
  .new-employee-container {
    padding: 20px;
  }

  .new-employee-card {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .new-employee-photo {
    padding: 25px 18px;
  }

  .employee-photo-preview {
    width: 110px;
    height: 110px;
    font-size: 48px;
  }

  .new-employee-form {
    padding: 22px;
  }
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 650px) {
  .new-employee-container {
    padding: 14px;
  }

  .new-employee-header h1 {
    font-size: 22px;
  }

  .new-employee-card {
    grid-template-columns: 1fr;
  }

  .new-employee-photo {
    border-right: 0;
    border-bottom: 1px solid var(--employee-border);
  }

  .employee-photo-preview {
    width: 105px;
    height: 105px;
  }

  .employee-selected-file,
  .employee-upload-progress {
    max-width: 300px;
  }

  .new-employee-form {
    padding: 18px;
  }

  .employee-form-grid {
    grid-template-columns: 1fr;
  }

  .employee-form-field.employee-full-width {
    grid-column: auto;
  }

  .employee-form-field input,
  .employee-form-field select {
    height: 44px;
    font-size: 16px;
  }

  .new-employee-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .new-employee-actions .new-employee-btn {
    width: 100%;
  }
}

/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .new-employee-container {
    padding: 10px;
  }

  .new-employee-header h1 {
    font-size: 20px;
  }

  .new-employee-card {
    border-radius: 10px;
  }

  .new-employee-photo {
    padding: 22px 14px;
  }

  .new-employee-form {
    padding: 15px;
  }

  .new-employee-divider {
    margin: 22px 0;
  }

  .new-employee-actions {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .new-employee-page *,
  .new-employee-page *::before,
  .new-employee-page *::after {
    transition: none !important;
  }
}
/* ==============================
   Employee Details Page
   ============================== */

.view-employee-page {
  --ve-bg: #f6f7f9;
  --ve-card: #ffffff;

  --ve-text: #111827;
  --ve-muted: #6b7280;

  --ve-border: #e5e7eb;
  --ve-border-dark: #d1d5db;

  --ve-primary: #ff8c00;
  --ve-primary-hover: #e67e00;
  --ve-primary-soft: #fff7ed;
  --ve-focus: rgba(255, 140, 0, 0.16);

  --ve-danger: #dc2626;
  --ve-success: #15803d;

  width: 100%;
  min-height: 100vh;

  display: flex;

  background: var(--ve-bg);

  color: var(--ve-text);
}

.view-employee-page,
.view-employee-page * {
  box-sizing: border-box;
}

.view-employee-content {
  flex: 1;

  min-width: 0;
}

.view-employee-container {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.view-employee-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 20px;
}

.view-employee-header h1 {
  margin: 10px 0 0;

  color: var(--ve-primary);

  font-size: 26px;
  font-weight: 700;
}

.view-employee-header p {
  margin: 7px 0 0;

  color: var(--ve-muted);

  font-size: 14px;
}

.view-employee-back {
  display: inline-flex;
  align-items: center;

  gap: 6px;
  padding: 0;

  background: transparent;

  border: 0;

  color: var(--ve-muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.view-employee-back:hover {
  color: var(--ve-primary-hover);
}


/* ==============================
   Buttons
   ============================== */

.view-employee-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 14px;

  background: #ffffff;

  border: 1px solid var(--ve-border-dark);
  border-radius: 9px;

  color: var(--ve-text);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.view-employee-btn:hover {
  background: #f9fafb;

  border-color: #9ca3af;

  transform: translateY(-1px);
}

.view-employee-btn.primary {
  background: var(--ve-primary);

  border-color: var(--ve-primary);

  color: #ffffff;
}

.view-employee-btn.primary:hover {
  background: var(--ve-primary-hover);

  border-color: var(--ve-primary-hover);
}

.view-employee-btn.ghost {
  background: #ffffff;
}


/* ==============================
   Card
   ============================== */

.view-employee-card {
  display: grid;

  grid-template-columns:
    285px minmax(0, 1fr);

  overflow: hidden;

  background: var(--ve-card);

  border: 1px solid var(--ve-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Sidebar
   ============================== */

.view-employee-sidebar {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 28px 20px;

  background: #fafafa;

  border-right:
    1px solid var(--ve-border);
}


/* ==============================
   Employee Image
   ============================== */

.view-employee-image {
  position: relative;

  width: 170px;
  height: 170px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--ve-border);
  border-radius: 14px;

  color: #c4c9d1;

  font-size: 66px;
}

.view-employee-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.view-employee-image-fallback {
  position: absolute;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  color: #c4c9d1;

  font-size: 66px;
}

.view-employee-image.image-error img {
  display: none;
}

.view-employee-image.image-error
  .view-employee-image-fallback {
  display: flex;
}


/* ==============================
   Employee Summary
   ============================== */

.view-employee-summary {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 4px;
  margin-top: 16px;

  text-align: center;
}

.view-employee-summary strong {
  color: var(--ve-text);

  font-size: 15px;
  line-height: 1.35;

  overflow-wrap: anywhere;
}

.view-employee-summary span {
  color: var(--ve-muted);

  font-size: 12px;

  overflow-wrap: anywhere;
}


/* ==============================
   Role
   ============================== */

.view-employee-role {
  width: 100%;

  margin-top: 18px;
  padding: 12px;

  background: #ffffff;

  border: 1px solid var(--ve-border);
  border-radius: 10px;

  text-align: center;
}

.view-employee-role span {
  display: block;

  margin-bottom: 4px;

  color: var(--ve-muted);

  font-size: 11px;
  font-weight: 600;
}

.view-employee-role strong {
  color: var(--ve-primary-hover);

  font-size: 15px;
  font-weight: 700;
}


/* ==============================
   Sidebar Metadata
   ============================== */

.view-employee-sidebar-meta {
  width: 100%;

  margin-top: 18px;
  padding-top: 18px;

  border-top:
    1px solid var(--ve-border);

  text-align: center;
}

.view-employee-sidebar-meta + .view-employee-sidebar-meta {
  margin-top: 14px;
  padding-top: 14px;
}

.view-employee-sidebar-meta span {
  display: block;

  margin-bottom: 5px;

  color: var(--ve-muted);

  font-size: 10px;
  font-weight: 600;
}

.view-employee-sidebar-meta strong {
  display: block;

  color: #374151;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* ==============================
   Details
   ============================== */

.view-employee-details {
  min-width: 0;

  padding: 28px;
}


/* ==============================
   Section Header
   ============================== */

.view-employee-section-header {
  margin-bottom: 16px;
}

.view-employee-section-header h2 {
  margin: 0;

  color: var(--ve-text);

  font-size: 17px;
  font-weight: 700;
}

.view-employee-section-header p {
  margin: 5px 0 0;

  color: var(--ve-muted);

  font-size: 12px;
}


/* ==============================
   Grid
   ============================== */

.view-employee-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


/* ==============================
   Fields
   ============================== */

.view-employee-field {
  min-width: 0;

  padding: 12px 13px;

  background: #fafafa;

  border: 1px solid var(--ve-border);
  border-radius: 9px;

  color: #374151;

  font-size: 14px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}

.view-employee-field.view-employee-full {
  grid-column: 1 / -1;
}

.view-employee-label {
  display: block;

  margin-bottom: 5px;

  color: var(--ve-muted);

  font-size: 11px;
  font-weight: 600;
}


/* ==============================
   Divider
   ============================== */

.view-employee-divider {
  height: 1px;

  margin: 26px 0;

  background: var(--ve-border);
}


/* ==============================
   Actions
   ============================== */

.view-employee-actions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 28px;
  padding-top: 18px;

  border-top:
    1px solid var(--ve-border);
}


/* ==============================
   Loading / Not Found
   ============================== */

.view-employee-state {
  min-height: 360px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 32px;

  background: #ffffff;

  border: 1px solid var(--ve-border);
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.04);

  color: var(--ve-muted);

  text-align: center;
}

.view-employee-state-icon {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;

  background: var(--ve-primary-soft);

  border-radius: 50%;

  color: var(--ve-primary);

  font-size: 28px;
}

.view-employee-state strong {
  color: var(--ve-text);

  font-size: 16px;
}

.view-employee-state span {
  max-width: 380px;

  margin: 6px 0 18px;

  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .view-employee-container {
    padding: 20px;
  }

  .view-employee-card {
    grid-template-columns:
      230px minmax(0, 1fr);
  }

  .view-employee-sidebar {
    padding: 24px 16px;
  }

  .view-employee-image {
    width: 130px;
    height: 130px;

    font-size: 52px;
  }

  .view-employee-image-fallback {
    font-size: 52px;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .view-employee-container {
    padding: 14px;
  }

  .view-employee-header {
    flex-direction: column;

    align-items: stretch;

    gap: 14px;
  }

  .view-employee-header h1 {
    font-size: 22px;
  }

  .view-employee-header
    .view-employee-btn {
    width: 100%;
  }

  .view-employee-card {
    grid-template-columns: 1fr;
  }

  .view-employee-sidebar {
    border-right: 0;

    border-bottom:
      1px solid var(--ve-border);
  }

  .view-employee-details {
    padding: 18px;
  }

  .view-employee-grid {
    grid-template-columns: 1fr;
  }

  .view-employee-field.view-employee-full {
    grid-column: auto;
  }

  .view-employee-actions {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .view-employee-actions
    .view-employee-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .view-employee-container {
    padding: 10px;
  }

  .view-employee-header h1 {
    font-size: 20px;
  }

  .view-employee-card,
  .view-employee-state {
    border-radius: 10px;
  }

  .view-employee-sidebar {
    padding: 20px 14px;
  }

  .view-employee-details {
    padding: 15px;
  }

  .view-employee-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .view-employee-page *,
  .view-employee-page *::before,
  .view-employee-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   Product / Inventory Page
   ============================== */

.product-page {
  --product-bg: #f6f7f9;
  --product-card: #ffffff;
  --product-text: #111827;
  --product-muted: #6b7280;
  --product-border: #e5e7eb;
  --product-border-dark: #d1d5db;
  --product-primary: #ff8c00;
  --product-primary-hover: #e67e00;
  --product-primary-soft: #fff7ed;
  --product-focus: rgba(255, 140, 0, 0.16);
  --product-danger: #dc2626;
  --product-success: #15803d;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--product-bg);
  color: var(--product-text);
}

.product-page,
.product-page * {
  box-sizing: border-box;
}

.product-content {
  flex: 1;
  min-width: 0;
}

.product-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
}

/* ==============================
   Header
   ============================== */

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.product-header h1 {
  margin: 0;
  color: var(--product-primary);
  font-size: 26px;
  font-weight: 700;
}

.product-header p {
  margin: 7px 0 0;
  color: var(--product-muted);
  font-size: 14px;
}

/* ==============================
   Buttons
   ============================== */

.product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--product-border-dark);
  border-radius: 9px;
  color: var(--product-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.product-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.product-btn.primary {
  background: var(--product-primary);
  border-color: var(--product-primary);
  color: #ffffff;
}

.product-btn.primary:hover {
  background: var(--product-primary-hover);
  border-color: var(--product-primary-hover);
}

.product-btn.ghost {
  min-width: 84px;
}

.product-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ==============================
   Search
   ============================== */

.product-toolbar {
  margin-bottom: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);
}

.product-search {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-search label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.product-search-control {
  position: relative;
}

.product-search-control input {
  width: 100%;
  height: 42px;
  padding: 9px 42px 9px 38px;
  background: #f9fafb;
  border: 1px solid var(--product-border);
  border-radius: 9px;
  color: var(--product-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.product-search-control input:hover {
  border-color: var(--product-border-dark);
}

.product-search-control input:focus {
  background: #ffffff;
  border-color: var(--product-primary);
  box-shadow: 0 0 0 3px var(--product-focus);
}

.product-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #9ca3af;
  transform: translateY(-50%);
  pointer-events: none;
}

.product-search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(-50%);
}

.product-search-clear:hover {
  background: #f3f4f6;
  color: #111827;
}

/* ==============================
   Table Card
   ============================== */

.product-table-card {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.product-table-meta {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--product-border);
  color: var(--product-muted);
  font-size: 13px;
}

.product-table-meta strong {
  color: var(--product-text);
}

.product-searching {
  font-size: 12px;
}

/* ==============================
   Table
   ============================== */

.product-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.product-table th {
  padding: 12px 13px;
  background: #fafafa;
  border-bottom: 1px solid var(--product-border);
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.product-table td {
  padding: 10px 13px;
  border-bottom: 1px solid #f0f0f0;
  color: #374151;
  vertical-align: middle;
}

.product-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.015);
}

.product-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.055);
}

.product-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ==============================
   Product
   ============================== */

.product-item {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.product-image-button {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 3px;
  background: #ffffff;
  border: 1px solid var(--product-border);
  border-radius: 8px;
  cursor: pointer;
}

.product-image-button:hover {
  border-color: var(--product-primary);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.product-image-placeholder-icon {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
  border-radius: 5px;
}

.product-item-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-item-details strong {
  max-width: 280px;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-mobile-code {
  display: none;
  color: var(--product-muted);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 11px;
}

.product-code {
  color: #4b5563;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
}

/* ==============================
   Quantity
   ============================== */

.quantity-badge {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  background: #f3f4f6;
  border-radius: 999px;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
}

.quantity-low {
  background: #fef2f2;
  color: #b91c1c;
}

.quantity-normal {
  background: #f3f4f6;
  color: #374151;
}

.quantity-high {
  background: #f0fdf4;
  color: #15803d;
}

/* ==============================
   Actions
   ============================== */

.product-actions-heading {
  width: 190px;
  text-align: center !important;
}

.product-table-actions {
  width: 190px;
  white-space: nowrap;
}

.product-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--product-border);
  border-radius: 7px;
  color: #6b7280;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.product-action:last-child {
  margin-right: 0;
}

.product-action.view:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.product-action.edit:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.product-action.add:hover {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.product-action.subtract:hover {
  background: #fefce8;
  border-color: #fde68a;
  color: #a16207;
}

.product-action.delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* ==============================
   Empty
   ============================== */

.product-empty {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--product-muted);
}

.product-empty svg {
  margin-bottom: 3px;
  color: #c4c9d1;
  font-size: 24px;
}

.product-empty strong {
  color: #374151;
  font-size: 14px;
}

.product-empty span {
  font-size: 12px;
}

/* ==============================
   Pagination
   ============================== */

.product-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fafafa;
  border-top: 1px solid var(--product-border);
  color: var(--product-muted);
  font-size: 13px;
}

.product-pagination strong {
  color: #374151;
}

.product-pagination-buttons {
  display: flex;
  gap: 8px;
}

/* ==============================
   Image Overlay
   ============================== */

.product-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(3px);
}

.product-image-enlarged {
  max-width: min(700px, 90vw);
  max-height: 85vh;
  object-fit: contain;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.product-image-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  color: #111827;
  font-size: 24px;
  cursor: pointer;
}

/* ==============================
   Tablet
   ============================== */

@media (max-width: 900px) {
  .product-container {
    padding: 20px;
  }

  .hide-tablet {
    display: none;
  }

  .product-mobile-code {
    display: block;
  }
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 600px) {
  .product-container {
    padding: 14px;
  }

  .product-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .product-header h1 {
    font-size: 22px;
  }

  .product-header p {
    font-size: 13px;
  }

  .product-header .product-btn {
    width: 100%;
  }

  .product-toolbar {
    padding: 14px;
  }

  .product-search {
    max-width: none;
  }

  .product-search-control input {
    height: 44px;
    font-size: 16px;
  }

  .product-table-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hide-mobile {
    display: none;
  }

  .product-table {
    min-width: 520px;
    font-size: 13px;
  }

  .product-table th {
    padding: 10px;
    font-size: 12px;
  }

  .product-table td {
    padding: 9px 10px;
  }

  .product-item {
    min-width: 190px;
  }

  .product-image-button {
    width: 42px;
    height: 42px;
  }

  .product-actions-heading,
  .product-table-actions {
    width: 180px;
  }

  .product-action {
    width: 29px;
    height: 29px;
  }

  .product-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .product-pagination-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .product-pagination-buttons .product-btn {
    width: 100%;
  }
}

/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .product-container {
    padding: 10px;
  }

  .product-header h1 {
    font-size: 20px;
  }

  .product-toolbar,
  .product-table-card {
    border-radius: 10px;
  }

  .product-table {
    min-width: 500px;
  }

  .product-item {
    min-width: 170px;
  }

  .product-item-details strong {
    max-width: 130px;
  }

  .product-image-overlay {
    padding: 14px;
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .product-page *,
  .product-page *::before,
  .product-page *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ==============================
   Product Details Page
   ============================== */

.view-product-page {
  --vp-bg: #f6f7f9;
  --vp-card: #ffffff;
  --vp-text: #111827;
  --vp-muted: #6b7280;
  --vp-border: #e5e7eb;
  --vp-border-dark: #d1d5db;
  --vp-primary: #ff8c00;
  --vp-primary-hover: #e67e00;
  --vp-primary-soft: #fff7ed;
  --vp-focus: rgba(255, 140, 0, 0.16);
  --vp-danger: #dc2626;
  --vp-success: #15803d;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--vp-bg);
  color: var(--vp-text);
}

.view-product-page,
.view-product-page * {
  box-sizing: border-box;
}

.view-product-content {
  flex: 1;
  min-width: 0;
}

.view-product-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.view-product-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.view-product-header h1 {
  margin: 10px 0 0;
  color: var(--vp-primary);
  font-size: 26px;
  font-weight: 700;
}

.view-product-header p {
  margin: 7px 0 0;
  color: var(--vp-muted);
  font-size: 14px;
}

.view-product-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--vp-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.view-product-back:hover {
  color: var(--vp-primary-hover);
}


/* ==============================
   Buttons
   ============================== */

.view-product-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--vp-border-dark);
  border-radius: 9px;
  color: var(--vp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.view-product-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.view-product-btn.primary {
  background: var(--vp-primary);
  border-color: var(--vp-primary);
  color: #ffffff;
}

.view-product-btn.primary:hover {
  background: var(--vp-primary-hover);
  border-color: var(--vp-primary-hover);
}

.view-product-btn.ghost {
  background: #ffffff;
}


/* ==============================
   Card
   ============================== */

.view-product-card {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  overflow: hidden;
  background: var(--vp-card);
  border: 1px solid var(--vp-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Sidebar
   ============================== */

.view-product-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #fafafa;
  border-right: 1px solid var(--vp-border);
}

.view-product-image {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--vp-border);
  border-radius: 14px;
  color: #c4c9d1;
  font-size: 66px;
}

.view-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.view-product-image-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

.view-product-image.image-error img {
  display: none;
}

.view-product-image.image-error .view-product-image-fallback {
  display: flex;
}

.view-product-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
}

.view-product-summary strong {
  color: var(--vp-text);
  font-size: 15px;
  line-height: 1.35;
}

.view-product-summary span {
  color: var(--vp-muted);
  font-size: 12px;
}


/* ==============================
   Stock
   ============================== */

.view-product-stock {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  text-align: center;
}

.view-product-stock span {
  display: block;
  margin-bottom: 4px;
  color: var(--vp-muted);
  font-size: 11px;
  font-weight: 600;
}

.view-product-stock strong {
  font-size: 22px;
}

.view-product-stock-low {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.view-product-stock-normal {
  color: #374151;
}

.view-product-stock-high {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}


/* ==============================
   Barcode
   ============================== */

.view-product-barcode {
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--vp-border);
  text-align: center;
}

.view-product-barcode-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #374151;
  font-size: 13px;
}

.view-product-barcode canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 6px;
  background: #ffffff;
  border: 1px dashed var(--vp-border-dark);
  border-radius: 8px;
}


/* ==============================
   Details
   ============================== */

.view-product-details {
  min-width: 0;
  padding: 28px;
}

.view-product-section-header {
  margin-bottom: 16px;
}

.view-product-section-header h2 {
  margin: 0;
  color: var(--vp-text);
  font-size: 17px;
  font-weight: 700;
}

.view-product-section-header p {
  margin: 5px 0 0;
  color: var(--vp-muted);
  font-size: 12px;
}

.view-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.view-product-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view-product-field {
  min-width: 0;
  padding: 12px 13px;
  background: #fafafa;
  border: 1px solid var(--vp-border);
  border-radius: 9px;
  color: #374151;
  font-size: 14px;
}

.view-product-field.view-product-full {
  grid-column: 1 / -1;
}

.view-product-label {
  display: block;
  margin-bottom: 5px;
  color: var(--vp-muted);
  font-size: 11px;
  font-weight: 600;
}

.view-product-code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 13px;
}

.view-product-description {
  display: block;
  white-space: pre-wrap;
  line-height: 1.55;
}


/* ==============================
   Stats
   ============================== */

.view-product-stat {
  min-width: 0;
  padding: 14px;
  background: #fafafa;
  border: 1px solid var(--vp-border);
  border-radius: 9px;
}

.view-product-stat span {
  display: block;
  margin-bottom: 5px;
  color: var(--vp-muted);
  font-size: 11px;
  font-weight: 600;
}

.view-product-stat strong {
  color: var(--vp-text);
  font-size: 16px;
}


/* ==============================
   Divider / Actions
   ============================== */

.view-product-divider {
  height: 1px;
  margin: 26px 0;
  background: var(--vp-border);
}

.view-product-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--vp-border);
}


/* ==============================
   Loading / Not Found
   ============================== */

.view-product-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--vp-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
  color: var(--vp-muted);
  text-align: center;
}

.view-product-state-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: var(--vp-primary-soft);
  border-radius: 50%;
  color: var(--vp-primary);
  font-size: 28px;
}

.view-product-state strong {
  color: var(--vp-text);
  font-size: 16px;
}

.view-product-state span {
  max-width: 380px;
  margin: 6px 0 18px;
  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .view-product-container {
    padding: 20px;
  }

  .view-product-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .view-product-sidebar {
    padding: 24px 16px;
  }

  .view-product-image {
    width: 130px;
    height: 130px;
  }

  .view-product-grid.three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .view-product-container {
    padding: 14px;
  }

  .view-product-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .view-product-header h1 {
    font-size: 22px;
  }

  .view-product-header .view-product-btn {
    width: 100%;
  }

  .view-product-card {
    grid-template-columns: 1fr;
  }

  .view-product-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--vp-border);
  }

  .view-product-details {
    padding: 18px;
  }

  .view-product-grid,
  .view-product-grid.three-col {
    grid-template-columns: 1fr;
  }

  .view-product-field.view-product-full {
    grid-column: auto;
  }

  .view-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .view-product-actions .view-product-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .view-product-container {
    padding: 10px;
  }

  .view-product-header h1 {
    font-size: 20px;
  }

  .view-product-card,
  .view-product-state {
    border-radius: 10px;
  }

  .view-product-sidebar {
    padding: 20px 14px;
  }

  .view-product-details {
    padding: 15px;
  }

  .view-product-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .view-product-page *,
  .view-product-page *::before,
  .view-product-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   New Product Page
   ============================== */

.new-product-page {
  --np-bg: #f6f7f9;
  --np-card: #ffffff;
  --np-text: #111827;
  --np-muted: #6b7280;
  --np-border: #e5e7eb;
  --np-border-dark: #d1d5db;
  --np-primary: #ff8c00;
  --np-primary-hover: #e67e00;
  --np-primary-soft: #fff7ed;
  --np-focus: rgba(255, 140, 0, 0.16);
  --np-danger: #dc2626;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--np-bg);
  color: var(--np-text);
}

.new-product-page,
.new-product-page * {
  box-sizing: border-box;
}

.new-product-content {
  flex: 1;
  min-width: 0;
}

.new-product-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.new-product-header {
  margin-bottom: 20px;
}

.new-product-header h1 {
  margin: 10px 0 0;
  color: var(--np-primary);
  font-size: 26px;
  font-weight: 700;
}

.new-product-header p {
  margin: 7px 0 0;
  color: var(--np-muted);
  font-size: 14px;
}

.new-product-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--np-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.new-product-back:hover {
  color: var(--np-primary-hover);
}


/* ==============================
   Main Card
   ============================== */

.new-product-card {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  overflow: hidden;
  background: var(--np-card);
  border: 1px solid var(--np-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Product Sidebar
   ============================== */

.new-product-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #fafafa;
  border-right: 1px solid var(--np-border);
}

.new-product-image-preview {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--np-border);
  border-radius: 14px;
  color: #c4c9d1;
  font-size: 62px;
}

.new-product-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.new-product-image-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
}

.new-product-image-info strong {
  color: var(--np-text);
  font-size: 14px;
}

.new-product-image-info span {
  color: var(--np-muted);
  font-size: 12px;
  line-height: 1.45;
}

.new-product-file {
  display: none;
}

.new-product-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 15px;
  padding: 8px 13px;
  background: #ffffff;
  border: 1px solid var(--np-border-dark);
  border-radius: 9px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.new-product-upload:hover {
  background: var(--np-primary-soft);
  border-color: #fed7aa;
  color: var(--np-primary-hover);
}

.new-product-selected-file {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--np-border);
  border-radius: 8px;
}

.new-product-selected-file span {
  min-width: 0;
  overflow: hidden;
  color: var(--np-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-product-selected-file button {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--np-danger);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}


/* ==============================
   Upload Progress
   ============================== */

.new-product-progress {
  width: 100%;
  margin-top: 14px;
}

.new-product-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--np-muted);
  font-size: 11px;
}


/* ==============================
   Barcode
   ============================== */

.new-product-barcode {
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--np-border);
  text-align: center;
}

.new-product-barcode-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #374151;
  font-size: 13px;
}

.new-product-barcode canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 6px;
  background: #ffffff;
  border: 1px dashed var(--np-border-dark);
  border-radius: 8px;
}

.new-product-regenerate {
  margin-top: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--np-primary-hover);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}


/* ==============================
   Form
   ============================== */

.new-product-form {
  min-width: 0;
  padding: 28px;
}

.new-product-section-header {
  margin-bottom: 16px;
}

.new-product-section-header h2 {
  margin: 0;
  color: var(--np-text);
  font-size: 17px;
  font-weight: 700;
}

.new-product-section-header p {
  margin: 5px 0 0;
  color: var(--np-muted);
  font-size: 12px;
}

.new-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.new-product-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.new-product-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.new-product-field.new-product-full {
  grid-column: 1 / -1;
}

.new-product-field label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.new-product-field label span {
  color: var(--np-danger);
}

.new-product-field input,
.new-product-field select,
.new-product-field textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--np-border);
  border-radius: 9px;
  color: var(--np-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.new-product-field input,
.new-product-field select {
  height: 42px;
}

.new-product-field textarea {
  min-height: 90px;
  resize: vertical;
}

.new-product-field input:hover,
.new-product-field select:hover,
.new-product-field textarea:hover {
  border-color: var(--np-border-dark);
}

.new-product-field input:focus,
.new-product-field select:focus,
.new-product-field textarea:focus {
  border-color: var(--np-primary);
  box-shadow: 0 0 0 3px var(--np-focus);
}

.new-product-field input:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}


/* ==============================
   MPN
   ============================== */

.new-product-mpn-control {
  position: relative;
}

.new-product-mpn-control input {
  padding-right: 44px;
}

.new-product-mpn-control button {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  transform: translateY(-50%);
}

.new-product-mpn-control button:hover {
  background: var(--np-primary-soft);
  color: var(--np-primary-hover);
}


/* ==============================
   Divider
   ============================== */

.new-product-divider {
  height: 1px;
  margin: 26px 0;
  background: var(--np-border);
}


/* ==============================
   Actions
   ============================== */

.new-product-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--np-border);
}

.new-product-btn {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--np-border-dark);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.new-product-btn.primary {
  min-width: 145px;
  background: var(--np-primary);
  border-color: var(--np-primary);
  color: #ffffff;
}

.new-product-btn.primary:hover:not(:disabled) {
  background: var(--np-primary-hover);
  border-color: var(--np-primary-hover);
}

.new-product-btn.ghost {
  background: #ffffff;
  color: #374151;
}

.new-product-btn.ghost:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.new-product-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .new-product-container {
    padding: 20px;
  }

  .new-product-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .new-product-sidebar {
    padding: 24px 16px;
  }

  .new-product-image-preview {
    width: 120px;
    height: 120px;
  }

  .new-product-grid.three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .new-product-container {
    padding: 14px;
  }

  .new-product-header h1 {
    font-size: 22px;
  }

  .new-product-card {
    grid-template-columns: 1fr;
  }

  .new-product-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--np-border);
  }

  .new-product-selected-file,
  .new-product-progress {
    max-width: 320px;
  }

  .new-product-barcode {
    max-width: 360px;
  }

  .new-product-form {
    padding: 18px;
  }

  .new-product-grid,
  .new-product-grid.three-col {
    grid-template-columns: 1fr;
  }

  .new-product-field.new-product-full {
    grid-column: auto;
  }

  .new-product-field input,
  .new-product-field select,
  .new-product-field textarea {
    font-size: 16px;
  }

  .new-product-field input,
  .new-product-field select {
    height: 44px;
  }

  .new-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .new-product-actions .new-product-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .new-product-container {
    padding: 10px;
  }

  .new-product-header h1 {
    font-size: 20px;
  }

  .new-product-card {
    border-radius: 10px;
  }

  .new-product-sidebar {
    padding: 20px 14px;
  }

  .new-product-form {
    padding: 15px;
  }

  .new-product-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .new-product-page *,
  .new-product-page *::before,
  .new-product-page *::after {
    transition: none !important;
  }
}/* ==============================
   Update Product Page
   ============================== */

.update-product-page {
  --up-bg: #f6f7f9;
  --up-card: #ffffff;
  --up-text: #111827;
  --up-muted: #6b7280;
  --up-border: #e5e7eb;
  --up-border-dark: #d1d5db;
  --up-primary: #ff8c00;
  --up-primary-hover: #e67e00;
  --up-primary-soft: #fff7ed;
  --up-focus: rgba(255, 140, 0, 0.16);
  --up-danger: #dc2626;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--up-bg);
  color: var(--up-text);
}

.update-product-page,
.update-product-page * {
  box-sizing: border-box;
}

.update-product-content {
  flex: 1;
  min-width: 0;
}

.update-product-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.update-product-header {
  margin-bottom: 20px;
}

.update-product-header h1 {
  margin: 10px 0 0;
  color: var(--up-primary);
  font-size: 26px;
  font-weight: 700;
}

.update-product-header p {
  margin: 7px 0 0;
  color: var(--up-muted);
  font-size: 14px;
}

.update-product-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--up-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.update-product-back:hover:not(:disabled) {
  color: var(--up-primary-hover);
}

.update-product-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==============================
   Main Card
   ============================== */

.update-product-card {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  overflow: hidden;
  background: var(--up-card);
  border: 1px solid var(--up-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Sidebar
   ============================== */

.update-product-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #fafafa;
  border-right: 1px solid var(--up-border);
}

.update-product-image-preview {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--up-border);
  border-radius: 14px;
  color: #c4c9d1;
  font-size: 62px;
}

.update-product-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.update-product-image-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
}

.update-product-image-info strong {
  color: var(--up-text);
  font-size: 14px;
}

.update-product-image-info span {
  color: var(--up-muted);
  font-size: 12px;
  line-height: 1.45;
}

.update-product-file {
  display: none;
}

.update-product-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 15px;
  padding: 8px 13px;
  background: #ffffff;
  border: 1px solid var(--up-border-dark);
  border-radius: 9px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.update-product-upload:hover {
  background: var(--up-primary-soft);
  border-color: #fed7aa;
  color: var(--up-primary-hover);
}

.update-product-selected-file {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--up-border);
  border-radius: 8px;
}

.update-product-selected-file span {
  min-width: 0;
  overflow: hidden;
  color: var(--up-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-product-selected-file button {
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--up-danger);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.update-product-selected-file button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==============================
   Upload Progress
   ============================== */

.update-product-progress {
  width: 100%;
  margin-top: 14px;
  color: var(--up-muted);
  font-size: 11px;
  text-align: center;
}


/* ==============================
   Barcode
   ============================== */

.update-product-barcode {
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--up-border);
  text-align: center;
}

.update-product-barcode-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #374151;
  font-size: 13px;
}

.update-product-barcode canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 6px;
  background: #ffffff;
  border: 1px dashed var(--up-border-dark);
  border-radius: 8px;
}


/* ==============================
   Form
   ============================== */

.update-product-form {
  min-width: 0;
  padding: 28px;
}

.update-product-section-header {
  margin-bottom: 16px;
}

.update-product-section-header h2 {
  margin: 0;
  color: var(--up-text);
  font-size: 17px;
  font-weight: 700;
}

.update-product-section-header p {
  margin: 5px 0 0;
  color: var(--up-muted);
  font-size: 12px;
}

.update-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.update-product-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.update-product-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.update-product-field.update-product-full {
  grid-column: 1 / -1;
}

.update-product-field label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.update-product-field label span {
  color: var(--up-danger);
}

.update-product-field input,
.update-product-field select,
.update-product-field textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--up-border);
  border-radius: 9px;
  color: var(--up-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.update-product-field input,
.update-product-field select {
  height: 42px;
}

.update-product-field textarea {
  min-height: 90px;
  resize: vertical;
}

.update-product-field input:hover:not(:disabled),
.update-product-field select:hover:not(:disabled),
.update-product-field textarea:hover:not(:disabled) {
  border-color: var(--up-border-dark);
}

.update-product-field input:focus,
.update-product-field select:focus,
.update-product-field textarea:focus {
  border-color: var(--up-primary);
  box-shadow: 0 0 0 3px var(--up-focus);
}

.update-product-field input:disabled,
.update-product-field select:disabled,
.update-product-field textarea:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}


/* ==============================
   Divider
   ============================== */

.update-product-divider {
  height: 1px;
  margin: 26px 0;
  background: var(--up-border);
}


/* ==============================
   Actions
   ============================== */

.update-product-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--up-border);
}

.update-product-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--up-border-dark);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.update-product-btn.primary {
  min-width: 145px;
  background: var(--up-primary);
  border-color: var(--up-primary);
  color: #ffffff;
}

.update-product-btn.primary:hover:not(:disabled) {
  background: var(--up-primary-hover);
  border-color: var(--up-primary-hover);
}

.update-product-btn.ghost {
  background: #ffffff;
  color: #374151;
}

.update-product-btn.ghost:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.update-product-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ==============================
   Loading / Error
   ============================== */

.update-product-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--up-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
  color: var(--up-muted);
  text-align: center;
}

.update-product-state-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: var(--up-primary-soft);
  border-radius: 50%;
  color: var(--up-primary);
  font-size: 28px;
}

.update-product-state strong {
  color: var(--up-text);
  font-size: 16px;
}

.update-product-state span {
  max-width: 380px;
  margin: 6px 0 18px;
  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .update-product-container {
    padding: 20px;
  }

  .update-product-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .update-product-sidebar {
    padding: 24px 16px;
  }

  .update-product-image-preview {
    width: 120px;
    height: 120px;
  }

  .update-product-grid.three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .update-product-container {
    padding: 14px;
  }

  .update-product-header h1 {
    font-size: 22px;
  }

  .update-product-card {
    grid-template-columns: 1fr;
  }

  .update-product-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--up-border);
  }

  .update-product-selected-file,
  .update-product-progress {
    max-width: 320px;
  }

  .update-product-barcode {
    max-width: 360px;
  }

  .update-product-form {
    padding: 18px;
  }

  .update-product-grid,
  .update-product-grid.three-col {
    grid-template-columns: 1fr;
  }

  .update-product-field.update-product-full {
    grid-column: auto;
  }

  .update-product-field input,
  .update-product-field select,
  .update-product-field textarea {
    font-size: 16px;
  }

  .update-product-field input,
  .update-product-field select {
    height: 44px;
  }

  .update-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .update-product-actions .update-product-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .update-product-container {
    padding: 10px;
  }

  .update-product-header h1 {
    font-size: 20px;
  }

  .update-product-card,
  .update-product-state {
    border-radius: 10px;
  }

  .update-product-sidebar {
    padding: 20px 14px;
  }

  .update-product-form {
    padding: 15px;
  }

  .update-product-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .update-product-page *,
  .update-product-page *::before,
  .update-product-page *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   Manage Jobs Page
   ============================== */

.manage-jobs-page {
  --mj-bg: #f6f7f9;
  --mj-card: #ffffff;
  --mj-text: #111827;
  --mj-muted: #6b7280;
  --mj-border: #e5e7eb;
  --mj-border-dark: #d1d5db;
  --mj-primary: #ff8c00;
  --mj-primary-hover: #e67e00;
  --mj-primary-soft: #fff7ed;
  --mj-focus: rgba(255, 140, 0, 0.16);
  --mj-danger: #dc2626;
  --mj-success: #15803d;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--mj-bg);
  color: var(--mj-text);
}

.manage-jobs-page,
.manage-jobs-page * {
  box-sizing: border-box;
}

.manage-jobs-content {
  flex: 1;
  min-width: 0;
}

.manage-jobs-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
}

/* ==============================
   Header
   ============================== */

.manage-jobs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.manage-jobs-heading {
  min-width: 0;
}

.manage-jobs-heading h1 {
  margin: 0;
  color: var(--mj-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.manage-jobs-heading p {
  margin: 7px 0 0;
  color: var(--mj-muted);
  font-size: 14px;
  line-height: 1.5;
}

.manage-jobs-actions {
  display: flex;
  gap: 10px;
}

/* ==============================
   Buttons
   ============================== */

.mj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--mj-border-dark);
  border-radius: 9px;
  color: var(--mj-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.mj-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.mj-btn.primary {
  background: var(--mj-primary);
  border-color: var(--mj-primary);
  color: #ffffff;
}

.mj-btn.primary:hover:not(:disabled) {
  background: var(--mj-primary-hover);
  border-color: var(--mj-primary-hover);
}

.mj-btn.ghost {
  min-width: 76px;
  background: #ffffff;
}

.mj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ==============================
   Filters
   ============================== */

.manage-jobs-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px 110px;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--mj-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);
}

.mj-search,
.mj-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mj-search label,
.mj-filter-field label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.mj-search-control {
  position: relative;
  width: 100%;
}

.mj-search-control input,
.mj-filter-field select {
  width: 100%;
  height: 42px;
  background: #f9fafb;
  border: 1px solid var(--mj-border);
  border-radius: 9px;
  color: var(--mj-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.mj-search-control input {
  padding: 9px 42px 9px 38px;
}

.mj-filter-field select {
  padding: 9px 34px 9px 11px;
  cursor: pointer;
}

.mj-search-control input:hover,
.mj-filter-field select:hover {
  border-color: var(--mj-border-dark);
}

.mj-search-control input:focus,
.mj-filter-field select:focus {
  background: #ffffff;
  border-color: var(--mj-primary);
  box-shadow: 0 0 0 3px var(--mj-focus);
}

.mj-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

.mj-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(-50%);
}

.mj-clear:hover {
  background: #f3f4f6;
  color: #111827;
}

/* ==============================
   Loading / Error
   ============================== */

.manage-jobs-state {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--mj-border);
  border-radius: 12px;
  color: var(--mj-muted);
  font-size: 14px;
}

.manage-jobs-state.error {
  color: var(--mj-danger);
}

.manage-jobs-state.error strong {
  color: #991b1b;
}

.mj-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #f3f4f6;
  border-top-color: var(--mj-primary);
  border-radius: 50%;
  animation: mj-spin 0.7s linear infinite;
}

@keyframes mj-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==============================
   Table Card
   ============================== */

.manage-jobs-table-card {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--mj-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==============================
   Table Meta
   ============================== */

.manage-jobs-meta {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--mj-border);
  color: var(--mj-muted);
  font-size: 13px;
}

.manage-jobs-meta strong {
  color: var(--mj-text);
  font-weight: 700;
}

.manage-jobs-meta .mj-searching {
  color: var(--mj-muted);
  font-size: 12px;
}

/* ==============================
   Table
   ============================== */

.manage-jobs-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.manage-jobs-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.manage-jobs-table th {
  padding: 12px 13px;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.manage-jobs-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #f0f0f0;
  color: #374151;
  vertical-align: middle;
}

.manage-jobs-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.015);
}

.manage-jobs-table tbody tr {
  transition: background-color 0.12s ease;
}

.manage-jobs-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.055);
}

.manage-jobs-table tbody tr:last-child td {
  border-bottom: none;
}

/* ==============================
   Barcode
   ============================== */

.mj-barcode {
  display: inline-block;
  padding: 3px 7px;
  background: #eef2ff;
  border-radius: 7px;
  color: #374151;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mj-barcode:hover {
  background: var(--mj-primary-soft);
  color: #c2410c;
}

/* ==============================
   Status
   ============================== */

.mj-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 8px;
  background: #f3f4f6;
  border-radius: 999px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mj-status.status-CREATED {
  background: #eff6ff;
  color: #1d4ed8;
}

.mj-status.status-ACKNOWLEDGED {
  background: #fff7ed;
  color: #c2410c;
}

.mj-status.status-SUPPLIED {
  background: #fefce8;
  color: #a16207;
}

.mj-status.status-FITTED {
  background: #f0fdf4;
  color: #15803d;
}

.mj-status.status-CLOSED,
.mj-status.status-COMPLETED {
  background: #ecfdf5;
  color: #047857;
}

.mj-status.status-CANCELLED {
  background: #fef2f2;
  color: #b91c1c;
}

/* ==============================
   Useful Columns
   ============================== */

.mj-rego {
  color: #111827;
  font-weight: 600;
  white-space: nowrap;
}

.mj-sim {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: #4b5563;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mj-date {
  color: var(--mj-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ==============================
   Actions
   ============================== */

.mj-actions-heading {
  width: 112px;
  text-align: center !important;
}

.mj-table-actions {
  width: 112px;
  white-space: nowrap;
}

.mj-table-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  color: #6b7280;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.mj-table-action:last-child {
  margin-right: 0;
}

.mj-table-action.view:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.mj-table-action.edit:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.mj-table-action.delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* ==============================
   Empty State
   ============================== */

.mj-empty {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--mj-muted);
}

.mj-empty svg {
  margin-bottom: 3px;
  color: #c4c9d1;
  font-size: 24px;
}

.mj-empty strong {
  color: #374151;
  font-size: 14px;
}

.mj-empty span {
  font-size: 12px;
}

/* ==============================
   Pagination
   ============================== */

.manage-jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fafafa;
  border-top: 1px solid var(--mj-border);
}

.mj-pagination-info {
  color: var(--mj-muted);
  font-size: 13px;
}

.mj-pagination-info strong {
  color: #374151;
}

.mj-pagination-buttons {
  display: flex;
  gap: 8px;
}

/* ==============================
   Tablet
   ============================== */

@media (max-width: 1000px) {
  .manage-jobs-container {
    padding: 20px;
  }

  .manage-jobs-filters {
    grid-template-columns: minmax(220px, 1fr) 170px 100px;
  }
}

@media (max-width: 800px) {
  .manage-jobs-header {
    align-items: flex-start;
  }

  .manage-jobs-filters {
    grid-template-columns: 1fr 1fr;
  }

  .mj-search {
    grid-column: 1 / -1;
  }

  .mj-rows {
    width: 100%;
  }
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 600px) {
  .manage-jobs-container {
    padding: 14px;
  }

  .manage-jobs-header {
    flex-direction: column;
    gap: 14px;
  }

  .manage-jobs-heading h1 {
    font-size: 22px;
  }

  .manage-jobs-heading p {
    font-size: 13px;
  }

  .manage-jobs-header > .mj-btn {
    width: 100%;
  }

  .manage-jobs-filters {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .mj-search {
    grid-column: auto;
  }

  .mj-search-control input,
  .mj-filter-field select {
    height: 44px;
    font-size: 16px;
  }

  .manage-jobs-meta {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }

  .manage-jobs-meta .mj-searching {
    font-size: 12px;
  }

  .hide-mobile {
    display: none !important;
  }

  .manage-jobs-table {
    min-width: 760px;
    font-size: 13px;
  }

  .manage-jobs-table th {
    padding: 10px;
    font-size: 12px;
  }

  .manage-jobs-table td {
    padding: 10px;
  }

  .mj-actions-heading,
  .mj-table-actions {
    width: 104px;
  }

  .mj-table-action {
    width: 29px;
    height: 29px;
  }

  .manage-jobs-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .mj-pagination-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mj-pagination-buttons .mj-btn {
    width: 100%;
  }
}

/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .manage-jobs-container {
    padding: 10px;
  }

  .manage-jobs-heading h1 {
    font-size: 20px;
  }

  .manage-jobs-filters,
  .manage-jobs-table-card {
    border-radius: 10px;
  }

  .manage-jobs-table {
    min-width: 720px;
  }

  .manage-jobs-pagination {
    padding: 10px 12px;
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .manage-jobs-page *,
  .manage-jobs-page *::before,
  .manage-jobs-page *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ==============================
   Add Scale Job
   ============================== */

.job-add-page {
  --job-bg: #f6f7f9;
  --job-card: #ffffff;
  --job-text: #111827;
  --job-muted: #6b7280;
  --job-border: #e5e7eb;
  --job-border-dark: #d1d5db;
  --job-primary: #ff8c00;
  --job-primary-hover: #e67e00;
  --job-primary-soft: #fff7ed;
  --job-focus: rgba(255, 140, 0, 0.16);
  --job-danger: #dc2626;

  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--job-bg);
  color: var(--job-text);
}

.job-add-page,
.job-add-page * {
  box-sizing: border-box;
}

.job-add-content {
  flex: 1;
  min-width: 0;
}

.job-add-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.job-add-header {
  margin-bottom: 20px;
}

.job-add-header h1 {
  margin: 10px 0 0;
  color: var(--job-primary);
  font-size: 26px;
  font-weight: 700;
}

.job-add-header p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--job-muted);
  font-size: 14px;
  line-height: 1.5;
}

.job-add-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--job-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.job-add-back:hover:not(:disabled) {
  color: var(--job-primary-hover);
}

.job-add-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==============================
   Main Card
   ============================== */

.job-add-card {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  overflow: hidden;
  background: var(--job-card);
  border: 1px solid var(--job-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Sidebar
   ============================== */

.job-add-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #fafafa;
  border-right: 1px solid var(--job-border);
}

.job-add-barcode-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--job-primary-soft);
  border-radius: 14px;
  color: var(--job-primary);
  font-size: 30px;
}

.job-add-sidebar-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
}

.job-add-sidebar-title strong {
  color: var(--job-text);
  font-size: 14px;
}

.job-add-sidebar-title span {
  color: var(--job-muted);
  font-size: 12px;
  line-height: 1.45;
}

.job-add-barcode {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.job-add-barcode canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 6px;
  background: #ffffff;
  border: 1px dashed var(--job-border-dark);
  border-radius: 8px;
}

.job-add-reference {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--job-border);
  border-radius: 9px;
  text-align: center;
}

.job-add-reference span {
  display: block;
  margin-bottom: 4px;
  color: var(--job-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.job-add-reference strong {
  display: block;
  overflow: hidden;
  color: #374151;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-add-regenerate {
  width: 100%;
  margin-top: 12px;
}

.job-add-sidebar-note {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--job-border);
}

.job-add-sidebar-note strong {
  color: #374151;
  font-size: 12px;
}

.job-add-sidebar-note span {
  color: var(--job-muted);
  font-size: 11px;
  line-height: 1.55;
}


/* ==============================
   Main Form
   ============================== */

.job-add-form {
  min-width: 0;
  padding: 28px;
}


/* ==============================
   Section Card
   ============================== */

.job-section-card {
  width: 100%;
}

.job-section-card + .job-section-card {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--job-border);
}

.job-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.job-section-toggle {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.job-section-heading {
  min-width: 0;
}

.job-section-heading h2 {
  margin: 0;
  color: var(--job-text);
  font-size: 17px;
  font-weight: 700;
}

.job-section-heading p {
  margin: 5px 0 0;
  color: var(--job-muted);
  font-size: 12px;
  line-height: 1.45;
}

.job-section-chevron {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #9ca3af;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.job-section-toggle:hover .job-section-chevron {
  background: var(--job-primary-soft);
  color: var(--job-primary-hover);
}

.job-section-chevron.open {
  transform: rotate(180deg);
}

.job-section-actions {
  flex-shrink: 0;
}

.job-section-card.collapsed .job-section-header {
  margin-bottom: 0;
}


/* ==============================
   Form Grid
   ============================== */

.job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.job-full {
  grid-column: 1 / -1;
  min-width: 0;
}


/* ==============================
   Fields
   ============================== */

.job-field,
.job-add-page .formInput {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.job-field label,
.job-add-page .formInput > label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.job-add-page .req {
  color: var(--job-danger);
}

.job-field input,
.job-field select,
.job-field textarea,
.job-add-page .formInput input,
.job-add-page .formInput select,
.job-add-page .formInput textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--job-border);
  border-radius: 9px;
  color: var(--job-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.job-field input,
.job-field select,
.job-add-page .formInput input,
.job-add-page .formInput select {
  height: 42px;
}

.job-field textarea,
.job-add-page .formInput textarea {
  min-height: 90px;
  resize: vertical;
}

.job-field input:hover:not(:disabled),
.job-field select:hover:not(:disabled),
.job-field textarea:hover:not(:disabled),
.job-add-page .formInput input:hover:not(:disabled),
.job-add-page .formInput select:hover:not(:disabled),
.job-add-page .formInput textarea:hover:not(:disabled) {
  border-color: var(--job-border-dark);
}

.job-field input:focus,
.job-field select:focus,
.job-field textarea:focus,
.job-add-page .formInput input:focus,
.job-add-page .formInput select:focus,
.job-add-page .formInput textarea:focus {
  border-color: var(--job-primary);
  box-shadow: 0 0 0 3px var(--job-focus);
}

.job-field input:disabled,
.job-field select:disabled,
.job-field textarea:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}


/* ==============================
   Fleetmaster Checkbox
   ============================== */

.job-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  background: #fafafa;
  border: 1px solid var(--job-border);
  border-radius: 9px;
  cursor: pointer;
}

.job-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.job-checkbox-control {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--job-border-dark);
  border-radius: 5px;
}

.job-checkbox input:checked + .job-checkbox-control {
  background: var(--job-primary);
  border-color: var(--job-primary);
}

.job-checkbox input:checked + .job-checkbox-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.job-checkbox input:focus-visible + .job-checkbox-control {
  box-shadow: 0 0 0 3px var(--job-focus);
}

.job-checkbox-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-checkbox-text strong {
  color: #374151;
  font-size: 13px;
}

.job-checkbox-text small {
  color: var(--job-muted);
  font-size: 11px;
  line-height: 1.4;
}


/* ==============================
   Buttons
   ============================== */

.job-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  background: #ffffff;
  border: 1px solid var(--job-border-dark);
  border-radius: 9px;
  color: #374151;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.job-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.job-btn.primary {
  min-width: 140px;
  background: var(--job-primary);
  border-color: var(--job-primary);
  color: #ffffff;
}

.job-btn.primary:hover:not(:disabled) {
  background: var(--job-primary-hover);
  border-color: var(--job-primary-hover);
}

.job-btn.ghost {
  background: #ffffff;
}

.job-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* ==============================
   Actions
   ============================== */

.job-add-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--job-border);
}


/* ==============================
   FieldComments Compatibility
   ============================== */

.job-add-page .field-comments {
  width: 100%;
}

.job-add-page .comment-row,
.job-add-page .comment-item {
  min-width: 0;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 950px) {
  .job-add-container {
    padding: 20px;
  }

  .job-add-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .job-add-sidebar {
    padding: 24px 16px;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .job-add-container {
    padding: 14px;
  }

  .job-add-header h1 {
    font-size: 22px;
  }

  .job-add-card {
    grid-template-columns: 1fr;
  }

  .job-add-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--job-border);
  }

  .job-add-barcode,
  .job-add-reference,
  .job-add-sidebar-note,
  .job-add-regenerate {
    max-width: 360px;
  }

  .job-add-form {
    padding: 18px;
  }

  .job-grid {
    grid-template-columns: 1fr;
  }

  .job-full {
    grid-column: auto;
  }

  .job-field input,
  .job-field select,
  .job-field textarea,
  .job-add-page .formInput input,
  .job-add-page .formInput select,
  .job-add-page .formInput textarea {
    font-size: 16px;
  }

  .job-field input,
  .job-field select,
  .job-add-page .formInput input,
  .job-add-page .formInput select {
    height: 44px;
  }

  .job-add-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .job-add-actions .job-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .job-add-container {
    padding: 10px;
  }

  .job-add-header h1 {
    font-size: 20px;
  }

  .job-add-card {
    border-radius: 10px;
  }

  .job-add-sidebar {
    padding: 20px 14px;
  }

  .job-add-form {
    padding: 15px;
  }

  .job-section-card + .job-section-card {
    margin-top: 22px;
    padding-top: 22px;
  }

  .job-section-heading h2 {
    font-size: 16px;
  }

  .job-add-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .job-add-page *,
  .job-add-page *::before,
  .job-add-page *::after {
    transition: none !important;
    animation: none !important;
  }
}.so-root {
  position: fixed;
  inset: 0;
  z-index: 1200;

  visibility: hidden;
  pointer-events: none;
}

.so-root.open {
  visibility: visible;
  pointer-events: auto;
}

/* ==============================
   Backdrop
   ============================== */

.so-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);

  opacity: 0;

  transition: opacity 0.2s ease;
}

.so-root.open .so-backdrop {
  opacity: 1;
}

/* ==============================
   Drawer
   ============================== */

.so-panel {
  position: absolute;
  top: 0;
  right: 0;

  width: min(720px, 94vw);
  height: 100dvh;
  max-height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border-left: 1px solid #e5e7eb;

  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12);

  transform: translateX(100%);

  transition: transform 0.22s ease;
}

.so-root.open .so-panel {
  transform: translateX(0);
}

/* ==============================
   Header
   ============================== */

.so-header {
  flex-shrink: 0;

  min-height: 64px;

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

  gap: 12px;
  padding: 14px 18px;

  background: #ffffff;

  border-bottom: 1px solid #e5e7eb;
}

.so-header h3 {
  margin: 0;

  color: #111827;

  font-size: 17px;
  font-weight: 700;
}

.so-close {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  background-color: #fdc9c9;
  color: #f84e4e;

  border: 0;
  border-radius: 8px;

  font-family: inherit;
  font-size: 18px;

  cursor: pointer;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.so-close:hover {
  background-color: #fb9898;
  color: #ffffff;
}

/* ==============================
   Scrollable Body
   ============================== */

.so-body {
  flex: 1;

  min-width: 0;
  min-height: 0;

  padding: 18px;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;
}

/* ==============================
   Footer
   ============================== */

.so-footer {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;
  padding: 12px 18px;

  background: #ffffff;

  border-top: 1px solid #e5e7eb;
}
/* ==============================
   Job Parts Drawer
   ============================== */

.job-parts-drawer {
  --jpd-text: #111827;
  --jpd-muted: #6b7280;
  --jpd-border: #e5e7eb;
  --jpd-border-dark: #d1d5db;

  --jpd-primary: #ff8c00;
  --jpd-primary-hover: #e67e00;
  --jpd-primary-soft: #fff7ed;
  --jpd-focus: rgba(255, 140, 0, 0.16);

  --jpd-danger: #dc2626;
  --jpd-success: #15803d;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: hidden;

  color: var(--jpd-text);
}

.job-parts-drawer,
.job-parts-drawer * {
  box-sizing: border-box;
}


/* ==============================
   Sections
   ============================== */

.job-parts-section {
  width: 100%;
  min-width: 0;
}

.job-parts-section + .job-parts-section {
  margin-top: 26px;
  padding-top: 26px;

  border-top: 1px solid var(--jpd-border);
}


/* ==============================
   Section Header
   ============================== */

.job-parts-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;
  margin-bottom: 16px;
}

.job-parts-section-heading {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 11px;
}

.job-parts-section-icon {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--jpd-primary-soft);

  border-radius: 9px;

  color: var(--jpd-primary-hover);

  font-size: 16px;
}

.job-parts-section-heading > div:last-child {
  min-width: 0;
}

.job-parts-section-header h3 {
  margin: 0;

  color: var(--jpd-text);

  font-size: 16px;
  font-weight: 700;
}

.job-parts-section-header p {
  margin: 4px 0 0;

  color: var(--jpd-muted);

  font-size: 11px;
  line-height: 1.45;
}


/* ==============================
   Count
   ============================== */

.job-parts-count {
  min-width: 30px;
  height: 30px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 9px;

  background: #fafafa;

  border: 1px solid var(--jpd-border);
  border-radius: 999px;

  color: #4b5563;

  font-size: 11px;
  font-weight: 700;
}


/* ==============================
   Reset
   ============================== */

.job-parts-reset {
  min-height: 34px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
  padding: 6px 9px;

  background: transparent;

  border: 1px solid transparent;
  border-radius: 8px;

  color: #6b7280;

  font-family: inherit;
  font-size: 10px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.job-parts-reset:hover:not(:disabled) {
  background: #f9fafb;

  border-color: var(--jpd-border);

  color: #374151;
}

.job-parts-reset:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}


/* ==============================
   Form
   ============================== */

.job-parts-form {
  min-width: 0;
}

.job-parts-form-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 120px;

  gap: 12px;
}

.job-parts-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

.job-parts-field > label {
  color: #374151;

  font-size: 12px;
  font-weight: 600;
}

.job-parts-field > label span {
  color: var(--jpd-danger);
}

.job-parts-field input,
.job-parts-field select,
.job-parts-field textarea {
  width: 100%;
  min-width: 0;

  padding: 9px 12px;

  background: #ffffff;

  border: 1px solid var(--jpd-border);
  border-radius: 9px;

  color: var(--jpd-text);

  font-family: inherit;
  font-size: 13px;

  outline: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.job-parts-field input,
.job-parts-field select {
  height: 42px;
}

.job-parts-field textarea {
  min-height: 66px;

  resize: vertical;
}

.job-parts-field input:hover:not(:disabled),
.job-parts-field select:hover:not(:disabled),
.job-parts-field textarea:hover:not(:disabled) {
  border-color: var(--jpd-border-dark);
}

.job-parts-field input:focus,
.job-parts-field select:focus,
.job-parts-field textarea:focus {
  border-color: var(--jpd-primary);

  box-shadow:
    0 0 0 3px var(--jpd-focus);
}

.job-parts-field input:disabled,
.job-parts-field select:disabled,
.job-parts-field textarea:disabled {
  background: #f3f4f6;

  color: #6b7280;

  cursor: not-allowed;
}


/* ==============================
   Selected Product
   ============================== */

.job-parts-product-preview {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 12px;
  padding: 11px 12px;

  background: #fafafa;

  border: 1px solid var(--jpd-border);
  border-radius: 10px;
}

.job-parts-product-image-wrap {
  width: 62px;
  height: 62px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jpd-border);
  border-radius: 9px;

  color: #c4c9d1;

  font-size: 23px;
}

.job-parts-product-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 4px;
}

.job-parts-product-info {
  min-width: 0;

  flex: 1;
}

.job-parts-product-info > strong {
  display: block;

  overflow: hidden;

  color: var(--jpd-text);

  font-size: 13px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-parts-product-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 5px 12px;
  margin-top: 6px;
}

.job-parts-product-meta span {
  color: var(--jpd-muted);

  font-size: 10px;
}

.job-parts-product-meta span strong {
  color: #4b5563;

  font-weight: 600;
}


/* ==============================
   Bottom Form Row
   ============================== */

.job-parts-bottom-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  align-items: end;

  gap: 12px;
  margin-top: 14px;
}

.job-parts-add-action {
  display: flex;
  align-items: flex-end;
}

.job-parts-add-action
  .job-parts-btn {
  min-width: 120px;
}


/* ==============================
   Comment Input
   ============================== */

.job-parts-comment-input {
  position: relative;

  min-width: 0;
}

.job-parts-comment-input > svg {
  position: absolute;

  top: 11px;
  left: 11px;

  z-index: 1;

  color: #9ca3af;

  font-size: 13px;

  pointer-events: none;
}

.job-parts-comment-input textarea {
  padding-left: 33px;
}


/* ==============================
   Buttons
   ============================== */

.job-parts-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 15px;

  background: #ffffff;

  border:
    1px solid
    var(--jpd-border-dark, #d1d5db);

  border-radius: 9px;

  color: #374151;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.job-parts-btn:hover:not(:disabled) {
  background: #f9fafb;

  border-color: #9ca3af;
}

.job-parts-btn.primary {
  background:
    var(--jpd-primary, #ff8c00);

  border-color:
    var(--jpd-primary, #ff8c00);

  color: #ffffff;
}

.job-parts-btn.primary:hover:not(:disabled) {
  background:
    var(--jpd-primary-hover, #e67e00);

  border-color:
    var(--jpd-primary-hover, #e67e00);
}

.job-parts-btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}


/* ==============================
   Empty State
   ============================== */

.job-parts-empty {
  min-height: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  background: #fafafa;

  border: 1px dashed var(--jpd-border-dark);
  border-radius: 10px;

  text-align: center;
}

.job-parts-empty-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 3px;

  background: #ffffff;

  border: 1px solid var(--jpd-border);
  border-radius: 9px;

  color: #c4c9d1;

  font-size: 19px;
}

.job-parts-empty strong {
  color: #4b5563;

  font-size: 12px;
}

.job-parts-empty span {
  max-width: 300px;

  color: var(--jpd-muted);

  font-size: 10px;
  line-height: 1.45;
}


/* ==============================
   Table Scroll
   Horizontal only
   ============================== */

.job-parts-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  border: 1px solid var(--jpd-border);
  border-radius: 10px;

  -webkit-overflow-scrolling: touch;
}


/* ==============================
   Table
   ============================== */

.job-parts-table {
  width: 100%;
  min-width: 620px;

  border-collapse: collapse;

  font-size: 12px;
}

.job-parts-table th {
  padding: 10px 11px;

  background: #fafafa;

  border-bottom: 1px solid var(--jpd-border);

  color: #374151;

  font-size: 11px;
  font-weight: 700;

  text-align: left;
  white-space: nowrap;
}

.job-parts-table td {
  padding: 10px 11px;

  border-bottom: 1px solid #f0f0f0;

  color: #4b5563;

  vertical-align: middle;
}

.job-parts-table tbody tr:last-child td {
  border-bottom: 0;
}

.job-parts-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.045);
}


/* ==============================
   Table Product
   ============================== */

.job-parts-list-product {
  min-width: 210px;

  display: flex;
  align-items: center;

  gap: 9px;
}

.job-parts-list-image-wrap {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jpd-border);
  border-radius: 7px;

  color: #c4c9d1;

  font-size: 17px;
}

.job-parts-list-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 3px;
}

.job-parts-list-details {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.job-parts-list-details strong {
  max-width: 230px;

  overflow: hidden;

  color: var(--jpd-text);

  font-size: 11px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-parts-list-details small {
  max-width: 230px;

  overflow: hidden;

  color: #9ca3af;

  font-size: 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==============================
   Quantity
   ============================== */

.job-parts-quantity {
  min-width: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #374151;

  font-size: 10px;
  font-weight: 700;
}


/* ==============================
   Status
   ============================== */

.job-parts-status {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;

  border-radius: 999px;

  background: #f3f4f6;

  color: #4b5563;

  font-size: 9px;
  font-weight: 700;

  text-transform: capitalize;
  white-space: nowrap;
}

.job-parts-status.status-added,
.job-parts-status.status-complete,
.job-parts-status.status-completed {
  background: #f0fdf4;

  color: #15803d;
}

.job-parts-status.status-required {
  background: #fff7ed;

  color: #c2410c;
}

.job-parts-status.status-removed,
.job-parts-status.status-deleted {
  background: #fef2f2;

  color: #dc2626;
}

.job-parts-status.status-subtracted {
  background: #fefce8;

  color: #a16207;
}


/* ==============================
   Comment Cell
   ============================== */

.job-parts-comment-cell {
  min-width: 170px;
  max-width: 260px;

  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .job-parts-form-grid,
  .job-parts-bottom-grid {
    grid-template-columns: 1fr;
  }

  .job-parts-add-action {
    justify-content: stretch;
  }

  .job-parts-add-action
    .job-parts-btn {
    width: 100%;
  }

  .job-parts-field input,
  .job-parts-field select,
  .job-parts-field textarea {
    font-size: 16px;
  }

  .job-parts-field input,
  .job-parts-field select {
    height: 44px;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .job-parts-section + .job-parts-section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .job-parts-section-header {
    gap: 8px;
  }

  .job-parts-section-header h3 {
    font-size: 15px;
  }

  .job-parts-product-preview {
    align-items: flex-start;
  }

  .job-parts-product-image-wrap {
    width: 54px;
    height: 54px;
  }
}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .job-parts-drawer *,
  .job-parts-drawer *::before,
  .job-parts-drawer *::after {
    transition: none !important;
    animation: none !important;
  }
}/* ==============================
   Job Fitting Drawer
   ============================== */

.job-fitting-drawer {
  --jfd-text: #111827;
  --jfd-muted: #6b7280;
  --jfd-border: #e5e7eb;
  --jfd-border-dark: #d1d5db;

  --jfd-primary: #ff8c00;
  --jfd-primary-hover: #e67e00;
  --jfd-primary-soft: #fff7ed;
  --jfd-focus: rgba(255, 140, 0, 0.16);

  --jfd-danger: #dc2626;
  --jfd-success: #15803d;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow-x: hidden;

  color: var(--jfd-text);
}

.job-fitting-drawer,
.job-fitting-drawer * {
  box-sizing: border-box;
}

/* ==============================
   Sections
   ============================== */

.job-fitting-section {
  width: 100%;
  min-width: 0;
}

.job-fitting-section + .job-fitting-section {
  margin-top: 26px;
  padding-top: 26px;

  border-top: 1px solid var(--jfd-border);
}

.job-fitting-section-header {
  display: flex;
  align-items: flex-start;

  gap: 11px;
  margin-bottom: 16px;
}

.job-fitting-section-icon {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--jfd-primary-soft);

  border-radius: 9px;

  color: var(--jfd-primary-hover);

  font-size: 16px;
}

.job-fitting-section-header h3 {
  margin: 0;

  color: var(--jfd-text);

  font-size: 16px;
  font-weight: 700;
}

.job-fitting-section-header p {
  margin: 4px 0 0;

  color: var(--jfd-muted);

  font-size: 11px;
  line-height: 1.45;
}

/* ==============================
   Standard Fields
   ============================== */

.job-fitting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px;

  margin-top: 14px;
}

.job-fitting-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

.job-fitting-field > label {
  color: #374151;

  font-size: 12px;
  font-weight: 600;
}

.job-fitting-field > label span {
  color: var(--jfd-danger);
}

.job-fitting-field input,
.job-fitting-field select {
  width: 100%;
  min-width: 0;

  padding: 9px 12px;

  background: #ffffff;

  border: 1px solid var(--jfd-border);
  border-radius: 9px;

  color: var(--jfd-text);

  font-family: inherit;
  font-size: 13px;

  outline: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.job-fitting-field input,
.job-fitting-field select {
  height: 42px;
}

.job-fitting-field input:hover:not(:disabled),
.job-fitting-field select:hover:not(:disabled) {
  border-color: var(--jfd-border-dark);
}

.job-fitting-field input:focus,
.job-fitting-field select:focus {
  border-color: var(--jfd-primary);
  box-shadow: 0 0 0 3px var(--jfd-focus);
}

.job-fitting-field input:disabled,
.job-fitting-field select:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

/* ==============================
   Fitters
   ============================== */

.job-fitting-loading {
  padding: 13px;

  background: #fafafa;
  border: 1px dashed var(--jfd-border-dark);
  border-radius: 9px;

  color: var(--jfd-muted);
  font-size: 12px;
  text-align: center;
}

/* ==============================
   Selected Fitters
   ============================== */

.job-fitting-selected {
  margin-top: 12px;
  padding: 11px 12px;

  background: #fafafa;

  border: 1px solid var(--jfd-border);
  border-radius: 9px;
}

.job-fitting-selected-title {
  display: flex;
  align-items: center;

  gap: 6px;
  margin-bottom: 8px;

  color: #4b5563;

  font-size: 11px;
  font-weight: 600;
}

.job-fitting-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.job-fitting-selected-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 25px;
  padding: 4px 5px 4px 9px;

  background: var(--jfd-primary-soft);
  border-radius: 10px;

  color: var(--jfd-primary-hover);
  font-size: 10px;
  font-weight: 700;
}

.job-fitting-selected-item button {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 50%;

  color: inherit;

  font-size: 16px;
  line-height: 1;

  cursor: pointer;
}

.job-fitting-selected-item button:hover:not(:disabled) {
  background: rgba(255, 140, 0, 0.15);
}

.job-fitting-selected-item button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==============================
   Photo Groups
   ============================== */

.job-fitting-photo-groups {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.job-fitting-photo-group {
  min-width: 0;

  padding: 13px;

  background: #fafafa;

  border: 1px solid var(--jfd-border);
  border-radius: 11px;
}

.job-fitting-photo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
  margin-bottom: 12px;
}

.job-fitting-photo-header > div {
  min-width: 0;
}

.job-fitting-photo-header strong {
  display: block;

  color: #374151;

  font-size: 12px;
}

.job-fitting-photo-header span:not(.job-fitting-photo-count) {
  display: block;

  margin-top: 3px;

  color: var(--jfd-muted);

  font-size: 10px;
  line-height: 1.4;
}

.job-fitting-photo-count {
  min-width: 25px;
  height: 25px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 7px;

  background: #ffffff;

  border: 1px solid var(--jfd-border);
  border-radius: 999px;

  color: #4b5563;

  font-size: 10px;
  font-weight: 700;
}

/* ==============================
   Photo Thumbnails
   ============================== */

.job-fitting-photo-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 7px;

  margin-bottom: 11px;
}

.job-fitting-photo {
  position: relative;

  min-width: 0;
  aspect-ratio: 1;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jfd-border);
  border-radius: 8px;
}

.job-fitting-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.job-fitting-photo-remove {
  position: absolute;

  top: 5px;
  right: 5px;

  width: 26px;
  height: 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(255, 255, 255, 0.94);

  border: 0;
  border-radius: 7px;

  color: var(--jfd-danger);

  font-size: 12px;

  cursor: pointer;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.job-fitting-photo-remove:hover:not(:disabled) {
  background: #fef2f2;
}

.job-fitting-photo-remove:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

.job-fitting-photo-new {
  position: absolute;

  bottom: 5px;
  left: 5px;

  padding: 3px 6px;

  background: rgba(17, 24, 39, 0.8);

  border-radius: 999px;

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;

  text-transform: uppercase;
}

/* ==============================
   Empty Photo Area
   ============================== */

.job-fitting-photo-empty {
  min-height: 90px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  margin-bottom: 11px;

  background: #ffffff;

  border: 1px dashed var(--jfd-border-dark);

  border-radius: 8px;

  color: #c4c9d1;

  font-size: 22px;
}

.job-fitting-photo-empty span {
  color: var(--jfd-muted);

  font-size: 10px;
}

/* ==============================
   Camera / Gallery Actions
   ============================== */

.job-fitting-photo-actions {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;
}

.job-fitting-photo-input {
  display: none;
}

.job-fitting-photo-btn {
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
  padding: 7px 8px;

  background: #ffffff;

  border: 1px solid var(--jfd-border-dark);

  border-radius: 8px;

  color: #374151;

  font-size: 10px;
  font-weight: 600;

  cursor: pointer;

  text-align: center;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.job-fitting-photo-btn:hover {
  background: var(--jfd-primary-soft);

  border-color: #fed7aa;

  color: var(--jfd-primary-hover);
}

.job-fitting-photo-btn.disabled {
  opacity: 0.5;

  pointer-events: none;
}

/* ==============================
   Automatic Checklist
   ============================== */

.job-fitting-checklist {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.job-fitting-check {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
  padding: 11px;

  background: #fafafa;

  border: 1px solid var(--jfd-border);
  border-radius: 9px;
}

.job-fitting-check.complete {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.job-fitting-check-icon {
  flex-shrink: 0;

  display: flex;

  color: #9ca3af;

  font-size: 18px;
}

.job-fitting-check.complete .job-fitting-check-icon {
  color: var(--jfd-success);
}

.job-fitting-check-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.job-fitting-check-content strong {
  color: #374151;

  font-size: 11px;
  font-weight: 600;
}

.job-fitting-check-content span {
  color: var(--jfd-muted);

  font-size: 9px;
}

/* ==============================
   Buttons
   ============================== */

.job-fitting-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 15px;

  background: #ffffff;
  border: 1px solid var(--jfd-border-dark);
  border-radius: 9px;

  color: #374151;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.job-fitting-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;

  transform: translateY(-1px);
}

.job-fitting-btn.primary {
  min-width: 120px;

  background: var(--jfd-primary, #ff8c00);
  border-color: var(--jfd-primary, #ff8c00);

  color: #ffffff;
}

.job-fitting-btn.primary:hover:not(:disabled) {
  background: var(--jfd-primary-hover, #e67e00);
  border-color: var(--jfd-primary-hover, #e67e00);
}

.job-fitting-btn.ghost {
  background: #ffffff;
}

.job-fitting-btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;
  transform: none;
}

/* ========= COMMENTS ========= */
/* ==============================
   Fitting Comments
   ============================== */

.job-fitting-comments {
  display: flex;
  flex-direction: column;

  gap: 7px;
  margin-bottom: 12px;
}

.job-fitting-comment {
  display: flex;
  align-items: flex-start;

  gap: 9px;
  padding: 10px;

  background: #fafafa;

  border: 1px solid var(--jfd-border);
  border-radius: 9px;
}

.job-fitting-comment-number {
  width: 23px;
  height: 23px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--jfd-primary-soft);

  border-radius: 50%;

  color: var(--jfd-primary-hover);

  font-size: 9px;
  font-weight: 700;
}

.job-fitting-comment-text {
  min-width: 0;

  flex: 1;

  color: #4b5563;

  font-size: 12px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.job-fitting-comment button {
  width: 28px;
  height: 28px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 7px;

  color: #9ca3af;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.job-fitting-comment button:hover:not(:disabled) {
  background: #fef2f2;

  color: var(--jfd-danger);
}

.job-fitting-comment button:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

/* ==============================
   Add Comment
   ============================== */

.job-fitting-comment-add {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 8px;

  width: 100%;
  min-width: 0;
}

.job-fitting-comment-add input {
  width: 100%;
  min-width: 0;
  height: 42px;

  padding: 9px 12px;

  background: #ffffff;

  border: 1px solid var(--jfd-border);
  border-radius: 9px;

  color: var(--jfd-text);

  font-family: inherit;
  font-size: 13px;

  outline: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.job-fitting-comment-add input:hover:not(:disabled) {
  border-color: var(--jfd-border-dark);
}

.job-fitting-comment-add input:focus {
  border-color: var(--jfd-primary);

  box-shadow: 0 0 0 3px var(--jfd-focus);
}

.job-fitting-comment-add input:disabled {
  background: #f3f4f6;

  color: #6b7280;

  cursor: not-allowed;
}

.job-fitting-comment-add .job-fitting-btn {
  align-self: stretch;
}

/* ==============================
   Clickable Photo
   ============================== */

.job-fitting-photo-view {
  width: 100%;
  height: 100%;

  display: block;

  padding: 0;

  background: transparent;

  border: 0;

  cursor: zoom-in;
}

.job-fitting-photo-view img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.18s ease;
}

.job-fitting-photo:hover .job-fitting-photo-view img {
  transform: scale(1.035);
}

/* ==============================
   Enlarged Fitting Image Viewer
   ============================== */

.job-fitting-image-viewer {
  position: fixed;
  inset: 0;

  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(17, 24, 39, 0.72);

  backdrop-filter: blur(4px);
}

.job-fitting-image-viewer-panel {
  width: min(1100px, 96vw);
  max-height: 94dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 14px;

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* Header */

.job-fitting-image-viewer-header {
  flex-shrink: 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  padding: 15px 18px;

  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.job-fitting-image-viewer-header h3 {
  margin: 0;

  color: #111827;

  font-size: 16px;
  font-weight: 700;
}

.job-fitting-image-viewer-header span {
  display: block;

  margin-top: 4px;

  color: #6b7280;

  font-size: 11px;
  line-height: 1.4;
}

.job-fitting-image-viewer-close {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: #f9fafb;

  border: 1px solid #e5e7eb;
  border-radius: 8px;

  color: #4b5563;

  font-size: 16px;

  cursor: pointer;
}

.job-fitting-image-viewer-close:hover {
  background: #f3f4f6;

  color: #111827;
}

/* Main Image */

.job-fitting-image-viewer-content {
  position: relative;

  min-height: 0;
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 70px;

  overflow: hidden;

  background: rgba(17, 24, 39, 0.5);
}

.job-fitting-image-viewer-content img {
  display: block;

  max-width: 100%;
  max-height: calc(94dvh - 150px);

  object-fit: contain;

  border-radius: 6px;
}

/* Previous / Next */

.job-fitting-image-viewer-nav {
  position: absolute;

  top: 50%;

  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(255, 255, 255, 0.92);

  border: 0;
  border-radius: 50%;

  color: #111827;

  font-size: 18px;

  cursor: pointer;

  transform: translateY(-50%);

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);

  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.job-fitting-image-viewer-nav:hover {
  background: #ffffff;

  transform: translateY(-50%) scale(1.05);
}

.job-fitting-image-viewer-nav.previous {
  left: 16px;
}

.job-fitting-image-viewer-nav.next {
  right: 16px;
}

/* Viewer Footer */

.job-fitting-image-viewer-footer {
  flex-shrink: 0;

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

  gap: 12px;

  padding: 12px 18px;

  background: #ffffff;

  border-top: 1px solid #e5e7eb;
}

.job-fitting-image-viewer-footer > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.job-fitting-image-viewer-footer strong {
  color: #374151;

  font-size: 12px;
}

.job-fitting-image-viewer-footer > div > span {
  color: #6b7280;

  font-size: 10px;
}

.job-fitting-image-viewer-new {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 8px;

  background: var(--jfd-primary-soft, #fff7ed);

  border-radius: 999px;

  color: var(--jfd-primary-hover, #e67e00);

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
}

@media (max-width: 600px) {
  .job-fitting-image-viewer {
    padding: 8px;
  }

  .job-fitting-image-viewer-panel {
    width: 100%;
    max-height: 96dvh;

    border-radius: 10px;
  }

  .job-fitting-image-viewer-header {
    padding: 12px;
  }

  .job-fitting-image-viewer-content {
    padding: 12px 48px;
  }

  .job-fitting-image-viewer-content img {
    max-height: calc(96dvh - 145px);
  }

  .job-fitting-image-viewer-nav {
    width: 36px;
    height: 36px;

    font-size: 15px;
  }

  .job-fitting-image-viewer-nav.previous {
    left: 7px;
  }

  .job-fitting-image-viewer-nav.next {
    right: 7px;
  }

  .job-fitting-image-viewer-footer {
    padding: 10px 12px;
  }
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .job-fitting-grid,
  .job-fitting-photo-groups,
  .job-fitting-checklist {
    grid-template-columns: 1fr;
  }

  .job-fitting-comment-add {
    grid-template-columns: 1fr;
  }

  .job-fitting-field input,
  .job-fitting-field select {
    font-size: 16px;
  }

  .job-fitting-field input,
  .job-fitting-field select,
  .job-fitting-comment-add input {
    height: 44px;
  }

  .job-fitting-comment-add input {
    font-size: 16px;
  }

  .job-fitting-comment-add .job-fitting-btn {
    width: 100%;
  }
}

/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .job-fitting-section + .job-fitting-section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .job-fitting-section-header h3 {
    font-size: 15px;
  }

  .job-fitting-photo-actions {
    grid-template-columns: 1fr;
  }

  .job-fitting-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .job-fitting-drawer *,
  .job-fitting-drawer *::before,
  .job-fitting-drawer *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ==============================
   Job Repair Drawer
   ============================== */

.job-repair-drawer {
  --jrd-text: #111827;
  --jrd-muted: #6b7280;
  --jrd-border: #e5e7eb;
  --jrd-border-dark: #d1d5db;

  --jrd-primary: #ff8c00;
  --jrd-primary-hover: #e67e00;
  --jrd-primary-soft: #fff7ed;
  --jrd-focus: rgba(255, 140, 0, 0.16);

  --jrd-danger: #dc2626;
  --jrd-success: #15803d;
  --jrd-warning: #a16207;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow-x: hidden;

  color: var(--jrd-text);
}

.job-repair-drawer,
.job-repair-drawer * {
  box-sizing: border-box;
}

/* ==============================
   Warning
   ============================== */

.job-repair-warning {
  display: flex;
  align-items: flex-start;

  gap: 10px;
  padding: 12px;

  background: #fefce8;

  border: 1px solid #fde68a;
  border-radius: 10px;

  color: #a16207;
}

.job-repair-warning > svg {
  flex-shrink: 0;

  margin-top: 2px;

  font-size: 17px;
}

.job-repair-warning > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.job-repair-warning strong {
  font-size: 12px;
}

.job-repair-warning span {
  font-size: 10px;
  line-height: 1.45;
}

/* ==============================
   Sections
   ============================== */

.job-repair-section {
  width: 100%;
  min-width: 0;
}

.job-repair-warning + .job-repair-section {
  margin-top: 24px;
}

.job-repair-section + .job-repair-section {
  margin-top: 12px;
  padding-top: 26px;

  border-top: 1px solid var(--jrd-border);
}

.job-repair-section-header {
  display: flex;
  align-items: flex-start;

  gap: 11px;
  margin-bottom: 16px;
}

.job-repair-section-icon {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--jrd-primary-soft);

  border-radius: 9px;

  color: var(--jrd-primary-hover);

  font-size: 16px;
}

.job-repair-section-header h3 {
  margin: 0;

  color: var(--jrd-text);

  font-size: 16px;
  font-weight: 700;
}

.job-repair-section-header p {
  margin: 4px 0 0;

  color: var(--jrd-muted);

  font-size: 11px;
  line-height: 1.45;
}

/* ==============================
   Fields
   ============================== */

.job-repair-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

.job-repair-field > label {
  color: #374151;

  font-size: 12px;
  font-weight: 600;
}

.job-repair-field > label span {
  color: var(--jrd-danger);
}

.job-repair-field input,
.job-repair-field select,
.job-repair-field textarea,
.job-repair-comment-add textarea,
.job-repair-photo-comment textarea {
  width: 100%;
  min-width: 0;

  padding: 9px 12px;

  background: #ffffff;

  border: 1px solid var(--jrd-border);
  border-radius: 9px;

  color: var(--jrd-text);

  font-family: inherit;
  font-size: 14px;

  outline: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.job-repair-field input,
.job-repair-field select {
  height: 42px;
}

.job-repair-field textarea,
.job-repair-comment-add textarea,
.job-repair-photo-comment textarea {
  resize: vertical;
}

.job-repair-field input:hover:not(:disabled),
.job-repair-field select:hover:not(:disabled),
.job-repair-field textarea:hover:not(:disabled),
.job-repair-comment-add textarea:hover:not(:disabled),
.job-repair-photo-comment textarea:hover:not(:disabled) {
  border-color: var(--jrd-border-dark);
}

.job-repair-field input:focus,
.job-repair-field select:focus,
.job-repair-field textarea:focus,
.job-repair-comment-add textarea:focus,
.job-repair-photo-comment textarea:focus {
  border-color: var(--jrd-primary);

  box-shadow: 0 0 0 3px var(--jrd-focus);
}

.job-repair-field input:disabled,
.job-repair-field select:disabled,
.job-repair-field textarea:disabled,
.job-repair-comment-add textarea:disabled,
.job-repair-photo-comment textarea:disabled {
  background: #f3f4f6;

  color: #6b7280;

  cursor: not-allowed;
}

/* ==============================
   Repairers
   ============================== */

.job-repair-loading {
  padding: 13px;

  background: #fafafa;

  border: 1px dashed var(--jrd-border-dark);
  border-radius: 9px;

  color: var(--jrd-muted);

  font-size: 12px;

  text-align: center;
}

.job-repair-selected {
  margin-top: 12px;
  padding: 11px 12px;

  background: #fafafa;

  border: 1px solid var(--jrd-border);
  border-radius: 9px;
}

.job-repair-selected-title {
  display: flex;
  align-items: center;

  gap: 6px;
  margin-bottom: 8px;

  color: #4b5563;

  font-size: 11px;
  font-weight: 600;
}

.job-repair-selected-list {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.job-repair-selected-item {
  min-height: 25px;

  display: inline-flex;
  align-items: center;

  gap: 6px;
  padding: 4px 5px 4px 9px;

  background: var(--jrd-primary-soft);

  border-radius: 10px;

  color: var(--jrd-primary-hover);

  font-size: 10px;
  font-weight: 700;
}

.job-repair-selected-item button {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 50%;

  color: inherit;

  font-size: 16px;

  cursor: pointer;
}

.job-repair-selected-item button:hover:not(:disabled) {
  background: rgba(255, 140, 0, 0.15);
}

/* ==============================
   Repair Photos
   ============================== */

.job-repair-photo-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.job-repair-photo-card {
  min-width: 0;

  overflow: hidden;

  background: #fafafa;

  border: 1px solid var(--jrd-border);
  border-radius: 10px;
}

.job-repair-photo {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #111827;
}

.job-repair-photo-view {
  width: 100%;
  height: 100%;

  display: block;

  padding: 0;

  background: transparent;

  border: 0;

  cursor: zoom-in;
}

.job-repair-photo-view img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.18s ease;
}

.job-repair-photo:hover .job-repair-photo-view img {
  transform: scale(1.035);
}

.job-repair-photo-remove {
  position: absolute;

  top: 7px;
  right: 7px;

  width: 29px;
  height: 29px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(255, 255, 255, 0.94);

  border: 0;
  border-radius: 7px;

  color: var(--jrd-danger);

  cursor: pointer;

  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}

.job-repair-photo-number {
  position: absolute;

  bottom: 7px;
  left: 7px;

  min-width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 7px;

  background: rgba(17, 24, 39, 0.78);

  border-radius: 999px;

  color: #ffffff;

  font-size: 9px;
  font-weight: 700;
}

.job-repair-photo-comment {
  padding: 10px;
}

.job-repair-photo-comment label {
  display: block;

  margin-bottom: 6px;

  color: #4b5563;

  font-size: 10px;
  font-weight: 600;
}

.job-repair-photo-comment textarea {
  min-height: 65px;

  font-size: 12px;
}

/* ==============================
   Empty Photos
   ============================== */

.job-repair-photo-empty {
  min-height: 120px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  background: #fafafa;

  border: 1px dashed var(--jrd-border-dark);
  border-radius: 10px;

  color: #c4c9d1;

  text-align: center;
}

.job-repair-photo-empty > svg {
  margin-bottom: 3px;

  font-size: 25px;
}

.job-repair-photo-empty strong {
  color: #4b5563;

  font-size: 12px;
}

.job-repair-photo-empty span {
  color: var(--jrd-muted);

  font-size: 10px;
}

/* ==============================
   Photo Buttons
   ============================== */

.job-repair-photo-actions {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}

.job-repair-photo-input {
  display: none;
}

.job-repair-photo-btn {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
  padding: 8px 10px;

  background: #ffffff;

  border: 1px solid var(--jrd-border-dark);
  border-radius: 8px;

  color: #374151;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.job-repair-photo-btn:hover {
  background: var(--jrd-primary-soft);

  border-color: #fed7aa;

  color: var(--jrd-primary-hover);
}

.job-repair-photo-btn.disabled {
  opacity: 0.5;

  pointer-events: none;
}

/* ==============================
   Repair Comments
   ============================== */

.job-repair-comments {
  display: flex;
  flex-direction: column;

  gap: 7px;
  margin-bottom: 12px;
}

.job-repair-comment {
  display: flex;
  align-items: flex-start;

  gap: 9px;
  padding: 10px;

  background: #fafafa;

  border: 1px solid var(--jrd-border);
  border-radius: 9px;
}

.job-repair-comment-number {
  width: 23px;
  height: 23px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--jrd-primary-soft);

  border-radius: 50%;

  color: var(--jrd-primary-hover);

  font-size: 9px;
  font-weight: 700;
}

.job-repair-comment-text {
  min-width: 0;

  flex: 1;

  color: #4b5563;

  font-size: 12px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.job-repair-comment button {
  width: 28px;
  height: 28px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 7px;

  color: #9ca3af;

  cursor: pointer;
}

.job-repair-comment button:hover:not(:disabled) {
  background: #fef2f2;

  color: var(--jrd-danger);
}

.job-repair-comment-add {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.job-repair-comment-add textarea {
  min-height: 80px;
}

/* ==============================
   Product Preview
   ============================== */

.job-repair-product-preview {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 12px;
  padding: 11px;

  background: #fafafa;

  border: 1px solid var(--jrd-border);
  border-radius: 9px;
}

.job-repair-product-image-wrap {
  width: 64px;
  height: 64px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jrd-border);
  border-radius: 8px;

  color: #c4c9d1;

  font-size: 24px;
}

.job-repair-product-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 4px;
}

.job-repair-product-preview > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.job-repair-product-preview strong {
  color: var(--jrd-text);

  font-size: 12px;
}

.job-repair-product-preview span {
  color: var(--jrd-muted);

  font-size: 10px;
}

/* ==============================
   Part Form
   ============================== */

.job-repair-part-form {
  min-width: 0;
}

.job-repair-part-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px;

  margin-top: 14px;
}

.job-repair-add-part-action {
  display: flex;
  justify-content: flex-end;

  margin-top: 12px;
}

/* ==============================
   Parts Table
   ============================== */

.job-repair-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin-top: 16px;

  overflow-x: auto;
  overflow-y: hidden;

  border: 1px solid var(--jrd-border);
  border-radius: 10px;

  -webkit-overflow-scrolling: touch;
}

.job-repair-table {
  width: 100%;
  min-width: 620px;

  border-collapse: collapse;

  font-size: 12px;
}

.job-repair-table th {
  padding: 10px 11px;

  background: #fafafa;

  border-bottom: 1px solid var(--jrd-border);

  color: #374151;

  font-size: 11px;
  font-weight: 700;

  text-align: left;
  white-space: nowrap;
}

.job-repair-table td {
  padding: 10px 11px;

  border-bottom: 1px solid #f0f0f0;

  color: #4b5563;

  vertical-align: middle;
}

.job-repair-table tbody tr:last-child td {
  border-bottom: 0;
}

.job-repair-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.05);
}

.job-repair-part-product {
  min-width: 180px;

  display: flex;
  align-items: center;

  gap: 9px;
}

.job-repair-part-image-wrap {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jrd-border);
  border-radius: 7px;

  color: #c4c9d1;
}

.job-repair-part-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 3px;
}

.job-repair-part-product strong {
  max-width: 210px;

  overflow: hidden;

  color: var(--jrd-text);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-repair-quantity {
  min-width: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 7px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #374151;

  font-size: 10px;
  font-weight: 700;
}

.job-repair-remove-part {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 7px;

  color: #9ca3af;

  cursor: pointer;
}

.job-repair-remove-part:hover:not(:disabled) {
  background: #fef2f2;

  color: var(--jrd-danger);
}

/* ==============================
   General Empty State
   ============================== */

.job-repair-empty {
  margin-top: 12px;
  padding: 12px;

  background: #fafafa;

  border: 1px dashed var(--jrd-border-dark);
  border-radius: 9px;

  color: var(--jrd-muted);

  font-size: 11px;

  text-align: center;
}

/* ==============================
   Buttons
   ============================== */

.job-repair-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 15px;

  background: #ffffff;

  border: 1px solid var(--jrd-border-dark, #d1d5db);

  border-radius: 9px;

  color: #374151;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;
}

.job-repair-btn.primary {
  min-width: 120px;

  background: var(--jrd-primary, #ff8c00);

  border-color: var(--jrd-primary, #ff8c00);

  color: #ffffff;
}

.job-repair-btn.primary:hover:not(:disabled) {
  background: var(--jrd-primary-hover, #e67e00);

  border-color: var(--jrd-primary-hover, #e67e00);
}

.job-repair-btn.ghost:hover:not(:disabled) {
  background: #f9fafb;

  border-color: #9ca3af;
}

.job-repair-btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

/* ==============================
   Image Viewer
   ============================== */

.job-repair-image-viewer {
  position: fixed;
  inset: 0;

  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(17, 24, 39, 0.82);

  backdrop-filter: blur(4px);
}

.job-repair-image-viewer-panel {
  width: min(1100px, 96vw);
  max-height: 94dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border-radius: 14px;

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.job-repair-image-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
  padding: 14px 18px;

  border-bottom: 1px solid #e5e7eb;
}

.job-repair-image-viewer-header h3 {
  margin: 0;

  color: #111827;

  font-size: 16px;
}

.job-repair-image-viewer-header span {
  display: block;

  margin-top: 3px;

  color: #6b7280;

  font-size: 10px;
}

.job-repair-image-viewer-close {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: #f9fafb;

  border: 1px solid #e5e7eb;
  border-radius: 8px;

  color: #4b5563;

  cursor: pointer;
}

.job-repair-image-viewer-content {
  position: relative;

  min-height: 0;
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 70px;

  overflow: hidden;

  background: #111827;
}

.job-repair-image-viewer-content img {
  display: block;

  max-width: 100%;
  max-height: calc(94dvh - 155px);

  object-fit: contain;

  border-radius: 5px;
}

.job-repair-image-viewer-nav {
  position: absolute;
  top: 50%;

  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(255, 255, 255, 0.92);

  border: 0;
  border-radius: 50%;

  color: #111827;

  cursor: pointer;

  transform: translateY(-50%);
}

.job-repair-image-viewer-nav.previous {
  left: 16px;
}

.job-repair-image-viewer-nav.next {
  right: 16px;
}

.job-repair-image-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
  padding: 12px 18px;

  border-top: 1px solid #e5e7eb;
}

.job-repair-image-viewer-footer > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.job-repair-image-viewer-footer strong {
  color: #374151;

  font-size: 11px;
}

.job-repair-image-viewer-footer > div > span {
  color: #6b7280;

  font-size: 10px;
  line-height: 1.4;
}

.job-repair-image-viewer-count {
  flex-shrink: 0;

  padding: 4px 8px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #4b5563;

  font-size: 10px;
  font-weight: 700;
}

/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .job-repair-photo-grid {
    grid-template-columns: 1fr;
  }

  .job-repair-part-grid {
    grid-template-columns: 1fr;
  }

  .job-repair-field input,
  .job-repair-field select,
  .job-repair-field textarea,
  .job-repair-comment-add textarea,
  .job-repair-photo-comment textarea {
    font-size: 16px;
  }

  .job-repair-field input,
  .job-repair-field select {
    height: 44px;
  }
}

/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .job-repair-section + .job-repair-section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .job-repair-photo-actions {
    grid-template-columns: 1fr;
  }

  .job-repair-image-viewer {
    padding: 8px;
  }

  .job-repair-image-viewer-panel {
    width: 100%;
    max-height: 96dvh;

    border-radius: 10px;
  }

  .job-repair-image-viewer-content {
    padding: 12px 48px;
  }

  .job-repair-image-viewer-content img {
    max-height: calc(96dvh - 150px);
  }

  .job-repair-image-viewer-nav {
    width: 36px;
    height: 36px;
  }

  .job-repair-image-viewer-nav.previous {
    left: 7px;
  }

  .job-repair-image-viewer-nav.next {
    right: 7px;
  }
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
  .job-repair-drawer *,
  .job-repair-drawer *::before,
  .job-repair-drawer *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ==============================
   View Scale Job
   ============================== */

.job-view-page {
  --jv-bg: #f6f7f9;
  --jv-card: #ffffff;

  --jv-text: #111827;
  --jv-muted: #6b7280;

  --jv-border: #e5e7eb;
  --jv-border-dark: #d1d5db;

  --jv-primary: #ff8c00;
  --jv-primary-hover: #e67e00;
  --jv-primary-soft: #fff7ed;
  --jv-focus: rgba(255, 140, 0, 0.16);

  --jv-danger: #dc2626;
  --jv-success: #15803d;
  --jv-warning: #a16207;
  --jv-blue: #2563eb;

  width: 100%;
  min-height: 100vh;

  display: flex;

  background: var(--jv-bg);
  color: var(--jv-text);
}

.job-view-page,
.job-view-page * {
  box-sizing: border-box;
}

.job-view-content {
  flex: 1;
  min-width: 0;
}

.job-view-container {
  width: 100%;
  max-width: 1320px;

  margin: 0 auto;
  padding: 28px;
}


/* ==============================
   Header
   ============================== */

.job-view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
  margin-bottom: 20px;
}

.job-view-heading {
  min-width: 0;
}

.job-view-back {
  display: inline-flex;
  align-items: center;

  gap: 6px;
  padding: 0;

  background: transparent;
  border: 0;

  color: var(--jv-muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.job-view-back:hover {
  color: var(--jv-primary-hover);
}

.job-view-title-row {
  display: flex;
  align-items: center;

  gap: 10px;
  margin-top: 10px;
}

.job-view-title-row h1 {
  margin: 0;

  color: var(--jv-primary);

  font-size: 26px;
  font-weight: 700;
}

.job-view-heading p {
  margin: 7px 0 0;

  color: var(--jv-muted);

  font-size: 14px;
}

.job-view-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 8px;
}


/* ==============================
   Status
   ============================== */

.job-view-status {
  min-height: 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 9px;

  background: #f3f4f6;
  border-radius: 999px;

  color: #4b5563;

  font-size: 11px;
  font-weight: 700;

  text-transform: capitalize;
  white-space: nowrap;
}

.job-view-status.status-open,
.job-view-status.status-active,
.job-view-status.status-in-progress,
.job-view-status.status-inprogress {
  background: #eff6ff;
  color: var(--jv-blue);
}

.job-view-status.status-pending,
.job-view-status.status-awaiting {
  background: #fefce8;
  color: var(--jv-warning);
}

.job-view-status.status-complete,
.job-view-status.status-completed,
.job-view-status.status-finished {
  background: #f0fdf4;
  color: var(--jv-success);
}

.job-view-status.status-cancelled,
.job-view-status.status-canceled,
.job-view-status.status-failed {
  background: #fef2f2;
  color: #b91c1c;
}

.job-view-status.status-closed {
  background: #f3f4f6;
  color: #4b5563;
}


/* ==============================
   Buttons
   ============================== */

.job-view-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 9px 14px;

  background: #ffffff;

  border: 1px solid var(--jv-border-dark);
  border-radius: 9px;

  color: #374151;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.job-view-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;

  transform: translateY(-1px);
}

.job-view-btn.primary {
  background: var(--jv-primary);
  border-color: var(--jv-primary);

  color: #ffffff;
}

.job-view-btn.primary:hover:not(:disabled) {
  background: var(--jv-primary-hover);
  border-color: var(--jv-primary-hover);
}

.job-view-btn.ghost {
  background: #ffffff;
}

.job-view-btn.small {
  min-height: 34px;

  padding: 6px 10px;

  font-size: 12px;
}

.job-view-btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;
  transform: none;
}


/* ==============================
   Main Card
   ============================== */

.job-view-card {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);

  overflow: hidden;

  background: var(--jv-card);

  border: 1px solid var(--jv-border);
  border-radius: 14px;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ==============================
   Left Sidebar
   ============================== */

.job-view-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 28px 20px;

  background: #fafafa;

  border-right: 1px solid var(--jv-border);
}

.job-view-barcode-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--jv-primary-soft);

  border-radius: 14px;

  color: var(--jv-primary);

  font-size: 30px;
}

.job-view-sidebar-title {
  display: flex;
  flex-direction: column;

  gap: 4px;
  margin-top: 16px;

  text-align: center;
}

.job-view-sidebar-title strong {
  color: var(--jv-text);

  font-size: 14px;
}

.job-view-sidebar-title span {
  color: var(--jv-muted);

  font-size: 12px;
  line-height: 1.45;
}


/* ==============================
   Barcode
   ============================== */

.job-view-barcode {
  width: 100%;

  margin-top: 20px;

  text-align: center;
}

.job-view-barcode canvas {
  display: block;

  max-width: 100%;
  height: auto;

  margin: 0 auto;
  padding: 6px;

  background: #ffffff;

  border: 1px dashed var(--jv-border-dark);
  border-radius: 8px;
}

.job-view-reference {
  width: 100%;

  margin-top: 12px;
  padding: 10px 12px;

  background: #ffffff;

  border: 1px solid var(--jv-border);
  border-radius: 9px;

  text-align: center;
}

.job-view-reference span {
  display: block;

  margin-bottom: 4px;

  color: var(--jv-muted);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.job-view-reference strong {
  display: block;

  overflow: hidden;

  color: #374151;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==============================
   Sidebar Summary
   ============================== */

.job-view-summary {
  width: 100%;

  display: flex;
  flex-direction: column;

  margin-top: 22px;

  border-top: 1px solid var(--jv-border);
}

.job-view-summary-item {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 3px;
  padding: 11px 0;

  border-bottom: 1px solid var(--jv-border);
}

.job-view-summary-item span {
  color: var(--jv-muted);

  font-size: 10px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.job-view-summary-item strong {
  overflow-wrap: anywhere;

  color: #374151;

  font-size: 13px;
  font-weight: 600;
}

.job-view-sidebar-meta {
  width: 100%;

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

  gap: 10px;
  margin-top: 18px;
}

.job-view-sidebar-meta > span {
  color: var(--jv-muted);

  font-size: 11px;
  font-weight: 600;
}


/* ==============================
   Main Details
   ============================== */

.job-view-details {
  min-width: 0;

  padding: 28px;
}


/* ==============================
   Section Card Overrides
   ============================== */

.job-view-page .job-section-card {
  width: 100%;
}

.job-view-page .job-section-card + .job-section-card {
  margin-top: 26px;
  padding-top: 26px;

  border-top: 1px solid var(--jv-border);
}


/* ==============================
   Information Grid
   ============================== */

.job-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.job-view-info {
  min-width: 0;

  padding: 12px 13px;

  background: #fafafa;

  border: 1px solid var(--jv-border);
  border-radius: 9px;
}

.job-view-info-full {
  grid-column: 1 / -1;
}

.job-view-label {
  display: block;

  margin-bottom: 5px;

  color: var(--jv-muted);

  font-size: 11px;
  font-weight: 600;
}

.job-view-value {
  display: block;

  overflow-wrap: anywhere;

  color: #374151;

  font-size: 14px;
  line-height: 1.45;
}


/* ==============================
   Users
   ============================== */

.job-view-user-list {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.job-view-user {
  min-height: 26px;

  display: inline-flex;
  align-items: center;

  padding: 4px 9px;

  background: var(--jv-primary-soft);

  border-radius: 999px;

  color: var(--jv-primary-hover);

  font-size: 10px;
  font-weight: 700;
}


/* ==============================
   Comments
   ============================== */

.job-view-comments {
  margin-top: 16px;
  padding: 13px 14px;

  background: #fafafa;

  border: 1px solid var(--jv-border);
  border-radius: 9px;
}

.job-view-comments > strong,
.job-view-subheading {
  display: block;

  color: #374151;

  font-size: 12px;
  font-weight: 700;
}

.job-view-comments > strong {
  margin-bottom: 8px;
}

.job-view-subheading {
  margin-bottom: 10px;
}

.job-view-comments ul {
  margin: 0;
  padding-left: 18px;

  color: var(--jv-muted);

  font-size: 13px;
  line-height: 1.55;
}

.job-view-comments li + li {
  margin-top: 5px;
}


/* ==============================
   Fitting Images
   ============================== */

.job-view-fitting-images {
  margin-top: 18px;
}

.job-view-fitting-image-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.job-view-fitting-image-group {
  min-width: 0;

  padding: 11px;

  background: #fafafa;

  border: 1px solid var(--jv-border);
  border-radius: 10px;
}

.job-view-fitting-image-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
  margin-bottom: 9px;
}

.job-view-fitting-image-header span {
  color: #374151;

  font-size: 11px;
  font-weight: 700;
}

.job-view-fitting-image-header small {
  color: var(--jv-muted);

  font-size: 9px;
}

.job-view-fitting-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 7px;
}

.job-view-fitting-image {
  position: relative;

  min-width: 0;
  aspect-ratio: 1;

  display: block;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jv-border);
  border-radius: 8px;
}

.job-view-fitting-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.18s ease;
}

.job-view-fitting-image:hover img {
  transform: scale(1.04);
}

.job-view-fitting-image > span {
  position: absolute;

  right: 5px;
  bottom: 5px;

  min-width: 21px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  background: rgba(17, 24, 39, 0.75);

  border-radius: 999px;

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;
}


/* ==============================
   Tables
   ============================== */

.job-view-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  border: 1px solid var(--jv-border);
  border-radius: 10px;

  -webkit-overflow-scrolling: touch;
}

.job-view-table {
  width: 100%;
  min-width: 620px;

  border-collapse: collapse;

  font-size: 13px;
}

.job-view-table th {
  padding: 11px 12px;

  background: #fafafa;

  border-bottom: 1px solid var(--jv-border);

  color: #374151;

  font-size: 12px;
  font-weight: 700;

  text-align: left;
  white-space: nowrap;
}

.job-view-table td {
  padding: 10px 12px;

  border-bottom: 1px solid #f0f0f0;

  color: #4b5563;

  vertical-align: middle;
}

.job-view-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.012);
}

.job-view-table tbody tr:hover {
  background: rgba(255, 140, 0, 0.05);
}

.job-view-table tbody tr:last-child td {
  border-bottom: 0;
}

.job-view-qty {
  min-width: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 7px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #374151;

  font-size: 11px;
  font-weight: 700;
}


/* ==============================
   Product Display
   ============================== */

.job-view-part-product {
  min-width: 200px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.job-view-part-image-wrap {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jv-border);
  border-radius: 7px;

  color: #c4c9d1;

  font-size: 18px;
}

.job-view-part-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 3px;
}

.job-view-part-details {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.job-view-part-details strong {
  max-width: 260px;

  overflow: hidden;

  color: var(--jv-text);

  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-view-part-details small {
  color: var(--jv-muted);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  font-size: 10px;
}


/* ==============================
   Empty States
   ============================== */

.job-view-empty {
  min-height: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;
  padding: 20px;

  background: #fafafa;

  border: 1px dashed var(--jv-border-dark);
  border-radius: 10px;

  color: var(--jv-muted);

  text-align: center;
}

.job-view-empty-icon {
  margin-bottom: 4px;

  color: #c4c9d1;

  font-size: 25px;
}

.job-view-empty strong {
  color: #374151;

  font-size: 13px;
}

.job-view-empty span {
  max-width: 380px;

  font-size: 11px;
  line-height: 1.45;
}


/* ==============================
   Repairs
   ============================== */

.job-view-repair-list {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

.job-view-repair-card {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--jv-border);
  border-radius: 11px;
}

.job-view-repair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  padding: 12px 14px;

  background: #fafafa;

  border-bottom: 1px solid var(--jv-border);
}

.job-view-repair-header > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.job-view-repair-header > div > span {
  color: var(--jv-muted);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.job-view-repair-header strong {
  color: #374151;

  font-size: 13px;
}

.job-view-repair-users {
  min-width: 0;

  display: flex;
  justify-content: flex-end;
}

.job-view-repairer-count {
  padding: 4px 8px;

  background: #f3f4f6;

  border-radius: 999px;

  color: #4b5563;

  font-size: 10px;
  font-weight: 600;

  white-space: nowrap;
}

.job-view-repair-card > .job-view-comments {
  margin: 14px;
}


/* ==============================
   Repair Images
   ============================== */

.job-view-repair-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;
  padding: 0 14px 14px;
}

.job-view-repair-image {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #fafafa;

  border: 1px solid var(--jv-border);
  border-radius: 9px;

  color: #374151;

  text-decoration: none;

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.job-view-repair-image:hover {
  border-color: var(--jv-primary);
}

.job-view-repair-image-preview {
  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: #f3f4f6;
}

.job-view-repair-image-preview img,
.job-view-repair-image > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.job-view-repair-image > img {
  height: 110px;
}

.job-view-repair-image > span {
  overflow: hidden;

  padding: 8px 9px;

  color: var(--jv-muted);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==============================
   Repair Parts
   ============================== */

.job-view-repair-parts {
  padding: 0 14px 14px;
}

.job-view-repair-parts-header {
  margin-bottom: 9px;
}

.job-view-repair-parts-header strong {
  color: #374151;

  font-size: 12px;
}

.job-view-repair-empty {
  padding: 12px;

  background: #fafafa;

  border: 1px solid var(--jv-border);
  border-radius: 8px;

  color: var(--jv-muted);

  font-size: 11px;
}


/* ==============================
   Bottom Actions
   ============================== */

.job-view-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 28px;
  padding-top: 18px;

  border-top: 1px solid var(--jv-border);
}


/* ==============================
   Loading / Error
   ============================== */

.job-view-state {
  min-height: 360px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 32px;

  background: #ffffff;

  border: 1px solid var(--jv-border);
  border-radius: 14px;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);

  color: var(--jv-muted);

  text-align: center;
}

.job-view-state-icon {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;

  background: var(--jv-primary-soft);

  border-radius: 50%;

  color: var(--jv-primary);

  font-size: 28px;
}

.job-view-state strong {
  color: var(--jv-text);

  font-size: 16px;
}

.job-view-state span {
  max-width: 380px;

  margin: 6px 0 18px;

  font-size: 13px;
  line-height: 1.5;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 1050px) {
  .job-view-header {
    align-items: flex-start;
  }

  .job-view-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .job-view-sidebar {
    padding: 24px 16px;
  }

  .job-view-repair-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 900px) {
  .job-view-container {
    padding: 20px;
  }

  .job-view-header {
    flex-direction: column;
  }

  .job-view-header-actions {
    width: 100%;

    justify-content: flex-start;
  }
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {
  .job-view-container {
    padding: 14px;
  }

  .job-view-title-row h1 {
    font-size: 22px;
  }

  .job-view-heading p {
    font-size: 13px;
  }

  .job-view-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-view-header-actions .job-view-btn {
    width: 100%;
  }

  .job-view-card {
    grid-template-columns: 1fr;
  }

  .job-view-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--jv-border);
  }

  .job-view-barcode,
  .job-view-reference,
  .job-view-summary,
  .job-view-sidebar-meta {
    max-width: 380px;
  }

  .job-view-details {
    padding: 18px;
  }

  .job-view-grid,
  .job-view-fitting-image-groups {
    grid-template-columns: 1fr;
  }

  .job-view-info-full {
    grid-column: auto;
  }

  .job-view-repair-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-view-repair-users {
    justify-content: flex-start;
  }

  .job-view-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .job-view-bottom-actions .job-view-btn {
    width: 100%;
  }
}


/* ==============================
   Small Mobile
   ============================== */

@media (max-width: 420px) {
  .job-view-container {
    padding: 10px;
  }

  .job-view-title-row {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
  }

  .job-view-title-row h1 {
    font-size: 20px;
  }

  .job-view-header-actions {
    grid-template-columns: 1fr;
  }

  .job-view-card,
  .job-view-state {
    border-radius: 10px;
  }

  .job-view-sidebar {
    padding: 20px 14px;
  }

  .job-view-details {
    padding: 15px;
  }

  .job-view-fitting-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-view-repair-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .job-view-repair-images {
    grid-template-columns: 1fr;
  }

  .job-view-repair-image > img {
    height: 160px;
  }

  .job-view-bottom-actions {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   Reduced Motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
  .job-view-page *,
  .job-view-page *::before,
  .job-view-page *::after {
    transition: none !important;
    animation: none !important;
  }
}.pf-row {
    display: grid;
    grid-template-columns: 2.0fr 70px 0.75fr 40px;
    gap: 4px;
    align-items: end;
}

.pf-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* anchor for absolute dropdown */
    position: relative;
}

.pf-suggest {
  /* position: absolute;
  top: 100%;       
  left: 0;
  right: 0;        
  z-index: 10;       */

  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

  max-height: 220px;    /* prevent huge dropdowns */
  overflow-y: auto;
}

.pf-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    cursor: pointer
}

.pf-suggest button:hover {
    background: #f6f7fb
}.add-manage-scales {
  width: 100%;
  display: flex;
}
.add-manage-scales .ams-container {
  flex: 1;
  padding: 24px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.add-manage-scales .ams-container .ams-top {
  margin-bottom: 16px;
}
.add-manage-scales .ams-container .ams-top h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.add-manage-scales .ams-container .ams-form {
  display: grid;
  gap: 16px;
}
.add-manage-scales .ams-container .card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 16px 16px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
}
.add-manage-scales .ams-container .card h2 {
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: 600;
}
.add-manage-scales .ams-container .card .barcode-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.add-manage-scales .ams-container .card .barcode-wrap canvas {
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 8px;
  background: #fafafa;
}
.add-manage-scales .ams-container .card .barcode-wrap .barcode-readonly {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  min-width: 260px;
  background: #f9f9f9;
}
.add-manage-scales .ams-container .card .grid {
  display: grid;
  gap: 12px;
}
.add-manage-scales .ams-container .card .grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .add-manage-scales .ams-container .card .grid.two-col {
    grid-template-columns: 1fr;
  }
}
.add-manage-scales .ams-container .card .formInput {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.add-manage-scales .ams-container .card .formInput--full {
  grid-column: 1/-1;
}
.add-manage-scales .ams-container .card .formInput label {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
}
.add-manage-scales .ams-container .card .formInput label .req {
  color: #d43131;
  font-weight: 700;
}
.add-manage-scales .ams-container .card .formInput input[type=text],
.add-manage-scales .ams-container .card .formInput input[type=number],
.add-manage-scales .ams-container .card .formInput input[type=date],
.add-manage-scales .ams-container .card .formInput select,
.add-manage-scales .ams-container .card .formInput textarea {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.add-manage-scales .ams-container .card .formInput input[type=text]:focus,
.add-manage-scales .ams-container .card .formInput input[type=number]:focus,
.add-manage-scales .ams-container .card .formInput input[type=date]:focus,
.add-manage-scales .ams-container .card .formInput select:focus,
.add-manage-scales .ams-container .card .formInput textarea:focus {
  border-color: #5a6cff;
  box-shadow: 0 0 0 3px rgba(90, 108, 255, 0.12);
}
.add-manage-scales .ams-container .card .formInput textarea {
  resize: vertical;
}
.add-manage-scales .ams-container .card .kv {
  margin-top: 12px;
}
.add-manage-scales .ams-container .card .kv h3 {
  margin: 8px 0;
}
.add-manage-scales .ams-container .card .kv table {
  width: 100%;
  border-collapse: collapse;
}
.add-manage-scales .ams-container .card .kv td {
  border-top: 1px solid #f0f0f0;
  padding: 8px;
}
.add-manage-scales .ams-container .card .kv td.k {
  width: 260px;
  font-weight: 600;
  text-transform: capitalize;
  color: #333;
}
.add-manage-scales .ams-container .card .kv td.v {
  color: #111;
}
.add-manage-scales .ams-container .card .checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
@media (max-width: 860px) {
  .add-manage-scales .ams-container .card .checklist-grid {
    grid-template-columns: 1fr;
  }
}
.add-manage-scales .ams-container .card .checklist-grid .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.add-manage-scales .ams-container .card .checklist-grid .checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #111827;
}
.add-manage-scales .ams-container .card .uploader {
  border-top: 1px dashed #eee;
  padding-top: 12px;
}
.add-manage-scales .ams-container .card .uploader__label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.add-manage-scales .ams-container .card .uploader__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.add-manage-scales .ams-container .card .uploader__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.add-manage-scales .ams-container .card .uploader .thumb-wrap {
  position: relative;
}
.add-manage-scales .ams-container .card .uploader .thumb {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}
.add-manage-scales .ams-container .card .uploader .btn.tiny {
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 12px;
  padding: 4px 6px;
}
.add-manage-scales .ams-container .actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}
.add-manage-scales .ams-container .actions .btn {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.add-manage-scales .ams-container .actions .btn.primary {
  background: #111827;
  color: #fff;
}
.add-manage-scales .ams-container .actions .btn.secondary {
  background: #f3f4f6;
  color: #111827;
  border-color: #e5e7eb;
}
.add-manage-scales .ams-container .actions .btn.ghost {
  background: transparent;
  color: #111827;
  border-color: #d1d5db;
}
.add-manage-scales .ams-container .repairs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.add-manage-scales .ams-container .repair-block {
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.add-manage-scales .ams-container .repair-block .row {
  display: flex;
  gap: 6px;
  font-size: 14px;
}
.add-manage-scales .ams-container .repair-block .label {
  font-weight: 600;
  min-width: 60px;
}
.add-manage-scales .ams-container .repair-block .parts ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.add-manage-scales .ams-container .repair-block .parts ul li {
  margin: 2px 0;
  font-size: 14px;
}/* Order Cards */
.orderCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.orderCard {
  /* background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Ensures action buttons stay at the bottom */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 280px;
  /* Set a fixed height for uniformity */
  overflow: hidden;
  /* Hide overflow for truncation */
}

.orderCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.orderCard h3 {
  margin: 0 0 10px;
  padding: 5px;
  border-radius: 5px;
  color: white;
  font-size: 20px;
  text-align: center;
}

.orderCard p {
  /* padding: 2px 12px;
  margin: 5px 0;
  font-size: 14px;
  color: #555; */
  padding: 0px 10px;
  margin: 5px 0;
  font-size: 14px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Truncate text with ... */
  white-space: nowrap;
  /* Prevent line breaks */
}

/* For multiline truncation */

.ol-actions {

  display: flex;
  gap: 10px;
  justify-content: space-evenly;
  padding: 7px;
  background: lightgrey;
  margin-top: 5px;
}

.ol-actions button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 20px;
  color: #333;
  transition: color 0.3s ease;

}

.ol-actions button:hover {
  color: #007bff;
  transform: scale(1.1);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination button {
  padding: 10px 15px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
  background-color: #0056b3;
}

.pagination span {
  font-size: 14px;
  color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
  .orderCards {
    grid-template-columns: 1fr;
  }

  .datatableTitle h2 {
    font-size: 20px;
  }

  .datatableTitle .link {
    padding: 8px 15px;
    font-size: 14px;
  }

  .search input {
    font-size: 14px;
  }

  .pagination button {
    font-size: 12px;
  }
}/* .anom-modal {
    max-width: 700px;
    margin: auto;
  }
  
  .anom-form-group {
    margin-bottom: 20px;
  }
  
  .anom-input,
  .anom-textarea,
  .anom-select,
  .anom-search-bar {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .anom-textarea {
    resize: none;
  }
  
  .anom-search-results {
    max-height: 150px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
  }
  
  .anom-search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .anom-add-button {
    margin-left: 10px;
  }
  
  .anom-selected-products {
    margin-top: 20px;
  }
  
  .anom-selected-products h5 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .anom-selected-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fdfdfd;
  }
  
  .anom-quantity-input {
    width: 60px;
    text-align: center;
    margin: 0 10px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .anom-remove-button {
    margin-left: 10px;
  }
  
  .anom-close-button,
  .anom-submit-button {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .anom-submit-button {
    background-color: #007bff;
    border: none;
    color: white;
    transition: background-color 0.3s;
  }
  
  .anom-submit-button:hover {
    background-color: #0056b3;
  }
   */
/* AddNewOrderModal.css */

/* Modal styling */
.anom-modal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.anom-modal .modal-title {
    font-weight: bold;
    font-size: 1.5rem;
    color: #343a40;
}

.anom-modal .modal-footer {
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
}

/* Form group styles */
.anom-form-group {
    margin-bottom: 1rem;
}

.anom-input,
.anom-textarea,
.anom-select,
.anom-search-bar {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 0.5rem;
    font-size: 1rem;
}

/* Search results container */
.anom-search-results {
    margin-top: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5rem;
    background-color: #ffffff;
}

.anom-search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.anom-search-result-item:last-child {
    border-bottom: none;
}

.anom-add-button {
    margin-left: 1rem;
    background-color: #6161d0;
    color: #fff;
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    transition: background-color 0.3s ease-in-out, transform 0.2s;

}

/* Selected products container */
.anom-selected-products {
    margin-top: 1.5rem;
}

.anom-selected-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.anom-quantity-input {
    width: 80px;
    margin: 0 1rem;
    text-align: center;
}

.anom-remove-button {
    margin-left: 1rem;
}

/* Buttons styling */
.anom-close-button {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.anom-submit-button {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* Responsive styling */
@media (max-width: 768px) {
    .anom-modal .modal-dialog {
        width: 90%;
        margin: auto;
    }

    .anom-search-results {
        max-height: 120px;
    }
}/* EditOrderModal.css */

/* General modal styling */
.modal-content {
    background-color: #f8f9fa; /* Light grey background */
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
}

/* Modal header */
.modal-header {
    border-bottom: 1px solid #dee2e6; /* Light border */
}

/* Modal body */
.modal-body {
    padding: 15px;
}

/* Form inputs */
.form-control {
    border-radius: 4px; /* Slightly rounded corners */
}

/* Form labels */
form label {
    font-weight: bold;
}

/* Modal footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* Space between buttons */
}

/* Button styling */
button {
    border-radius: 4px;
}

/* Ensure modal is responsive */
@media (max-width: 768px) {
    .modal-content {
        padding: 15px;
    }
    .modal-body {
        padding: 10px;
    }
    .modal-footer {
        gap: 5px;
    }
}
.product-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    /* border: 1px solid #ddd; */
    padding: 10px;
    border-radius: 5px;
}
/* left side navigation bar */
.b2b-div-nav {
    width: 210px;
    /* background-color: #3c657b; */
    background-color: #295c78;
    color: white;
    padding: 20px;
    overflow-y: auto;

    position: relative;

    font-weight: 200;
}

.b2b-div-nav ul {
    list-style: none;
    padding: 0;
}

.b2b-div-nav li {
    padding: 10px;
    cursor: pointer;
    color: white;

    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.b2b-div-nav li:hover {
    color: #f18d11 !important;
    transform: scale(1.1);
}

.b2b-div-nav li a {
    text-decoration: none;
    color: inherit;
}

.b2b-div-nav li:hover a {
    color: inherit;
}

.b2b-div-nav ul li span {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid lightskyblue;
}

.div-copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 4px;
}
/* Container for the entire dashboard */
.b2b-div-main-container {
    display: flex;
    flex-direction: column;
    /* Full viewport height */
    height: 100vh;
}

input[type=text] {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border: 1px solid #f18d11;
}

/* body section */
.b2b-div-body {
    height: calc(100vh - 80px);
    /*header height is 60*/
    margin-top: 60px;

    display: flex;
    /* Take remaining space */
    flex: 1;
    /* Prevent overflow */
    overflow: hidden;
}

/* right side content section. left is navbar */
.b2b-div-content {
    flex: 1;
    display: flex;
    /* content has top and bottom section */
    flex-direction: column;
    /* Prevent overflow */
    overflow: hidden;
}

/* top section containing orders and stock */
.b2b-div-content-top-section {
    display: flex;
    flex-direction: row;
    /*take remaining space after bottom*/
    flex: 1;
    gap: 10px;
    padding: 10px;
    /* Prevent overflow */
    overflow: hidden;
}

/* bottom section containing products */
.b2b-div-content-bottom-section {
    height: 300px;

    display: flex;
    flex-direction: column;
    /* Prevent overflow */
    overflow: hidden;
}

/* products section */
.b2b-div-products-section {
    /* take remaining height */
    flex: 1;
    display: flex;
    flex-direction: column;

    margin: 0px 10px;
    /* Prevent overflow */
    overflow: hidden;
    /* for loading */
    position: relative;
}

/* products header section */
.b2b-div-products-section>span {
    display: flex;
    flex-direction: row;
    justify-content: left;
    /* Vertically center items */
    align-items: center;
    gap: 20px;
    padding: 10px;
}

.b2b-div-products-section>span>h4 {
    /* Remove default margin */
    margin: 0;
}

.b2b-div-products-section>span>input {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    /*take remaining space */
    flex: 0.7;
}

.b2b-div-products-list {
    flex: 1;
    display: flex;
    gap: 10px;

    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 10px;
    margin: 0px 10px;
}

.b2b-div-product-card {
    flex: 0 0 auto;
    width: 200px;
    /* Adjust as needed */

    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    background: #fff;
    scroll-snap-align: start;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

    /* for price badge make relative */
    position: relative;
    overflow: hidden;
}

.b2b-div-product-card>img {
    width: 100%;
    height: 165px;
    object-fit: cover;
}

.b2b-div-product-card>h6 {
    padding: 0 10px;
}

.price-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    min-width: 50px;
    height: 50px;

    background-color: forestgreen;
    border-bottom-right-radius: 50px;
    font-size: 14px;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;
    z-index: 100;
}

/* orders section 70% width */
.b2b-div-orders-section {
    flex: 0.7;
    /* 70% width */
    display: flex;
    flex-direction: column;

    margin: 10px;
    padding: 10px;
    /* Prevent overflow */
    overflow: hidden;

    background-color: white;
    box-shadow: -2px 2px 2px -1px rgb(108, 115, 129, 0.8),
        3px -3px 6px 1px rgb(0, 0, 0, 0.5);

    /* for loading */
    position: relative; 
}

/* orders header section */
.b2b-div-orders-section>span {
    display: flex;
    flex-direction: row;
    justify-content: left;
    /* Vertically center items */
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    padding: 10px;
}

.b2b-div-orders-section>span>h4 {
    /* Remove default margin */
    margin: 0;
}

.b2b-div-orders-section>span>input {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    /*take remaining space */
    flex: 0.7;
}

/* orders list section */
.b2b-div-orders-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 6px;

    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

.b2b-div-order-card {
    width: 360px;
    height: 225px;
    /* for order-cost and id */
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 10px;
    margin-bottom: 10px;

    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fbfbfb;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

    overflow: hidden;
    scroll-snap-align: start;
}

.b2b-div-order-details {
    height: 120px;
    display: flex;
    flex-direction: column;
}

.b2b-div-order-id {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;

    font-size: 12px;
    align-self: flex-end;
    color: darkolivegreen;
}

.b2b-div-order-date {
    font-size: 12px;
    color: darkolivegreen;
}

.b2b-div-order-details h6 {
    margin: 5px;
    /* border-bottom: 1px solid steelblue; */
    font-weight: bold;
}

.b2b-div-order-description {
    font-size: 15px;
}

.b2b-div-order-status {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}

.b2b-div-order-accept {
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: khaki;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);

    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.b2b-div-order-accept span {
    margin-top: 6px;
}

.b2b-div-order-accept:hover {
    transform: scale(1.1);
}

.b2b-div-order-status span {
    font-size: 14px;
}

.b2b-div-order-status-img {
    width: 200px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 30px;
    position: relative;
}

.b2b-div-status-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    border: 2px solid #ccc;

    /* ensuring circle is above status line */
    z-index: 1;
}

.b2b-div-status-line {
    position: absolute;
    height: 4px;
    top: 50%;
    background-color: #ccc;
    z-index: 0;

    /* make it centered */
    transform: translateY(-50%);
}

/* for start order status */
.b2b-div-order-status-img.Start .b2b-div-status-circle:nth-child(1) {
    background-color: red;
    border-color: red;
}
.b2b-div-order-status-img.Start .b2b-div-status-line {
    width: 33.33%; /* Line length for status start */
    background-color: red;
}
.b2b-div-order-status p.Start {
    color: red;
}
/* for in progress order status */
.b2b-div-order-status-img.In.Progress .b2b-div-status-circle:nth-child(1),
.b2b-div-order-status-img.In.Progress .b2b-div-status-circle:nth-child(2) {
    background-color: goldenrod;
    border-color: goldenrod;
}
.b2b-div-order-status-img.In.Progress .b2b-div-status-line {
    width: 50%; /* Line length for status In Progress */
    background-color: goldenrod;
}
.b2b-div-order-status p.In.Progress {
    color: goldenrod;
}
/* for delivering order status */
.b2b-div-order-status-img.Delivering .b2b-div-status-circle:nth-child(1),
.b2b-div-order-status-img.Delivering .b2b-div-status-circle:nth-child(2),
.b2b-div-order-status-img.Delivering .b2b-div-status-circle:nth-child(3) {
    background-color: #02bb02;
    border-color: #02bb02;
}
.b2b-div-order-status-img.Delivering .b2b-div-status-line {
    width: 75%; /* Line length for status Delivering */
    background-color: #02bb02;
}
.b2b-div-order-status p.Delivering {
    color: #02bb02;
}
/* for delivered order status */
.b2b-div-order-status-img.Delivered .b2b-div-status-circle:nth-child(1),
.b2b-div-order-status-img.Delivered .b2b-div-status-circle:nth-child(2),
.b2b-div-order-status-img.Delivered .b2b-div-status-circle:nth-child(3) {
    background-color: green;
    border-color: green;
}
.b2b-div-order-status-img.Delivered .b2b-div-status-line {
    width: 75%; /* Line length for status Delivering */
    background-color: green;
}
.b2b-div-order-status p.Delivered {
    color: green;
}
/* for delivered order status */
.b2b-div-order-status-img.Complete .b2b-div-status-circle:nth-child(1),
.b2b-div-order-status-img.Complete .b2b-div-status-circle:nth-child(2),
.b2b-div-order-status-img.Complete .b2b-div-status-circle:nth-child(3),
.b2b-div-order-status-img.Complete .b2b-div-status-circle:nth-child(4) {
    background-color: green;
    border-color: green;
}
.b2b-div-order-status-img.Complete .b2b-div-status-line {
    width: 75%; /* Line length for status Complete */
    background-color: green;
}
.b2b-div-order-status p.Complete {
    color: green;
}

.b2b-div-order-cost {
    position: absolute;
    bottom: 0;
    right: 0;
    color: darkgreen;
    margin: 5px;
}

.b2b-div-order-products .infoicon {
    color: #f18d11;
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
}

.order-products-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    color: white;
    font-weight: 200;
    background-color: #295c78;
    display: flex;
    flex-direction: column;

    transform: translateX(-100%);
    /* opacity: 0; */
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 1;
}

.order-products-container.show {
    transform: translateX(0);
    /* opacity: 1; */
}

.order-products-container.hide {
    transform: translateX(-100%);
    /* opacity: 0; */
}

.order-products-container .cancelIcon {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;

    color: crimson;
    margin-bottom: 3px;
    z-index: 1;
}

.white-bg-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;

    background-color: white;
}

.order-products-container ul {
    list-style: none;
    padding: 0;
    margin: 30px 2px 0 0;

    overflow-y: auto;
    overflow-x: hidden;
}

.order-products-container ul li {
    padding: 5px;
}

/* stocks section 30% width */
.b2b-div-stocks-section {
    /* 30% width */
    flex: 0.3;
    display: flex;
    flex-direction: column;

    margin: 10px;
    padding: 10px;
    /* Prevent overflow */
    overflow: hidden;

    background-color: white;
    box-shadow: -2px 2px 2px -1px rgb(108, 115, 129, 0.8),
        3px -3px 6px 1px rgb(0, 0, 0, 0.5);

    /* for loading */
    position: relative;
}

.b2b-div-stocks-section>span {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.b2b-div-stocks-section>span>h4 {
    margin: 0;
}

.b2b-div-stocks-section>span>input {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    flex: 1;
}

.b2b-div-stocks-list {
    /* Prevent double scrollbars */
    overflow: hidden;
}

/* table for stocks */
.b2b-table-stocks {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
}

.b2b-table-stocks>thead {
    background-color: #b7eeb7;
    top: 0;
}

.b2b-table-stocks>tfoot {
    background-color: #fafafa;
    bottom: 0;
}

.b2b-table-stocks thead,
.b2b-table-stocks tfoot {
    position: sticky;
    width: 100%;

    display: table;
    table-layout: fixed;

    z-index: 1;
}

.b2b-table-stocks th,
.b2b-table-stocks td {
    padding: 10px 6px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Adjust table column widths */
.b2b-table-stocks .b2b-col-qty {
    width: 15%;
    /* smaller than default */
}

.b2b-table-stocks .b2b-col-cost {
    width: 20%;
    /* smaller than default */
}

/* table body for stocks which is only scrollable. */
.b2b-table-stocks-body {
    display: block;
    /* Adjust scrollable height */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.b2b-table-stocks-body tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.b2b-table-stocks-body tr:last-child {
    margin-bottom: 300px;
}

/* products section */


/* for animations */
@keyframes fadeInScale {
    0% {
        opacity: 0.5;
        transform: scale(0.7);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/*
 *  STYLE 1
 */

/* width */
#scroll-style::-webkit-scrollbar {
    width: 12px;
}

/* Track */
#scroll-style::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/* Handle */
#scroll-style::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #3c657b;
}

/* Handle on hover */
#scroll-style::-webkit-scrollbar-thumb:hover {
    background-color: #f18d11;
}#checkmark-group {
    width: 24px;
}

#checkmark {
    fill: none;
    stroke: green;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width:3px;
    stroke-dasharray: 200;
    animation: checkmark-stroke 2s infinite linear;
    stroke-linejoin: round;
    /* opacity: 0; */
}

@keyframes checkmark-stroke {
    0% {
        stroke-dashoffset: 200;
        /* opacity: 1; */
    }

    100% {
        stroke-dashoffset: 0;
        /* opacity: 1; */
    }
}/* header */
.b2b-div-header {
    position: fixed;
    top: 0px;
    right: inherit;

    width: 100vw;
    height: 60px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    padding: 10px 20px 10px 10px;

    background: linear-gradient(to bottom, #3c657b, #191d26);
    box-shadow: 1px 0.5px 0.5px 0.5px rgba(241, 141, 17, 1),
        2em 4em 4em -2em rgba(241, 141, 17, 0.5),
        1em 2em 2em -2.5em rgba(241, 141, 17, 0.5);
}

.b2b-div-header>h4 {
    margin-top: 10px;
    margin-left: 10px;
    color: white;
}

.b2b-div-header>img {
    height: 20px;
}#loadingsvg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}/* container for entire wholesale order board */
.wo-div-main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

input[type=text] {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border: 1px solid #f18d11;
}

/* body section */
.wo-div-body {
    flex: 1;
    display: flex;

    margin-top: 60px;
    overflow: hidden;
}

/* right side content section. left is navbar */
.wo-div-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    background-color: #e0f3ff;
    /* Light blue background */
    overflow: hidden;
    position: relative;
}

.wo-div-orders-section {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding: 10px;
    /* Prevent overflow */
    overflow: hidden;

    position: relative;
}

/* orders header section */
.wo-div-orders-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* Vertically center items */
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    padding: 10px;
}

.wo-div-orders-header>input {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    /*take remaining space */
    flex: 0.5;
}

.wo-div-orders-header>button {
    width: 200px;
    height: 50px;

    border: none;
    cursor: pointer;

    /* Push the button to the end (right side) */
    margin-left: auto;
    color: white;
    font-weight: 200;
    border-radius: 10px;
    box-shadow: -2px 2px 2px -1px rgb(108, 115, 129, 0.8),
        2px -2px 6px 0.5px rgb(0, 0, 0, 0.5);

    background: linear-gradient(to bottom, #3c657b, #2f3647);
    transform: scale(0.95);
    transition: all 0.1s linear;
}

.wo-div-orders-header>button:hover {
    color: #f18d11;
    transform: scale(1.0);
    box-shadow: -2px 2px 2px -1px #f18d11,
        3px -3px 6px 1px #ad7026;
}

/* orders list section */
.wo-div-orders-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 6px;

    padding: 20px 5px;

    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

/* each order card */
.wo-div-order-card {
    width: 380px;
    height: 300px;
    /* for order-cost and id */
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 10px 20px;
    margin-bottom: 10px;

    border: 1px solid #ddd;
    border-radius: 1rem;
    background-color: white;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);

    overflow: hidden;
    scroll-snap-align: start;
}

.wo-div-order-card-header {
    align-self: flex-end;

    color: #2e3b8c;
    font-size: 14px;
    font-weight: 600;

    margin-right: 15px;
    margin-bottom: 2px;
}

.wo-div-order-details {
    height: 110px;
    margin-bottom: 10px;

    background-color: #f3f4f6;
    border-radius: 1.25rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

    position: relative;
}

.wo-div-order-products {
    width: 80px;
    height: 80px;
    position: absolute;
    top: -20px;
    left: 10px;

    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    background-color: #3c657b;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.wo-div-order-products>span {
    color: white;
    font-weight: 200;
}

.wo-div-order-products .infoicon {
    color: #f18d11;
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
}

.wo-div-order-info {
    height: 60px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 10px;
    margin-left: 90px;
    margin-right: 10px;
}

.wo-div-order-date {
    /* 12px */
    font-size: 0.75rem;
    color: #6b7280;
}

.wo-div-order-name {
    font-weight: 600;
    color: #2e3b8c;
}

.wo-div-order-description {
    height: 50px;
    /* 14px */
    font-size: 0.875rem;
    color: #373f49;
    padding: 5px 15px;

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

.wo-div-order-status {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}

.wo-div-order-status span {
    font-size: 14px;
}

.wo-div-order-accept {
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: khaki;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);

    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.wo-div-order-accept>span {
    margin-top: 6px;
}

.wo-div-order-accept:hover {
    transform: scale(1.1);
}

.wo-div-order-status-icons {
    width: 200px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 30px;
    position: relative;
}

.wo-div-status-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    border: 2px solid #ccc;

    /* ensuring circle is above status line */
    z-index: 1;
}

.wo-div-status-line {
    position: absolute;
    height: 4px;
    top: 50%;
    background-color: #ccc;
    z-index: 0;

    /* make it centered */
    transform: translateY(-50%);
}

/* for Initiated order status */
.wo-div-order-status-icons.Initiated .wo-div-status-circle:nth-child(1) {
    background-color: red;
    border-color: red;
}

.wo-div-order-status-icons.Initiated .wo-div-status-line {
    width: 33.33%;
    /* Line length for status Initiated */
    background-color: red;
}

.wo-div-order-status p.Initiated {
    color: red;
}

/* for Working order status */
.wo-div-order-status-icons.Working .wo-div-status-circle:nth-child(1),
.wo-div-order-status-icons.Working .wo-div-status-circle:nth-child(2) {
    background-color: goldenrod;
    border-color: goldenrod;
}

.wo-div-order-status-icons.Working .wo-div-status-line {
    width: 50%;
    /* Line length for status Working */
    background-color: goldenrod;
}

.wo-div-order-status p.Working {
    color: goldenrod;
}

/* for delivering order status */
.wo-div-order-status-icons.Delivering .wo-div-status-circle:nth-child(1),
.wo-div-order-status-icons.Delivering .wo-div-status-circle:nth-child(2),
.wo-div-order-status-icons.Delivering .wo-div-status-circle:nth-child(3) {
    background-color: #02bb02;
    border-color: #02bb02;
}

.wo-div-order-status-icons.Delivering .wo-div-status-line {
    width: 75%;
    /* Line length for status Delivering */
    background-color: #02bb02;
}

.wo-div-order-status p.Delivering {
    color: #02bb02;
}

/* for Received order status */
.wo-div-order-status-icons.Received .wo-div-status-circle:nth-child(1),
.wo-div-order-status-icons.Received .wo-div-status-circle:nth-child(2),
.wo-div-order-status-icons.Received .wo-div-status-circle:nth-child(3) {
    background-color: green;
    border-color: green;
}

.wo-div-order-status-icons.Received .wo-div-status-line {
    width: 75%;
    /* Line length for status Delivering */
    background-color: green;
}

.wo-div-order-status p.Received {
    color: green;
}

/* for completed order status */
.wo-div-order-status-icons.Completed .wo-div-status-circle:nth-child(1),
.wo-div-order-status-icons.Completed .wo-div-status-circle:nth-child(2),
.wo-div-order-status-icons.Completed .wo-div-status-circle:nth-child(3),
.wo-div-order-status-icons.Completed .wo-div-status-circle:nth-child(4) {
    background-color: green;
    border-color: green;
}

.wo-div-order-status-icons.Completed .wo-div-status-line {
    width: 75%;
    /* Line length for status Completed */
    background-color: green;
}

.wo-div-order-status p.Completed {
    color: green;
}

/* total-cost */
.wo-div-order-cost {
    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    /* color: darkgreen; */
    font-weight: 200;
    margin: 0px 30px 5px;

    /* background-color: #e5c800; */
    background-color: #3c657b;
    padding: 10px;
    border-radius: 5px 50px 5px 50px;
}

/* each product details in order card */
.wo-order-products-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    color: white;
    font-weight: 200;
    background-color: #295c78;
    display: flex;
    flex-direction: column;

    transform: translateX(-100%);
    /* opacity: 0; */
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 1;
}

.wo-order-products-container.show {
    transform: translateX(0);
    /* opacity: 1; */
}

.wo-order-products-container.hide {
    transform: translateX(-100%);
    /* opacity: 0; */
}

.wo-order-products-container .cancelIcon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;

    color: crimson;
    margin-bottom: 3px;
    z-index: 1;
}

.wo-order-products-container .white-bg-icon {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 15px;
    height: 15px;

    background-color: white;
}

.wo-order-products-container ul {
    list-style: none;
    padding: 0;
    margin: 30px 2px 0 0;

    overflow-y: auto;
    overflow-x: hidden;
}

.wo-order-products-container ul li {
    padding: 5px;
}

/* create orders form */
.wo-div-create-orders {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    /* content has headers, body and checkout */
    flex-direction: column;
    overflow: hidden;

    background-color: white;
    z-index: 10;

    transform: translateX(100%);
    /* opacity: 0; */
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.wo-div-create-orders.show {
    transform: translateX(0);
}

.wo-div-create-orders.hide {
    transform: translateX(100%);
}

.wo-div-co-header {
    display: flex;
    flex-direction: column;
}

.wo-div-co-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wo-div-co-header-top>span {
    /* Text Shadow */
    text-shadow:
        2px 2px 4px rgba(46, 59, 140, 0.2),
        /* Medium shadow */
        1px 1px 6px rgba(46, 59, 140, 0.3),
        /* Subtle shadow */
        1px 1px 6px rgba(46, 59, 140, 0.1);
    /* Soft glow */

    color: #f18d11;
    /* Font Styling */
    font-family: 'Poppins', Arial, sans-serif;
    /* Modern font */
    font-size: 20px;
    font-weight: 600;
    /* Semi-bold */
    letter-spacing: 0.5px;
    /* Slightly spaced letters */

    margin-left: 20px;
}

.wo-div-co-header-top .cancelIcon {
    /* position: absolute;
    top: 10px;
    right: 10px;*/
    width: 40px;
    height: 40px;

    color: crimson;
    margin-bottom: 3px;
    z-index: 1;
}

.wo-div-co-header-base {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.wo-div-co-header-base>input {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    flex: 0.8;
}

.wo-div-co-header-base>select {
    width: 220px;
    height: 40px;

    border: none;
    cursor: pointer;

    margin: 10px;
    color: white;
    padding-left: 10px;
    font-weight: 200;
    border-radius: 10px;
    box-shadow: -2px 2px 2px -1px rgb(108, 115, 129, 0.8),
        2px -2px 6px 0.5px rgb(0, 0, 0, 0.5);

    background: linear-gradient(to bottom, #3c657b, #2f3647);
    transform: scale(0.95);
    transition: all 0.1s linear;
}

.wo-div-co-header-base>select:hover {
    color: #f18d11;
}

.wo-div-co-header-base>select>option {
    color: black;
}

/* create order form body upper section */
.wo-div-co-body-section {
    display: flex;
    flex-direction: row;
    /* take remaining space after bottom checkout details section*/
    /* flex: 1; */
    gap: 10px;
    padding: 10px;
    overflow: hidden;
}

/* create order form products section taking 70% width*/
.wo-div-co-products-section {
    /* 70% width */
    flex: 0.7;
    display: flex;
}

.wo-table-products {
    width: 100%;
    font-size: 15px;
    border-collapse: collapse;
    /* Ensures correct width distribution */
    table-layout: fixed;
}

.wo-table-products>thead {
    position: sticky;
    top: 0;
    width: 100%;

    /* Ensure the header aligns with the body */
    display: table;

    /* background-color: #b7eeb7; */
    color: #2e3b8c;
    z-index: 1;
}

.wo-table-products th,
.wo-table-products td {
    padding: 10px 6px;
    border-bottom: 1px solid #ddd;
}

.wo-table-products-body {
    width: 100%;
    max-height: 400px;

    /* Enable block display for scrolling */
    display: block;

    overflow-y: auto;
    overflow-x: hidden;
}

/* Adjust table column widths */
.wo-col-name {
    width: 50%;
    text-align: right;
}

.wo-col-qty,
.wo-col-cost,
.wo-col-action {
    width: 15%;
    text-align: center;
}

.wo-div-body .wo-col-qty input {
    width: 80px;
    text-align: center;

    border-radius: 4px;
    border: 1px solid #3c657b;
    padding: 4px;
}

.wo-div-body td.wo-col-cost {
    /* width: 80px; */
    color: #02bb02;
}

.wo-table-products-body button {
    width: 100px;
    height: 40px;

    border: none;
    cursor: pointer;

    color: white;
    font-weight: 200;
    border-radius: 10px;
    box-shadow: -2px 2px 2px -1px rgb(108, 115, 129, 0.8),
        2px -2px 6px 0.5px rgb(0, 0, 0, 0.5);

    background: linear-gradient(to bottom, #3c657b, #2f3647);
    transform: scale(0.95);
    transition: all 0.1s linear;
}

.wo-table-products-body button:hover {
    color: #f18d11;
    transform: scale(1.0);
    box-shadow: -2px 2px 2px -1px #f18d11;
}

/* co cart section taking 30% width */
.wo-div-co-cart-section {
    /* 30% width */
    flex: 0.3;
    display: flex;
    flex-direction: column;

    padding: 10px;

    /* for loading */
    position: relative;
}

.wo-div-co-cart-section>span {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    gap: 10px;
}

.wo-div-co-cart-section>span>h4 {
    margin: 0;
}

/* create order table for cart */
.wo-div-cart-list {
    overflow: hidden;
}

.wo-table-cart {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
}

.wo-table-cart>thead {
    background-color: #b7eeb7;
    top: 0;
}

.wo-table-cart>tfoot {
    background-color: #fafafa;
    bottom: 0;
}

.wo-table-cart thead,
.wo-table-cart tfoot {
    position: sticky;
    width: 100%;

    /* match with tbody */
    display: table;
    /* match with tbody */
    table-layout: fixed;

    z-index: 1;
}

.wo-table-cart th,
.wo-table-cart td {
    padding: 10px 6px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.wo-table-cart .wo-col-qty {
    width: 15%;
}

.wo-table-cart .wo-col-cost {
    width: 20%;
}

.wo-table-cart-body {
    width: 100%;
    /* place block to match with thead dis table */
    display: block;
    /* adjust scrollable height */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.wo-table-cart-body tr {
    width: 100%;
    /* set to match with thead */
    display: table;
    table-layout: fixed;
}

.wo-table-cart-body tr:last-child {
    margin-bottom: 300px;
}


/* order form checkout */
.b2b-div-wo-content-bottom-section {
    height: 300px;

    display: flex;
    flex-direction: column;
    /* Prevent overflow */
    overflow: hidden;

    padding: 10px;
}


.b2b-div-wo-checkout-body {
}

.b2b-div-wo-checkout-details {
    display: flex;
    flex-direction: column;
}

.b2b-div-wo-checkout-details > input {
    width: 400px;
    margin: 10px;
}
.b2b-div-wo-form-checkout {
    width: 400px;
    margin-left: 10px;
    background-color: #295c78;
    color: white;
}