/* General Trigger Button Styles */
.trigger {
  padding: 0 6px; /* Slightly more padding */
  font-size: 20px; /* Slightly larger icon */
  line-height: 64px;
  cursor: pointer;
  transition: color 0.4s ease-in-out; /* Smoother, more deliberate transition */
}

.trigger:hover {
  color: #2d6a9f; /* Refined Primary Accent on hover */
}

/* Ant Design Layout Backgrounds */
.ant-layout-has-sider {
  background: #eff4f7; /* Soft background for main layout */
}
.site-layout .site-layout-background {
  background: #eff4f7; /* Soft background for site layout */
  border-radius: 12px; /* Add some overall rounding to the content area */
  margin: 16px; /* Space from edges for a floating look */
  padding: 24px; /* Internal padding */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* Deeper, softer shadow */
}

.ant-layout .ant-layout-header {
  background: #ffffff; /* Pure white header for clarity */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); /* Deeper, softer shadow for depth */
  border-bottom: 1px solid #e0e9ef; /* Subtle separation line */
  padding: 0 24px; /* More padding for header content */
}

/* Header Trigger Button Styles */
.trigger-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: flex-end;
  position: absolute;
  right: 0;
  padding: 20px; /* More generous padding */
  font-size: 20px; /* Consistent icon size */
  line-height: 64px;
  cursor: pointer;
  transition: color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* Slower, more elegant transition */
}

.trigger-header:hover {
  color: #34793d; /* Deep Success Green on hover for header trigger */
}

/* Logo Area Styles - Enhanced for premium feel */
.logo {
  padding: 24px; /* More generous padding */
  margin-bottom: 12px; /* Slightly more space */
  height: 100px; /* Slightly taller */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(34, 56, 75, 0.15); /* Refined Text/Borders with more transparency */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); /* Very subtle shadow for separation */
}

/* Ant Design Layout (main content area) */
.ant-layout {
  min-height: 100vh !important;
  flex-direction: column !important;
  background: #eff4f7; /* Ensure full background matches the soft background */
}

/* Ant Design Layout Sider (Sidebar) Styles */
.ant-layout-sider {
  height: 100vh !important;
  flex: 0 0 260px !important; /* Slightly wider sidebar for more breathing room */
  max-width: 260px !important;
  min-width: 260px !important;
  width: 260px !important;
  position: fixed !important;
  z-index: 1000;
  background: #d9e4ec !important; /* Richer, muted blue-gray for sider */
  transition: all 0.3s ease-in-out; /* Slightly longer transition */
  box-shadow: 3px 0 12px rgba(0, 0, 0, 0.1); /* More pronounced, soft shadow for depth */
}

/* Collapsed Sider States (for responsiveness) */
.mobile-collapsed {
  flex: 0 0 0px !important;
  max-width: 0px !important;
  min-width: 0px !important;
  width: 0px !important;
  display: none !important;
}
.desktop-collapsed {
  flex: 0 0 80px !important; /* Keep a minimal width for desktop collapsed */
  max-width: 80px !important;
  min-width: 80px !important;
  width: 80px !important;
  .logo {
    height: 64px; /* Adjust logo height for collapsed state */
    padding: 10px;
  }
}

/* Sider Children (Content within Sidebar) Styles */
.ant-layout-sider-children {
  height: 100% !important;
  display: block;
  margin-top: -0.1px;
  padding-top: 0.1px;
  overflow-y: auto; /* Allow scroll for content */
  overflow-x: hidden; /* Hide horizontal scroll */
  /* Richer subtle blue gradient for sider content */
  background: linear-gradient(176.44deg, #d9e4ec 20%, #c4d2dc 90%) !important;
}

/* Hide scrollbar for sider children (or make it very subtle) */
.ant-layout-sider-children::-webkit-scrollbar {
  width: 6px; /* Make scrollbar slightly visible */
}
.ant-layout-sider-children::-webkit-scrollbar-track {
  background-color: transparent; /* Keep track transparent */
}
.ant-layout-sider-children::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Subtle dark thumb */
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.02); /* Very subtle shadow */
}
.ant-layout-sider-children::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25); /* Slightly darker on hover */
}

/* Ant Design Menu Styles */
.ant-menu-light {
  background: initial;
  padding-top: 15px; /* More padding at the top of the menu list */
  padding-bottom: 15px; /* More padding at the bottom */
}

.ant-menu-inline .ant-menu-item:not(:last-child),
.ant-menu-vertical-left .ant-menu-item:not(:last-child),
.ant-menu-vertical-right .ant-menu-item:not(:last-child),
.ant-menu-vertical .ant-menu-item:not(:last-child) {
  margin-bottom: 10px; /* Increased spacing between menu items */
  background: initial;
}

.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
  background: initial;
  margin-right: 16px; /* Add margin to the right for consistent rounding */
}

/* Menu Item Hover Styles - More refined */
/* **Refined hover for non-selected items** */
:where(.css-dev-only-do-not-override-1km3mtt).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover {
  background-color: rgba(45, 106, 159, 0.12); /* Slightly more prominent soft highlight */
  border-radius: 8px; /* Consistent rounded corners */
  color: #082130 !important; /* Deep Blue for text on hover for contrast */
  transform: translateX(4px); /* Subtle slide effect on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow on hover */
}

.ant-menu-item a {
  color: #22384b; /* Darker, elegant charcoal-blue for menu item text */
  font-weight: 500;
  font-size: 15px; /* Slightly larger font */
}

/* Enhanced Hover and Active States for Menu Items */
.ant-menu-light .ant-menu-item-active,
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-submenu-active,
.ant-menu-light .ant-menu-submenu-title:hover,
.ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
  color: #082130 !important; /* Even deeper Deep Blue for active/hovered text */
  /* Remove background here as it's handled by specific hover/selected rules */
}
.ant-menu-light .ant-menu-item-active {
  color: #082130 !important; /* Even deeper Deep Blue for active text */
}

:where(.css-dev-only-do-not-override-1km3mtt).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):active {
  background-color: rgba(45, 106, 159, 0.2); /* More visible Primary Accent transparent on click */
  transform: translateY(1px); /* Slight press effect on click */
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Selected Menu Item Styles - Most prominent and premium */
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  /* Stronger, richer gradient with Primary Accent and Deep Blue */
  background: linear-gradient(118deg, rgba(45, 106, 159, 0.95), rgba(8, 33, 48, 0.9)) !important;
  border-left: 6px solid #082130; /* Even deeper Deep Blue border */
  border-radius: 8px; /* Consistent larger rounded corners */
  box-shadow: 0 4px 15px rgba(8, 33, 48, 0.3); /* Deeper, more diffused shadow for depth */
  transform: scale(1.02); /* More noticeable zoom effect on selected */
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smoother, more elegant transition */
  padding-left: 24px !important; /* Ensure padding stays consistent with other menu items */
}

.ant-menu-item-selected,
.ant-menu-item-selected a,
.ant-menu-item-selected a:hover {
  color: #ffffff !important; /* Pure White text for selected item, for strong contrast */
}

/* Menu Item Content Alignment and Transitions */
.ant-menu-item .ant-menu-item-icon + span,
.ant-menu-item .anticon + span,
.ant-menu-submenu-title .ant-menu-item-icon + span,
.ant-menu-submenu-title .anticon + span {
  margin-left: 12px; /* Increased spacing between icon and text */
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    /* Standard ease-out */ margin 0.3s,
    color 0.3s;
  font-weight: 500;
  font-size: 15px; /* Consistent font size */
}

.ant-menu-submenu-arrow,
.ant-menu-submenu-expand-icon {
  position: absolute;
  top: 50%;
  right: 20px; /* Slightly more space from the edge */
  width: 12px; /* Slightly larger arrow */
  color: #22384b !important; /* Darker, elegant charcoal-blue for submenu arrow */
  transform: translateY(-50%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
  font-weight: 600; /* Bolder arrow */
  font-size: 15px; /* Consistent font size */
}

/* Ant Design Icon Styles */
.anticon {
  vertical-align: middle;
  transition:
    color 0.3s ease-in-out,
    transform 0.2s ease-out; /* Add transition for icons too, with subtle transform */
}
.ant-menu-item:hover .anticon {
  transform: scale(1.1); /* Subtle zoom on icon hover */
  color: #ffffff !important; /* Deep Blue for icon on hover */
}

/* Inline Menu Item Specifics */
.ant-menu-inline.ant-menu-root .ant-menu-item,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
  display: flex;
  align-items: center;
  transition:
    border-color 0.3s,
    background 0.3s,
    padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out; /* Add transform and box-shadow to transition */
  padding-left: 28px !important; /* More generous left padding */
  height: 44px; /* Fixed height for consistent feel */
  line-height: 44px; /*Center content vertically */
  border-radius: 8px; /* Consistent rounded corners */
}

.ant-menu-inline.ant-menu-root .ant-menu-item:hover,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title:hover {
  color: #082130 !important; /* Even deeper Deep Blue on hover for better contrast */
  background-color: rgba(45, 106, 159, 0.88) !important; /* Soft highlight background on hover */
  border-radius: 8px; /* Consistent rounded corners */
  padding-left: 28px !important;
  transform: translateY(-2px); /* Subtle lift on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
}

/* Main Menu Title (e.g., "ตั้งค่าระบบ") */
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
  font-weight: bold;
  color: #ffffff !important; /* Keep text white for main menu title */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* Enhanced Gradient and Shadow for main menu title */
  background: linear-gradient(118deg, rgba(8, 33, 48, 0.98), rgba(45, 106, 159, 0.9)) !important; /* Deeper, richer gradient */
  border-left: 6px solid #2d6a9f; /* Primary Accent border for main menu */
  border-radius: 8px; /* Consistent rounded corners */
  box-shadow: 0 5px 18px rgba(8, 33, 48, 0.4); /* Stronger, more diffused shadow */
  margin-bottom: 10px; /* Consistent spacing */
  transform: scale(1.005); /* Slight scale for visual pop */
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

  &:hover {
    color: #ffffff !important; /* Keep text white on hover */
    background: linear-gradient(118deg, rgba(8, 33, 48, 1), rgba(45, 106, 159, 0.98)) !important; /* Even more intense on hover */
    box-shadow: 0 6px 20px rgba(8, 33, 48, 0.5);
    transform: translateY(-2px) scale(1.01); /* Slight lift and scale on hover */
  }
}

/* Icon in Main Menu Title */
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title .anticon {
  color: #ffffff !important; /* Ensure icon is white */
}

/* Customizing submenu items */
.ant-menu-inline.ant-menu-root .ant-menu-submenu .ant-menu-item {
  color: #22384b; /* Darker, elegant charcoal-blue for submenu items */
  padding-left: 48px !important; /* Increased indentation for submenu items */
  height: 44px; /* Slightly shorter height for submenu items */
  line-height: 44px;
  margin-right: 0; /* No right margin for submenu items */
  border-radius: 6px; /* Slightly smaller border radius for submenu */
  transition: all 0.2s ease-out; /* Add transition for submenu items */
  &:hover {
    background-color: rgba(45, 106, 159, 0.08); /* Slightly more visible hover for submenu items */
    color: #082130 !important; /* Deep Blue text on hover for contrast */
    transform: translateX(2px); /* Subtle slide for submenu items on hover */
  }
}

/* Ant Design Input Styles */
.ant-input-affix-wrapper {
  position: relative;
  display: inline-flex; /* Use inline-flex for better control */
  width: 100%;
  min-width: 0;
  font-size: 16px !important;
  line-height: 1.5 !important;
  background-image: none;
  border: 1px solid #c5d2dd; /* Softer, slightly darker border for inputs */
  border-radius: 8px !important; /* More rounded corners, consistent */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
  color: #22384b !important; /* Ensure input text color is consistent */
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05); /* Subtle inner shadow for depth */
}
.ant-input-affix-wrapper:hover {
  border-color: #8cafcf !important; /* Lighter blue on hover */
}
.ant-input-affix-wrapper:focus-within {
  border-color: #2d6a9f !important; /* Primary Accent on focus */
  box-shadow: 0 0 0 4px rgba(45, 106, 159, 0.25); /* More pronounced, but still soft, focus shadow */
  background-color: #ffffff; /* Ensure white background on focus */
}

.ant-input:placeholder-shown {
  line-height: 1.5 !important;
  color: rgba(34, 56, 75, 0.5) !important; /* Darker placeholder for clarity */
}

.ant-input-status-success {
  line-height: 1.5 !important;
}
.ant-input {
  line-height: 1.5 !important;
  background-color: transparent; /* Ensure input background is transparent to show wrapper's background */
}

/* Ant Design Button Styles */
.ant-btn {
  /* Base button styles for consistency */
  font-weight: 600; /* Bolder text for all buttons */
  padding: 10px 24px; /* More generous padding for all buttons */
  height: auto; /* Allow height to adjust based on padding */
  border-radius: 8px; /* Consistent rounded corners for all buttons */
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smoother, more dynamic transition */
  font-size: 15px; /* Slightly larger font for buttons */
}

.ant-btn-primary {
  color: #ffffff;
  border-color: #082130; /* Deeper Deep Blue for primary button border */
  background-color: #082130; /* Deeper Deep Blue for primary button background */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); /* More prominent shadow text */
  box-shadow: 0 6px 20px rgba(8, 33, 48, 0.55); /* Even more impactful shadow using Deep Blue */
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
.ant-btn-primary:active {
  color: #ffffff !important;
  border-color: #2d6a9f !important; /* Refined Primary Accent on hover */
  background-color: #2d6a9f !important; /* Refined Primary Accent on hover */
  box-shadow: 0 8px 25px rgba(45, 106, 159, 0.7); /* Even more pronounced shadow on hover */
  transform: translateY(-3px); /* More noticeable lift on hover */
}

.ant-btn-primary:disabled {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(8, 33, 48, 0.4); /* Faded Deep Blue */
  background-color: rgba(8, 33, 48, 0.3); /* Faded Deep Blue */
  box-shadow: none;
  cursor: not-allowed;
  transform: none; /* No lift when disabled */
}

/* Secondary Button Styles */
.ant-btn-default {
  border-color: #c5d2dd; /* Default border color for consistency */
  color: #22384b; /* Default text color */
  background-color: #ffffff;
}

.ant-btn-default:not(:disabled):hover {
  color: #082130; /* Deeper Deep Blue text on hover */
  border-color: rgba(8, 33, 48, 0.5); /* Slightly more visible transparent Deep Blue border */
  background-color: rgba(8, 33, 48, 0.1); /* More noticeable subtle transparent Deep Blue background */
  box-shadow: 0 3px 8px rgba(8, 33, 48, 0.15); /* More subtle lift effect */
  transform: translateY(-2px);
}
.ant-btn-default:not(:disabled):active {
  transform: translateY(0); /* Press down effect */
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Success Button Styles */
.ant-btn-success {
  color: #fff !important;
  background-color: #34793d !important; /* Deep Success Green */
  border-color: #34793d !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(52, 121, 61, 0.45); /* Stronger shadow */
}

.ant-btn-success:focus,
.ant-btn-success:hover,
.ant-btn-success:active {
  color: #fff !important;
  background-color: #2a6432 !important; /* Darkened Success Green on hover */
  border-color: #2a6432 !important;
  box-shadow: 0 0 0 4px rgba(52, 121, 61, 0.5) !important;
  transform: translateY(-3px);
}

/* Danger Button Styles */
.ant-btn-danger-dark {
  color: #fff !important;
  border-color: #ab3333 !important; /* Impactful Danger Red border */
  background-color: #ab3333 !important; /* Impactful Danger Red background */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(171, 51, 51, 0.45); /* Stronger shadow */
}

.ant-btn-danger-dark:focus,
.ant-btn-danger-dark:hover,
.ant-btn-danger-dark:active {
  color: #fff !important; /* Keep text white */
  border-color: #bf4444 !important; /* Lighter Danger Red on hover */
  background-color: #bf4444 !important; /* Lighter Danger Red on hover */
  box-shadow: 0 0 0 4px rgba(171, 51, 51, 0.5) !important;
  transform: translateY(-3px);
}

/* Ant Design Table Header Styles */
th.ant-table-cell {
  font-size: 17px !important; /* Slightly larger font */
  font-weight: 700 !important;
  background-color: #082130 !important; /* Deeper Deep Blue for table headers */
  color: #ffffff !important; /* White text for table headers */
  padding: 16px 20px !important; /* More generous padding for a premium feel */
  border-bottom: 2px solid #2d6a9f !important; /* A more distinct accent border for headers */
  text-align: left; /* Ensure alignment is consistent */
}

/* Ant Design Table Row Striping (Optional, for added visual premium) */
.ant-table-tbody > tr:nth-child(even) > td {
  background-color: rgba(239, 244, 247, 0.7); /* Lighter background for even rows */
}
.ant-table-tbody > tr.ant-table-row:hover > td {
  background-color: rgba(45, 106, 159, 0.06) !important; /* Slightly more visible highlight on row hover */
  cursor: pointer; /* Indicate row is clickable/interactive */
}
td.ant-table-cell {
  padding: 14px 20px !important; /* Consistent cell padding */
  font-size: 15px; /* Consistent cell font size */
  color: #22384b; /* Darker text for table cells */
  border-bottom: 1px solid #e0e9ef; /* Subtle border between rows */
}

/* Ant Design Select Input Styles */
.ant-select-selector {
  /* line-height: 1.5 !important; */
  /* min-height: 46px !important; */

  border: 1px solid #c5d2dd !important; /* Consistent input border color */
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}
.ant-select-selector:hover {
  border-color: #8cafcf !important;
}
.ant-select-focused .ant-select-selector {
  border-color: #2d6a9f !important;
  box-shadow: 0 0 0 4px rgba(45, 106, 159, 0.25);
  background-color: #ffffff;
}
.ant-select-single .ant-select-selector .ant-select-selection-item {
  height: 100%;
  display: flex;
  align-items: center;
  color: #22384b; /* Darker text for selected item */
}
.ant-select-arrow {
  color: #22384b; /* Darker arrow for consistency */
}

/* Selected Submenu Item Styles - Most distinct */
.ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: #ffffff !important; /* White text for selected submenu title */
  border-left: 6px solid #082130; /* Deeper Deep Blue border */
  /* Stronger, richer gradient */
  background: linear-gradient(118deg, rgba(45, 106, 159, 0.98), rgba(8, 33, 48, 0.9)) !important;
  border-radius: 8px; /* Consistent larger rounded corners */
  box-shadow: 0 4px 15px rgba(8, 33, 48, 0.35); /* More pronounced shadow */
  transform: scale(1.02); /* Consistent scale effect */
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Menu Title Content Hover/Focus Styles */
.ant-menu-title-content:hover,
.ant-menu-title-content:focus {
  color: #ffffff !important; /* Deep Blue on hover/focus */
}
.ant-menu-item-icon:hover svg,
.ant-menu-item-icon:focus svg {
  color: #ffffff !important; /* Deep Blue for icons on hover/focus */
}
.ant-menu-submenu-title .ant-menu-item-icon:active svg {
  color: #ffffff !important; /* Deep Blue for icons on active */
}

/* General Selected Menu Item Styles (ensuring consistency) */
.ant-menu-item-selected {
  /* Using the same stronger, richer gradient as specific selected states */
  background: linear-gradient(118deg, rgba(45, 106, 159, 0.98), rgba(8, 33, 48, 0.9)) !important;
  border-left: 6px solid #082130; /* Deeper Deep Blue border */
  color: #ffffff !important; /* Pure White text for selected item */
  box-shadow: 0 4px 15px rgba(8, 33, 48, 0.35); /* Consistent shadow */
}

/* Header Layout Styles */
.header-layout-style {
  background-color: transparent !important;
  justify-content: flex-end;
  display: flex;
  .style-collapsed {
    text-align: center;
    left: 0;
    right: 0;
    position: relative;
    z-index: 1;
    max-height: 65px;
  }
  .style-lang {
    text-align: right;
    position: relative;
    display: flex;
    padding-right: 15px; /* Slightly more padding */
    cursor: pointer;
    max-height: 65px;
    font-size: 15px; /* Consistent font size */
    color: #22384b; /* Darker text color */
    align-items: center; /* Vertically align text */
  }
  .style-lang:hover {
    color: #2d6a9f; /* Primary accent on hover */
  }
}

/* Ant Design Menu Item Link Colors */
:where(.css-dev-only-do-not-override-1km3mtt).ant-menu-light .ant-menu-item a,
:where(.css-dev-only-do-not-override-1km3mtt).ant-menu-light .ant-menu-item a:focus {
  color: #22384b; /* Darker, elegant charcoal-blue for menu item links */
  transition: color 0.3s ease-in-out; /* Add transition to link color */
}

/* **Ensure link color changes on hover for non-selected items** */
:where(.css-dev-only-do-not-override-1km3mtt).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover a {
  color: #082130 !important; /* Deep Blue for link text on hover */
}

/* **Subtle change to selected item link for visual consistency** */
.ant-menu-item-selected a {
  color: #ffffff !important; /* Keep white for selected link */
}