: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);

    /* Shadow */
    --shadow: 0 4px 30px 0 rgba(77, 93, 100, 0.05);
    --grey-out: rgba(0, 0, 0, 0.4);
}

/* 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;
}

.empty-group {
  padding: 0;
  margin: 0;
}
.header-group {
  width: 100%;
  height: 72px;
  display: flex;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-natural-200);
  background: var(--color-white);
  box-sizing: border-box;
}
.tab-group {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  padding: 16px 32px 8px;
}
.navbar-container-group {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 0;
  padding: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-natural-200);
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 !important;
}
.navbar-btn-group {
  display: flex;
  gap: 0;
}
.navbar-btn {
  width: fit-content;
  height: fit-content;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  font-weight: 400; /* Regular weight for inactive buttons */
  font-family: inherit; /* Or your main font */
  color: var(--color-black); /* Natural black for inactive buttons */
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-block;
  vertical-align: middle;
}
.navbar-btn.active {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-weight: 600; /* Semi bold for active button */
}

/* Remove hover effects for active buttons */
.navbar-btn.active:hover {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-weight: 600;
}

.navbar-btn:not(.active):hover {
  background: var(--color-blue-50);
  /* Keep natural-black color on hover, no color change */
}

/* Override default anchor tag styling */
.navbar-btn a {
  color: inherit;
  text-decoration: none;
}

.navbar-btn a:hover {
  color: inherit;
  text-decoration: none;
}
.body-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 32px;
  background: var(--color-white);
  box-sizing: border-box;
}
.table-group {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-natural-200);
  border-radius: 16px;
  overflow: hidden;
}
.table-content-group {
  width: 100%;
  height: 52px;
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-natural-200);
  align-items: center;
  transition: background 0.2s;
}
.table-content-group:hover {
  background: var(--color-natural-100);
}
.table-cell-group {
  width: fit-content;
  height: 52px;
  padding: 16px;
  display: flex;
  align-items: center;
}
.table-footer-group {
  width: 100%;
  height: 62px;
  display: flex;
  gap: 12px;
  padding: 14px 24px 16px;
  align-items: center;
}
.container-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px 32px;
  border: 1px solid var(--color-natural-200);
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: var(--color-white);
  box-sizing: border-box;
}
.input-row-group {
  width: 100%;
  display: flex;
  gap: 16px;
}
.footer-group {
  width: 100%;
  height: 72px;
  display: flex;
  gap: 16px;
  padding: 16px 32px;
  background: var(--color-white);
  border-top: 1px solid var(--color-natural-200);
  border-left: 1px solid var(--color-natural-200);
  border-top-left-radius: 24px;
  box-sizing: border-box;
}
.popup {
  width: 50vw; /* or any X% you want */
  background: var(--color-white);
  border-radius: 16px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1001;
}
.popup-greyout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--grey-out);
  z-index: 1000;
}
.popup-header-group {
  width: 100%;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--color-natural-200);
  box-sizing: border-box;
}
.popup-body-group {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.popup-footer-group {
  width: 100%;
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--color-natural-200);
  box-sizing: border-box;
}
/* --- Form Elements & Pop Up Styles --- */

.input,
.date-input,
.dropdown {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-natural-300);
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
  transition: background 0.2s, border 0.2s;
}
.input:disabled,
.date-input:disabled,
.dropdown:disabled {
  background: var(--color-natural-100);
}

.multiline {
  width: 100%;
  min-height: 116px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-natural-300);
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  resize: vertical;
  transition: background 0.2s, border 0.2s;
}
.multiline:disabled {
  background: var(--color-natural-100);
}

/* --- Typography Utility Classes --- */

.header-text {
  font-size: 24px;
  font-weight: 600;
}

.subheader-text {
  font-size: 18px;
  font-weight: 600;
}

.total-text {
  font-size: 14px;
  font-weight: 700;
}

.body-text {
  font-size: 14px;
  font-weight: 600;
}

.label-text {
  font-size: 14px;
  font-weight: 500;
}

.remarks-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-natural-400);
}

/* --- Custom Button Styles (Source of Truth) --- */

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 10px 14px;
  background: var(--color-blue-500);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-save .icon {
  width: 16px;
  height: 16px;
  color: #fff;
}
.btn-save:hover {
  background: var(--color-blue-400);
  color: #fff;
}

.btn-add-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 10px 14px;
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-add-row .icon {
  width: 16px;
  height: 16px;
  color: var(--x-main);
}
.btn-add-row:hover {
  background: var(--color-blue-200);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 10px 14px;
  background: var(--color-white);
  color: var(--color-natural-400);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-natural-400);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-outline .icon {
  width: 16px;
  height: 16px;
}
.btn-outline:hover {
  background: var(--color-natural-100);
  color: var(--color-natural-400);
  border-color: var(--color-natural-400);
}

.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 10px 14px;
  background: var(--color-white);
  color: var(--color-blue-500);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-blue-500);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-outline-primary .icon {
  width: 16px;
  height: 16px;
}
.btn-outline-primary:hover {
  background: var(--color-blue-50);
  color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}

/* Android Calendar Styles */
.android-calendar-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.android-calendar-header {
  user-select: none;
}

.android-calendar-header button {
  transition: background 0.2s;
}

.android-calendar-header button:hover {
  background: #f0f0f0;
  border-radius: 50%;
}

.android-calendar-body {
  overflow: hidden;
}

.android-days-header {
  /* Days header styling */
}

.android-calendar-days {
  user-select: none;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.android-day {
  transition: all 0.2s ease;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.android-day:hover {
  transform: scale(1.05);
}

.android-day-other-month {
  opacity: 0.5;
}

.android-calendar-events {
  /* Events container styling */
}

.android-event-list {
  /* Event list styling */
}

.android-event-item {
  transition: background 0.2s;
}

.android-event-item:hover {
  background: #f8f9fa;
}

.android-fab {
  transition: all 0.3s ease;
}

.android-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.android-fab:active {
  transform: scale(0.95);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .android-calendar-container {
    padding: 16px;
    overflow: hidden;
  }
  
  .android-calendar-header {
    margin-bottom: 16px;
  }
  
  .android-calendar-header span {
    font-size: 18px;
  }
  
  .android-days-header div {
    font-size: 12px;
    padding: 6px 0;
  }
  
  .android-calendar-days {
    /* Mobile calendar days styling */
  }
  
  .android-day {
    height: 32px !important;
    font-size: 13px !important;
  }
  
  .android-event-item {
    padding: 10px 0;
  }
  
  .android-event-content div:first-child {
    font-size: 15px;
  }
  
  .android-event-content div:last-child {
    font-size: 13px;
  }
  
  .android-fab {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }
  
  .android-fab span {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .android-calendar-container {
    padding: 12px;
  }
  
  .android-calendar-header {
    margin-bottom: 12px;
  }
  
  .android-calendar-header span {
    font-size: 16px;
  }
  
  .android-days-header div {
    font-size: 11px;
    padding: 4px 0;
  }
  
  .android-day {
    height: 32px !important;
    font-size: 12px !important;
  }
  
  .android-event-item {
    padding: 8px 0;
  }
  
  .android-event-content div:first-child {
    font-size: 14px;
  }
  
  .android-event-content div:last-child {
    font-size: 12px;
  }
  
  .android-fab {
    width: 44px;
    height: 44px;
    bottom: 12px;
    right: 12px;
  }
  
  .android-fab span {
    font-size: 18px;
  }
}