:root {
  /* Natural Colors */
  --color-white: #FFFFFF;
  --color-natural-100: #F4F6F7;
  --color-natural-200: #EBEBEB;
  --color-natural-300: #CCCCCC;
  --color-natural-400: #999999;
  --color-black: #111111;
  --color-light-red: #FFECEC;
  --color-red: #FA3E3E;

  /* Blue Colors */
  --color-blue-50: #F0F9FF;
  --color-blue-100: #E1F3FD;
  --color-blue-200: #BCE7FB;
  --color-blue-300: #80D5F9;
  --color-blue-400: #3DC0F3;
  --color-blue-500: #13A6E0;
  --color-blue-600: #0787C2;
  --color-blue-700: #076C9D;
  --color-blue-800: #0A5B82;
  --color-blue-900: #0E4C6C;
  --color-blue-950: #0A3147;

  /* Orange Colors */
  --color-orange-50: #FEF6EE;
  --color-orange-100: #FEEBD6;
  --color-orange-200: #FBD2AD;
  --color-orange-300: #F9B278;
  --color-orange-400: #F58842;
  --color-orange-500: #F2671D;
  --color-orange-600: #E04D13;
  --color-orange-700: #BC3912;
  --color-orange-800: #962E16;
  --color-orange-900: #792915;
  --color-orange-950: #411209;

  /* Green Colors */
  --color-green-50: #E9FFF8;
  --color-green-100: #CBFFED;
  --color-green-200: #9BFFE0;
  --color-green-300: #5BFAD3;
  --color-green-400: #13E0B4;
  --color-green-500: #00D3AA;
  --color-green-600: #00AD8C;
  --color-green-700: #008A74;
  --color-green-800: #006D5C;
  --color-green-900: #00594D;
  --color-green-950: #00332D;

  /* Dark Blue Colors */
  --color-dark-blue-50: #EAF6FF;
  --color-dark-blue-100: #D9EEFF;
  --color-dark-blue-200: #BADEFF;
  --color-dark-blue-300: #91C7FF;
  --color-dark-blue-400: #66A2FF;
  --color-dark-blue-500: #437EFF;
  --color-dark-blue-600: #2255FF;
  --color-dark-blue-700: #133FE0;
  --color-dark-blue-800: #163CBD;
  --color-dark-blue-900: #1B3A94;
  --color-dark-blue-950: #102056;

  /* Purple Colors */
  --color-purple-50: #F3F2FF;
  --color-purple-100: #E9E7FF;
  --color-purple-200: #D5D2FF;
  --color-purple-300: #B7AEFF;
  --color-purple-400: #9380FF;
  --color-purple-500: #724CFF;
  --color-purple-600: #6028FF;
  --color-purple-700: #4D13E0;
  --color-purple-800: #4512C5;
  --color-purple-900: #3A11A1;
  --color-purple-950: #20076E;

  /* Pink Colors */
  --color-pink-50: #FEF1FC;
  --color-pink-100: #FEE5FA;
  --color-pink-200: #FFCBF7;
  --color-pink-300: #FFA1EF;
  --color-pink-400: #FF66E1;
  --color-pink-500: #FB39CE;
  --color-pink-600: #E013A6;
  --color-pink-700: #CD098F;
  --color-pink-800: #A90B76;
  --color-pink-900: #8D0E64;
  --color-pink-950: #57003B;

  /* Primary Colors (Semantic naming for common UI elements) */
  --color-primary: var(--color-blue-500);
  --color-secondary: var(--color-orange-500);
  --color-success: var(--color-green-500);
  --color-info: var(--color-dark-blue-700);
  --color-accent: var(--color-pink-500);
  
  /* Text Colors */
  --color-text-dark: var(--color-black);
  --color-text-muted: var(--color-natural-400);
  
  /* Border Colors */
  --color-border: var(--color-natural-200);
  
  /* Background Colors */
  --color-bg-light: var(--color-natural-100);
  --color-bg-white: var(--color-white);
}

/* Vision Work Default Container */
.vw-container {
  border-radius: 16px;
  padding: 24px;
  gap: 16px;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 30px 0 rgba(77, 84, 100, 0.05);
  background: var(--color-bg-white, #fff);
  /* Add display: flex or grid in HTML if needed for gap to work */
}

/* Vision Work Default Table */
.vw-table {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-natural-200);
  border-spacing: 0;
  margin: 0;
  font-size: 14px;
  background: var(--color-bg-white, #fff);
}
.vw-table th, .vw-table td {
  background: var(--color-bg-white, #fff);
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-natural-200);
  border-left: none !important;
  border-right: none !important;
  margin: 0;
}
.vw-table th:first-child, .vw-table td:first-child {
  border-left: none !important;
}
.vw-table th:last-child, .vw-table td:last-child {
  border-right: none !important;
}
.vw-table tr {
  min-height: 52px;
  height: 52px;
  padding: 0 16px;
}
.vw-table tr:last-child th, .vw-table tr:last-child td {
  border-bottom: none;
}
/* Add border radius to thead and tbody corners */
.vw-table thead th:first-child {
  border-top-left-radius: 16px;
}
.vw-table thead th:last-child {
  border-top-right-radius: 16px;
}
.vw-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}
.vw-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}
/* Clickable row and hover effect for vw-table tbody tr */
.vw-table tbody tr {
  transition: background 0.15s;
  cursor: pointer;
}
.vw-table tbody tr:hover {
  background: var(--color-blue-50, #F0F9FF) !important;
}

/* Center all column titles in vw-table */
.vw-table th {
  text-align: center;
}

/* Align Grand Total column (3rd) right and Action column (5th) center in tbody only */
.vw-table tbody td:nth-child(3) {
  text-align: right;
}
.vw-table tbody td:nth-child(5) {
  text-align: center;
}