/* =========================================================
   App Theme Variables (edit colors here to change theme)
   ========================================================= */
:root {
  /* Typography — set by next/font in src/theme/fonts.ts */
  --app-font-family: var(--font-app), "Segoe UI", system-ui, sans-serif;

  /* =========================================================
     BIG ULTIMATE Theme Tokens (single source of truth)
     Feature code must consume via Antd token or Tailwind classes.
     ========================================================= */
  /* Brand + semantic palette (hex for CSS vars only) */
  --app-primary: #e60012;
  --app-primary-light: #f24d5c;
  --app-primary-hover: #d50000;
  --app-primary-active: #b80000;
  --app-primary-soft: #ffe5e6;

  --app-accent-orange: #ff6a00;
  --app-accent-yellow: #ffc107;

  --app-bg: #ffffff;
  --app-surface: #f5f5f5;
  --app-border: #bfbfbf;
  --app-text: #1f1f1f;
  --app-text-muted: #595959;

  /* Optional semantic tokens used in existing screens (kept centralized) */
  --app-info: #0099db;
  --app-info-soft: #e6f7ff;

  /* Charts (centralized; keep legacy palette for consistency) */
  --app-chart-grid: #e5e7eb;
  --app-chart-overweight: #c2410c;
  --app-chart-normal: #047857;
  --app-chart-underweight: #2563eb;

  /* RGB channels for Tailwind alpha support */
  --app-primary-rgb: 230 0 18;
  --app-primary-light-rgb: 242 77 92;
  --app-primary-hover-rgb: 213 0 0;
  --app-primary-active-rgb: 184 0 0;
  --app-primary-soft-rgb: 255 229 230;
  --app-accent-orange-rgb: 255 106 0;
  --app-accent-yellow-rgb: 255 193 7;
  --app-bg-rgb: 255 255 255;
  --app-surface-rgb: 245 245 245;
  --app-border-rgb: 191 191 191;
  --app-text-rgb: 31 31 31;
  --app-text-muted-rgb: 89 89 89;
  --app-info-rgb: 0 153 219;
  --app-info-soft-rgb: 230 247 255;

  /* App-specific UI tokens */
  --app-nav-bg: var(--app-bg);
  /* Table header: BIG ULTIMATE red with white text (theme-driven) */
  /* Stronger soft tone (between soft and primary) */
  /* Use opaque mix to avoid header "double layer" overlap on fixed/sticky tables */
  --app-table-header-bg: color-mix(in srgb, var(--app-primary) 18%, var(--app-bg));
  --app-table-header-text: var(--app-text);
  --app-table-header-border: rgba(var(--app-primary-rgb) / 0.22);
  /* Row hover must be opaque to avoid overlap/bleed in fixed/sticky table layers */
  --app-table-row-hover-bg: rgba(0, 0, 0, 0.04);
  --app-table-row-hover-bg: color-mix(in srgb, var(--app-text) 4%, var(--app-bg));
  --app-table-row-hover-text: rgba(0, 0, 0, 0.88);
  --app-table-row-selected-bg: rgba(var(--app-primary-rgb) / 0.08);
  --app-table-row-selected-text: rgba(0, 0, 0, 0.88);

  /* Sidebar pill style */
  /* Use neutral surfaces for large areas; keep red as accent/active only */
  /* Default nav items should be visible against shell surface */
  --app-nav-pill-inactive-bg: var(--app-bg);
  --app-nav-pill-inactive-text: var(--app-text);
  --app-nav-pill-active-bg: var(--app-primary);
  --app-nav-pill-text: var(--app-bg);
  --app-nav-pill-radius: 0.5rem;
  /* --app-content-card-radius: 16px; */
  --app-content-card-radius: 0.5rem;

  /* Premium app shell — light enterprise WMS */
  --app-shell-sidebar-bg: #ffffff;
  --app-shell-sidebar-border: #e8ebf0;
  --app-shell-sidebar-text: #1f2937;
  --app-shell-sidebar-muted: #6b7280;
  --app-shell-canvas: #f4f6f9;
  --app-shell-header-bg: #ffffff;
  --app-shell-panel-border: #e8ebf0;

  /* Content hierarchy */
  --app-heading: #0f172a;
  --app-subtle: #64748b;
  --app-subtle-light: #94a3b8;
  --app-panel-bg: #ffffff;
  --app-elevated: #ffffff;
  --app-hover-accent: #fff1f2;
  --app-input-bg: #ffffff;
}

[data-color-mode='dark'] {
  --app-bg: #161b24;
  --app-surface: #0f1218;
  --app-border: #3a4354;
  --app-text: #f3f4f6;
  --app-text-muted: #9ca3af;
  --app-info-soft: #0b2a3d;

  --app-bg-rgb: 22 27 36;
  --app-surface-rgb: 15 18 24;
  --app-border-rgb: 58 67 84;
  --app-text-rgb: 243 244 246;
  --app-text-muted-rgb: 156 163 175;

  --app-primary-soft: color-mix(in srgb, var(--app-primary) 22%, #161b24);
  --app-primary-soft-rgb: 61 21 25;

  --app-table-header-bg: color-mix(in srgb, var(--app-primary) 24%, var(--app-bg));
  --app-table-header-text: var(--app-text);
  --app-table-row-hover-bg: color-mix(in srgb, var(--app-text) 6%, var(--app-bg));
  --app-table-row-hover-text: var(--app-text);
  --app-table-row-selected-bg: rgba(var(--app-primary-rgb) / 0.16);
  --app-table-row-selected-text: var(--app-text);

  --app-nav-pill-inactive-bg: var(--app-bg);
  --app-nav-pill-inactive-text: var(--app-text);

  --app-shell-sidebar-bg: #161b24;
  --app-shell-sidebar-border: #2a3140;
  --app-shell-sidebar-text: #f3f4f6;
  --app-shell-sidebar-muted: #9ca3af;
  --app-shell-canvas: #0f1218;
  --app-shell-header-bg: #161b24;
  --app-shell-panel-border: #2f3747;

  --app-heading: #f9fafb;
  --app-subtle: #94a3b8;
  --app-subtle-light: #6b7280;
  --app-panel-bg: #1a2030;
  --app-elevated: #1e2533;
  --app-hover-accent: rgba(var(--app-primary-rgb) / 0.14);
  --app-input-bg: #1a2030;
}

/* =========================================================
   Profile UI helpers (theme-driven)
   ========================================================= */
.app-profile-card {
  min-height: 108px;
}

.app-card-accent-gradient {
  background: linear-gradient(
    135deg,
    var(--app-primary) 0%,
    var(--app-primary-hover) 50%,
    var(--app-primary-active) 100%
  );
  color: var(--app-bg);
}

.app-card-accent-gradient-soft {
  background: linear-gradient(135deg, var(--app-primary-soft) 0%, var(--app-surface) 70%, var(--app-bg) 100%);
  color: var(--app-text);
}

/* Hall of Fame fallback badge (theme-driven) */
.app-rank-badge-fallback {
  background: linear-gradient(135deg, var(--app-accent-yellow) 0%, var(--app-accent-orange) 100%);
}

/* App surfaces follow theme tokens */
html,
body,
#__next,
[data-theme] {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}
.ant-layout,
.ant-layout-sider,
.ant-layout-content,
.ant-layout-header {
  background-color: var(--app-surface) !important;
}
/* Drawer, Modal, Dropdown, Select dropdown */
.ant-drawer-content,
.ant-drawer-content-wrapper,
.ant-drawer-body,
.ant-drawer-header,
.ant-modal-content,
.ant-modal-header,
.ant-modal-body,
.ant-dropdown-menu,
.ant-select-dropdown,
.ant-picker-dropdown,
.ant-popover-inner,
.ant-tooltip-inner {
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
}
.ant-modal-mask,
.ant-drawer-mask {
  background-color: rgba(0, 0, 0, 0.45) !important;
}
.ant-drawer-title,
.ant-modal-title,
.ant-dropdown-menu-item,
.ant-select-item,
.ant-picker-content,
.ant-popover-inner-content {
  color: var(--app-text) !important;
}
.ant-card,
.ant-form-item,
.ant-tabs-content,
.ant-tabs-nav,
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector {
  background-color: var(--app-input-bg) !important;
  color: var(--app-text) !important;
  border-color: var(--app-shell-panel-border) !important;
}
.ant-table,
.ant-table-container,
.ant-table-content,
.ant-table-body,
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  background-color: var(--app-bg) !important;
  color: var(--app-text) !important;
}
.ant-table-thead > tr > th {
  background: var(--app-table-header-bg) !important;
  color: var(--app-table-header-text) !important;
}

/* Dropdown / Select ไฮไลต์ไม่ดำ – ใช้โทนอ่อนทุกที่ */
.ant-select-item-option-active,
.ant-select-item-option:hover {
  background: color-mix(in srgb, var(--app-text) 5%, transparent) !important;
  color: var(--app-text) !important;
}
.ant-select-item-option-selected {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}
.ant-select-item-option-selected .ant-select-item-option-state,
.ant-select-item-option-selected .ant-select-item-option-content {
  color: inherit !important;
}
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-item-active {
  background: color-mix(in srgb, var(--app-text) 5%, transparent) !important;
  color: var(--app-text) !important;
}
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-cell-in-view:hover .ant-picker-cell-inner {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

/**
 * Description:
 * This CSS file contains styles for a black carousel component.
 * It defines styles for the previous and next buttons, as well as the active dot and regular dots.
 * The color scheme used is black (#000000) with some opacity.
 */
.black-carousel .slick-prev,
.black-carousel .slick-next {
  font-size: 24px !important;
  color: #000000;
}

.black-carousel .slick-dots li.slick-active button {
  background-color: #000000;
}

.black-carousel .slick-dots li {
  background-color: #000000;
  opacity: 50%;
}

/*
4Card Styles
*/
.orange-gradient-background {
  background: linear-gradient(to right, orange, #ff7f7f);
}

.custom-4card {
  margin: 2px;
  border-radius: 40px;
  border: 1px;
  top: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 3px;
}
.icon-container {
  display: inline-block;
  padding: 3px 5px 3px 5px; /* Adjust the padding to control the space around the icon */
  border: 1px solid; /* Replace with your desired border color */
  border-radius: 20px; /* This makes the border circular */
}

/*
test Dash novokor
*/
.my-card {
  position: relative;
  padding-left: 50px; /* Adjust padding to make space for semicircles on the left */
  padding-right: 50px; /* Adjust padding to make space for semicircles on the right */
}

.illustration {
  width: 100px; /* Adjust width as needed */
}

.task {
  margin-top: 10px; /* Adjust margin as needed */
}

.dashboard-card {
  background-color: #f1ebfb;
  position: relative;
  border-radius: 24px;
  border: 0;
  padding: 10px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.tabs-right .ant-tabs-nav .ant-tabs-nav-wrap {
  justify-content: flex-end;
  padding-right: 10px;
}

.tabs-right .ant-tabs-nav .ant-tabs-extra-content {
  order: -1;
  margin-right: auto;
}

.extra-content {
  display: flex;
  align-items: center;
  width: 250px; /* Adjust this value as needed */
}

.ant-tabs .ant-tabs-nav {
  margin: 0;
}

.tag-16px-radius {
  border-radius: 16px;
  display: inline-block;
  white-space: nowrap;
}

.tag-16px-radius::before {
  content: "•"; /* Unicode character for a bullet point */
  margin-right: 4px; /* Adjust spacing as needed */
}

.ant-table-wrapper .ant-table {
  scrollbar-color: unset;
}

/* หัวตารางเข้ากับธีม */
.ant-table-wrapper .ant-table-thead > tr > th {
  background: var(--app-table-header-bg) !important;
  color: var(--app-table-header-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 2px solid var(--app-table-header-border) !important;
  padding: 12px 8px !important;
}
.ant-table-wrapper .ant-table-thead > tr > th::before {
  display: none !important;
}
/* ตอนกด sort/filter หัวคอลัมน์ไม่ให้เป็นสีดำ */
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-column-sort,
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-column-has-sorters:hover {
  background: var(--app-table-header-bg) !important;
  color: var(--app-table-header-text) !important;
}
.ant-table-wrapper .ant-table-thead .ant-table-column-sorters {
  color: inherit !important;
}
.ant-table-wrapper .ant-table-thead .ant-table-filter-trigger {
  color: var(--app-table-header-text) !important;
}
/* เซลล์ข้อมูลไม่ให้เป็นพื้นดำ (รวมตอนมี sort) */
.ant-table-wrapper .ant-table-tbody > tr > td {
  background: #fff !important;
  color: var(--app-text) !important;
}

/* Drawer พื้นหลังมองเห็น เข้ากับธีม */
.ant-drawer-content,
.ant-drawer-content-wrapper {
  background: #ffffff !important;
}
.ant-drawer-body {
  background: #ffffff !important;
  color: var(--app-text) !important;
}
.ant-drawer-header {
  background: #ffffff !important;
  border-bottom-color: var(--app-border) !important;
}
.ant-drawer-title {
  color: var(--app-text) !important;
}
.ant-drawer-close {
  color: var(--app-text) !important;
}
.ant-drawer-body .ant-form-item-label > label {
  color: var(--app-text) !important;
}

/* แถว hover/selected อ่านง่าย ไม่ดำทับข้อความ */
.ant-table-tbody > tr:hover > td {
  background: var(--app-table-row-hover-bg) !important;
  color: var(--app-text) !important;
}
.ant-table-tbody > tr:hover > td .ant-typography,
.ant-table-tbody > tr:hover > td .ant-tag,
.ant-table-tbody > tr:hover > td a {
  color: inherit !important;
}
.ant-table-tbody > tr.ant-table-row-selected > td,
.ant-table-tbody > tr.ant-table-row-selected:hover > td {
  background: var(--app-table-row-selected-bg) !important;
  color: var(--app-text) !important;
}
.ant-table-tbody > tr.ant-table-row-selected > td .ant-typography,
.ant-table-tbody > tr.ant-table-row-selected > td .ant-tag,
.ant-table-tbody > tr.ant-table-row-selected > td a {
  color: inherit !important;
}

/* Current user row highlight (theme-driven) */
.ant-table-tbody > tr.ranking-row-me > td {
  background: rgba(var(--app-primary-rgb) / 0.08) !important;
  border-top: 1px solid rgba(var(--app-primary-rgb) / 0.18) !important;
  border-bottom: 1px solid rgba(var(--app-primary-rgb) / 0.18) !important;
}
.ant-table-tbody > tr.ranking-row-me > td:first-child {
  border-left: 3px solid var(--app-primary) !important;
}

/* table scroll bar */
.ant-table-body {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: 2px;
}

.ant-table-body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.ant-table-body::-webkit-scrollbar-track {
  background-color: #e9e4e9;
}

.ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: #b1b1b1;
}

/* Tabs */
.ant-tabs-content-holder .ant-tabs-content {
  height: 100%;
}
.ant-tabs-nav {
  background-color: #fff; /* เปลี่ยนสีพื้นหลังของ Tabs header */
  padding-left: 10px;
  padding-right: 10px;
}
/**
 * 
 childe Table Styles
 */
.ant-table-row-level-1 {
  background-color: #f4f4f6 !important;
}

.ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: var(--app-primary) !important;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--app-primary) !important;
  font-weight: 700; /* Optionally, make the active tab text bold */
}

.ant-tabs-ink-bar {
  border-bottom: 5px solid var(--app-primary);
  border-radius: 20px 20px 0 0; /* Apply border-radius to top-left and top-right corners */
}

.ant-tabs-tab:first-child {
  margin-left: 20px; /* Adjust this value to control the space before the first tab */
}

/**
Tab Qc Work 
*/
.qc-tabs-top .ant-tabs-content {
  padding-top: 12px;
}

/* Pagination */
.ant-pagination .ant-pagination-item {
  background-color: "#FFF";
}
/* input addon */
.ant-input-group .ant-input-group-addon {
  padding: 0;
}

/* =========================================================
   Sidebar style: โปรไฟล์ + เมนูแบบ pill (light blue / dark gray)
   ========================================================= */
.app-sidebar {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 0;
}

.app-sidebar-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.app-sidebar-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--app-nav-pill-inactive-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.app-sidebar-profile-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--app-text);
  line-height: 1.2;
  text-align: center;
}

.app-sidebar-profile-sub {
  font-size: 13px;
  color: var(--app-text-muted);
  line-height: 1.2;
  text-align: center;
}

.ant-layout-sider-collapsed .app-sidebar-profile-name,
.ant-layout-sider-collapsed .app-sidebar-profile-sub,
.app-sidebar--collapsed .app-sidebar-profile-name,
.app-sidebar--collapsed .app-sidebar-profile-sub {
  display: none;
}

.app-sidebar--collapsed .app-sidebar-profile {
  padding: 8px 0;
  border-bottom: none;
}

.app-sidebar--collapsed .app-sidebar-profile-avatar {
  width: 36px;
  height: 36px;
}

.app-sidebar--collapsed .app-sidebar-profile-avatar .anticon {
  font-size: 18px !important;
}

.app-sidebar-nav.ant-menu {
  background: transparent !important;
  border: none !important;
}

.app-sidebar-nav.ant-menu .ant-menu-item,
.app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title {
  height: 36px !important;
  line-height: 36px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 16px !important;
  border-radius: var(--app-nav-pill-radius) !important;
  background: var(--app-nav-pill-inactive-bg) !important;
  color: var(--app-nav-pill-inactive-text) !important;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-sidebar-nav.ant-menu .ant-menu-item .anticon,
.app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title .anticon {
  color: var(--app-nav-pill-inactive-text) !important;
}

.app-sidebar-nav.ant-menu .ant-menu-item-selected,
.app-sidebar-nav.ant-menu .ant-menu-item-selected:hover {
  background: var(--app-nav-pill-active-bg) !important;
  color: var(--app-nav-pill-text) !important;
}

.app-sidebar-nav.ant-menu .ant-menu-item-selected .anticon {
  color: var(--app-nav-pill-text) !important;
}

.app-sidebar-nav.ant-menu .ant-menu-item:hover,
.app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title:hover {
  background: var(--app-primary-soft) !important;
  color: var(--app-nav-pill-inactive-text) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-sidebar-nav.ant-menu .ant-menu-item:hover .anticon,
.app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title:hover .anticon {
  color: var(--app-nav-pill-inactive-text) !important;
}

.app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-sub {
  background: transparent !important;
  padding-left: 20px;
}

.app-sidebar-nav.ant-menu .ant-menu-sub .ant-menu-item {
  margin-left: 0 !important;
  margin-top: 6px !important;
  padding-left: 16px !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-sidebar-nav.ant-menu .ant-menu-sub .ant-menu-item:hover {
  background: var(--app-primary-soft) !important;
  color: var(--app-nav-pill-inactive-text) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-sidebar-nav.ant-menu .ant-menu-sub .ant-menu-item:hover .anticon {
  color: var(--app-nav-pill-inactive-text) !important;
}

.app-sidebar-nav.ant-menu .ant-menu-sub .ant-menu-item:not(.ant-menu-item-selected),
.app-sidebar-nav.ant-menu .ant-menu-sub .ant-menu-item:not(.ant-menu-item-selected) .anticon {
  color: var(--app-nav-pill-inactive-text) !important;
}

/* ตอนย่อ sidebar: ไอคอนวงกลมขนาดคงที่ มองเห็นชัด */
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title {
  width: 36x !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 auto 8px auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item .anticon,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title .anticon {
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item span,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-layout-sider-collapsed .app-sidebar {
  padding: 12px 0;
  align-items: center;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-sub {
  display: none;
}

/* ตอนย่อ: ใช้ปุ่มวงกลมที่เราวาดเอง (มีไอคอนชัดเจน) */
.app-sidebar-nav-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.app-sidebar-nav-collapsed-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--app-bg);
  color: var(--app-text-muted);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-sidebar-nav-collapsed-btn .anticon {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-sidebar-nav-collapsed-btn:hover {
  background: var(--app-primary-soft);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.app-sidebar-nav-collapsed-btn--selected {
  background: var(--app-nav-pill-active-bg);
  color: var(--app-nav-pill-text);
  border-color: var(--app-nav-pill-active-bg);
  box-shadow: 0 2px 8px rgba(var(--app-primary-rgb) / 0.18);
}

.app-sidebar-nav-collapsed-btn--selected:hover {
  background: var(--app-nav-pill-active-bg);
  color: var(--app-nav-pill-text);
}

/* บังคับให้ไอคอนแสดงตอนย่อ (Ant Design อาจซ่อนหรือ clip) */
.ant-layout-sider-collapsed .ant-layout-sider-children {
  overflow: visible !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu {
  width: 100% !important;
  overflow: visible !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item .ant-menu-item-icon,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title .ant-menu-item-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 20px !important;
  margin: 0 !important;
  margin-inline-end: 0 !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item .anticon,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title .anticon {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item .anticon svg,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title .anticon svg {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
}

.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-item > *,
.ant-layout-sider-collapsed .app-sidebar-nav.ant-menu .ant-menu-submenu .ant-menu-submenu-title > * {
  overflow: visible !important;
}

/* กรอบพื้นที่เนื้อหา: สไตล์เดียวกันทุกเมนู */
.app-content-frame {
  min-height: calc(100vh - 64px - 24px);
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-content-card-radius);
  box-shadow: 0 2px 8px rgba(20, 103, 226, 0.06);
}

@media (max-width: 767px) {
  .app-content-frame {
    min-height: calc(100dvh - 64px - 12px);
    padding: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-content-frame {
    padding: 16px;
  }
}

/* หน้าเนื้อหา: การ์ดและ panel มุมโค้ง */
.app-content .ant-card,
.ant-layout-content .ant-card {
  border-radius: var(--app-content-card-radius) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.app-profile-card {
  box-shadow: 0 2px 8px rgba(20, 103, 226, 0.06) !important;
}

.app-profile-descriptions.ant-descriptions-bordered .ant-descriptions-view {
  border-color: var(--app-border) !important;
}

.app-profile-descriptions.ant-descriptions-bordered .ant-descriptions-item-label,
.app-profile-descriptions.ant-descriptions-bordered .ant-descriptions-item-content {
  border-color: var(--app-border) !important;
}

/* =========================================================
   Header ให้สไตล์เข้ากับ Sidebar (โทนฟ้า + pill)
   ตอนสไลด์ขึ้น/ลง ให้ header คงที่ด้านบน (sticky)
   ========================================================= */
.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100%;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.app-header-inner.ant-space {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.app-header-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--app-primary);
  box-shadow: 0 2px 4px rgba(20, 103, 226, 0.25);
  z-index: 10;
}

.app-header-menu-btn:hover {
  color: var(--app-primary) !important;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  height: 44px;
  flex-shrink: 0;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .app-header-actions {
    gap: 12px;
    margin-right: 16px;
  }
}

.app-header-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px !important;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-nav-pill-radius);
  background: var(--app-nav-pill-inactive-bg);
  color: var(--app-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(20, 103, 226, 0.08);
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .app-header-profile-trigger {
    gap: 12px;
    padding: 0 16px 0 8px;
  }
}

.app-header-profile-trigger:hover {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 2px 4px rgba(20, 103, 226, 0.12);
  border-color: var(--app-border);
}

.app-header-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.app-header-profile-avatar--image {
  background: transparent;
}

.app-header-profile-avatar .anticon {
  font-size: 18px;
}

.app-header-profile-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-profile-chevron {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.9;
  color: var(--app-subtle);
}

.app-shell-profile-trigger .app-header-profile-chevron {
  color: var(--app-subtle);
}

.app-header-locale.ant-select {
  min-width: 72px;
  height: 44px !important;
}

.app-header-locale.ant-select .ant-select-selector {
  border-radius: var(--app-nav-pill-radius) !important;
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 8px 24px !important;
  align-items: center !important;
  display: flex !important;
  box-shadow: 0 1px 2px rgba(20, 103, 226, 0.08);
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

@media (min-width: 768px) {
  .app-header-locale.ant-select {
    min-width: 100px;
  }
  .app-header-locale.ant-select .ant-select-selector {
    padding-inline: 14px 28px !important;
  }
}

.app-header-locale.ant-select .ant-select-selection-search,
.app-header-locale.ant-select .ant-select-selection-item,
.app-header-locale.ant-select .ant-select-selection-placeholder {
  color: var(--app-text) !important;
  line-height: 44px !important;
  height: 44px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  display: flex !important;
  align-items: center !important;
}

.app-header-locale-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-header-locale-flag {
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}

.app-header-locale-arrow.ant-select-arrow,
.app-header-locale .ant-select-arrow {
  color: var(--app-text-muted) !important;
  font-size: 10px !important;
  opacity: 0.9;
}

.app-header-locale.ant-select:hover .ant-select-selector {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  box-shadow: 0 2px 4px rgba(20, 103, 226, 0.12);
  border-color: var(--app-border) !important;
}

/* Dropdown ตัวเลือกภาษา: พื้นหลังสว่าง ตัวอักษรดำ อ่านง่าย */
.app-header-locale-dropdown.ant-select-dropdown {
  background: var(--app-bg) !important;
  border-radius: var(--app-content-card-radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--app-border) !important;
}

.app-header-locale-dropdown .ant-select-item {
  color: var(--app-text) !important;
}

.app-header-locale-dropdown .ant-select-item-option {
  color: var(--app-text) !important;
}

.app-header-locale-dropdown .ant-select-item-option-content {
  color: var(--app-text) !important;
}

.app-header-locale-dropdown .ant-select-item-option-active,
.app-header-locale-dropdown .ant-select-item-option:hover {
  background: var(--app-nav-pill-inactive-bg) !important;
}

.app-header-locale-dropdown .ant-select-item-option-selected {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
  font-weight: 600;
}

.app-header-locale-dropdown .ant-select-item-option-selected .ant-select-item-option-content {
  color: var(--app-primary) !important;
}

/* Profile dropdown — follow light/dark theme tokens */
.app-header-profile-dropdown.ant-dropdown .ant-dropdown-menu {
  background: var(--app-bg) !important;
  border-radius: var(--app-content-card-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
  border: 1px solid var(--app-shell-panel-border) !important;
  padding: 4px 0 !important;
}

[data-color-mode='dark'] .app-header-profile-dropdown.ant-dropdown .ant-dropdown-menu {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

.app-header-profile-dropdown .ant-dropdown-menu-item,
.app-header-profile-dropdown .ant-dropdown-menu-item .ant-dropdown-menu-title-content,
.app-header-profile-dropdown .ant-dropdown-menu-item .anticon {
  color: var(--app-text) !important;
}

.app-header-profile-dropdown .ant-dropdown-menu-item .ant-dropdown-menu-item-icon {
  color: var(--app-text) !important;
}

.app-header-profile-dropdown .ant-dropdown-menu-item:hover,
.app-header-profile-dropdown .ant-dropdown-menu-item-active {
  background: var(--app-hover-accent) !important;
  color: var(--app-text) !important;
}

.app-header-profile-dropdown .ant-dropdown-menu-item:hover .ant-dropdown-menu-title-content,
.app-header-profile-dropdown .ant-dropdown-menu-item:hover .ant-dropdown-menu-item-icon,
.app-header-profile-dropdown .ant-dropdown-menu-item:hover .anticon {
  color: var(--app-primary) !important;
}

/* =========================================================
   WMS enterprise shell (reference-style light layout)
   ========================================================= */
.app-protected-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.app-protected-shell .app-shell-layout {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.app-protected-shell .app-shell-sider-wrap {
  position: relative;
  top: auto;
  height: 100%;
  max-height: 100%;
}

.app-protected-shell .app-shell-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.app-protected-shell .app-shell-header {
  position: relative !important;
  top: auto !important;
  flex-shrink: 0;
}

.app-protected-shell .app-shell-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.app-protected-shell .app-shell-content-frame {
  min-height: 0;
}

.app-shell-layout {
  display: flex !important;
  align-items: stretch !important;
  min-height: 100dvh;
  background: var(--app-shell-canvas);
}

.app-shell-sider-wrap {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-shrink: 0;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--app-shell-sidebar-bg);
}

.app-shell-sider-wrap .app-shell-sider.ant-layout-sider {
  height: 100% !important;
  max-height: 100%;
}

.app-shell-main {
  background: var(--app-shell-canvas) !important;
}

.app-shell-content {
  padding: 0 !important;
  background: var(--app-shell-canvas) !important;
}

.app-shell-content-frame {
  min-height: calc(100dvh - 64px);
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--app-shell-canvas);
}

.app-shell-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 56px !important;
  padding: 0 !important;
  line-height: normal !important;
  background: var(--app-shell-header-bg) !important;
  border-bottom: 1px solid var(--app-shell-panel-border) !important;
  box-shadow: none;
}

.app-shell-header.ant-layout-header {
  display: flex !important;
  align-items: center !important;
  padding-inline: 0 !important;
}

.app-shell-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 20px 0 8px;
}

.app-shell-header__left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.app-shell-header .app-header-actions {
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
}

.app-shell-header__menu-btn,
.app-shell-header__icon-btn {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #6b7280 !important;
}

.app-shell-header__menu-btn {
  display: inline-flex !important;
}

.app-shell-header__icon-btn {
  display: inline-flex !important;
}

.app-shell-header__icon-btn:hover,
.app-shell-header__menu-btn:hover {
  color: var(--app-primary) !important;
  background: var(--app-hover-accent) !important;
}

.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: 4px;
  font-size: 13px;
  color: var(--app-subtle);
}

.app-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.app-breadcrumb__item--current {
  color: var(--app-heading);
  font-weight: 600;
}

.app-breadcrumb__icon {
  font-size: 13px;
}

.app-breadcrumb__sep {
  color: var(--app-border);
}

.app-shell-profile-trigger {
  height: auto !important;
  min-height: 44px;
  padding: 4px 8px 4px 4px !important;
  border-radius: 10px !important;
  background: var(--app-panel-bg) !important;
  border: 1px solid var(--app-shell-panel-border) !important;
}

.app-shell-profile-trigger__meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-left: 4px;
  line-height: 1.2;
}

.app-shell-profile-trigger__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-heading);
}

.app-shell-profile-trigger__role {
  font-size: 11px;
  color: var(--app-subtle);
}

.app-header-profile-avatar--initial {
  background: linear-gradient(135deg, var(--app-primary-light), var(--app-primary-active));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.app-shell-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--app-shell-panel-border);
  background: var(--app-panel-bg);
  padding: 12px 20px;
}

.app-shell-footer--content {
  margin-top: 28px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--app-shell-panel-border);
  background: transparent;
  text-align: center;
}

.app-shell-footer--content .app-shell-footer__copy {
  margin: 0;
  font-size: 12px;
  color: var(--app-subtle-light);
}

.wms-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.wms-page-toolbar__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.wms-page-toolbar__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--app-heading) !important;
  letter-spacing: -0.02em;
}

.wms-page-toolbar__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.wms-page-toolbar__badge--success {
  color: #047857;
  background: #d1fae5;
}

.wms-page-toolbar__badge--neutral {
  color: #4b5563;
  background: #f3f4f6;
}

.wms-page-toolbar__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--app-subtle);
}

.wms-page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.wms-page--centered {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.wms-page__loading-text {
  margin: 0;
  color: var(--app-text-muted, #64748b);
}

.wms-page__notice {
  margin-bottom: 16px;
}

.wms-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wms-dashboard-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--app-primary-rgb) / 0.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(var(--app-primary-rgb) / 0.06) 0%, rgba(var(--app-primary-light-rgb) / 0.05) 55%, var(--app-panel-bg) 100%),
    var(--app-panel-bg);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.wms-dashboard-hero__date {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.wms-dashboard-hero__headline {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--app-heading) !important;
  letter-spacing: -0.02em;
}

.wms-dashboard-hero__text {
  margin: 8px 0 0;
  max-width: 42rem;
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

.wms-dashboard-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #047857;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.wms-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wms-stat-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--app-shell-panel-border);
  border-radius: 14px;
  background: var(--app-panel-bg);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wms-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.wms-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  flex-shrink: 0;
}

.wms-stat-card__icon--brand {
  color: var(--app-primary);
  background: rgba(var(--app-primary-rgb) / 0.1);
}

.wms-stat-card__icon--success {
  color: #047857;
  background: #ecfdf5;
}

.wms-stat-card__icon--accent {
  color: var(--app-primary-active);
  background: rgba(var(--app-primary-light-rgb) / 0.18);
}

.wms-stat-card__body {
  min-width: 0;
}

.wms-stat-card__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--app-subtle-light);
}

.wms-stat-card__value {
  display: block;
  margin-top: 6px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--app-heading);
}

.wms-stat-card__value--compact {
  font-size: 1.05rem;
  line-height: 1.35;
}

.wms-stat-card__value--success {
  color: #047857;
}

.wms-stat-card__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.wms-dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.wms-panel--elevated,
.wms-panel--accent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wms-panel--elevated {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.wms-panel--accent {
  border-color: rgba(var(--app-primary-rgb) / 0.14);
  background:
    linear-gradient(180deg, rgba(var(--app-primary-rgb) / 0.03) 0%, #ffffff 42%),
    #ffffff;
}

.wms-panel__header {
  margin-bottom: 4px;
}

.wms-checklist {
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.wms-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
}

.wms-checklist .anticon {
  margin-top: 2px;
  color: #10b981;
  font-size: 14px;
}

.wms-dashboard-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px 16px;
  border: 1px solid rgba(var(--app-primary-rgb) / 0.16);
  border-radius: 12px;
  background: var(--app-panel-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wms-dashboard-cta:hover {
  border-color: rgba(var(--app-primary-rgb) / 0.32);
  box-shadow: 0 8px 20px rgba(var(--app-primary-rgb) / 0.12);
  transform: translateY(-1px);
  color: inherit;
}

.wms-dashboard-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--app-primary-rgb) / 0.1);
  color: var(--app-primary);
  font-size: 18px;
  flex-shrink: 0;
}

.wms-dashboard-cta__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.wms-dashboard-cta__copy strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-heading);
}

.wms-dashboard-cta__copy span {
  font-size: 12px;
  color: #64748b;
}

.wms-dashboard-cta__arrow {
  color: var(--app-primary);
  font-size: 14px;
}

.wms-steps--timeline {
  gap: 0;
  margin-top: 8px;
}

.wms-steps--timeline .wms-steps__item {
  position: relative;
  align-items: flex-start;
  padding: 14px 0;
}

.wms-steps--timeline .wms-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 42px;
  bottom: -2px;
  width: 2px;
  background: #e2e8f0;
}

.wms-steps--timeline .wms-steps__item--done:not(:last-child)::after {
  background: rgba(var(--app-primary-rgb) / 0.22);
}

.wms-steps__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wms-steps__content strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-heading);
}

.wms-steps__content span {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.wms-steps__item--done {
  color: #334155;
}

.wms-steps__item--current {
  color: var(--app-heading);
}

.wms-steps__item--done .wms-steps__index {
  border-color: #10b981;
  color: #fff;
  background: #10b981;
  font-size: 13px;
}

.wms-steps__item--current .wms-steps__index {
  border-color: var(--app-primary);
  color: #fff;
  background: var(--app-primary);
  box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb) / 0.14);
}

.wms-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wms-panel {
  padding: 22px;
  border: 1px solid var(--app-shell-panel-border);
  border-radius: 14px;
  background: var(--app-panel-bg);
}

.wms-panel__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--app-heading) !important;
}

.wms-panel__desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--app-subtle);
}

.app-primary-color-setting__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--app-shell-panel-border);
}

.wms-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wms-kpi {
  padding: 14px;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  background: #fafbfc;
}

.wms-kpi__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.wms-kpi__value {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.wms-kpi__value--success {
  color: #047857;
}

.wms-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wms-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #9ca3af;
}

.wms-steps__item--active {
  color: #374151;
  font-weight: 500;
}

.wms-steps__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  background: var(--app-panel-bg);
}

.wms-steps__item--active .wms-steps__index {
  border-color: var(--app-primary);
  color: #fff;
  background: var(--app-primary);
}

@media (max-width: 991px) {
  .wms-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .wms-dashboard-main {
    grid-template-columns: 1fr;
  }

  .wms-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .app-shell-content-frame {
    padding: 14px;
  }

  .wms-page-toolbar__title {
    font-size: 22px;
  }

  .wms-dashboard-hero {
    padding: 18px 16px;
  }

  .wms-dashboard-hero__badge {
    width: 100%;
    justify-content: center;
  }

  .wms-kpi-row {
    grid-template-columns: 1fr;
  }
}